var与ES6中const、let声明的变量的区别

2023-11-07

好久以前的研究,今天再来回顾一下。

首先我们比较一下使用var声明的变量和不使用var声明的变量的区别:

  1. 使用var声明的变量声明前调用,那么该变量的值为undefined;不使用var声明的变量声明前调用直接报错Uncaught ReferenceError:xxx is not difined;
  2. 使用var声明的变量不可delete,不使用var声明则可以delete掉释放空间。(实则浏览器的垃圾回收机制也会清理掉用var声明但是不再使用的的变量,比如某个仅执行一次的函数中被调用的某个var 声明的变量)
  3. 未使用var声明的变量实际上是window的一个对象,而使用var声明的变量只是一个本地变量而已。
  4. 在使用'use strict'的模式之下,不使用var 声明变量的语法是不被允许的,报错:Uncaugth SyntaxError;
    console.log(a);   //undefined,这里还涉及变量提升的概念
    console.log(b);   //报错 Uncaught ReferenceError: b is not defined
    var a = 1;
    b = 2;
    console.log(a);   //1
    console.log(b);   //2
    console.log(window.a);   //undefined
    console.log(window.b);   //2
    delete a;
    delete b;
    console.log(a);   //1
    console.log(b);   //报错 Uncaught ReferenceError: b is not defined,可见b在声明前使用和声明后delete再使用是一样的结果
再来看下let,var,const声明的变量的区别:
  1. 看意思就知道,const是常量的意思,就是说只能被定义一次,且不可再改变,否则就会报错:Uncaught TypeError: Assignment to constant variable.另外声明前使用也会报错:Uncaught ReferenceError: a is not defined;看一个例子:
    const foo = {};
    foo.prop = 123;
    console.log(foo.prop);  //123
    foo.prop = 456;
    console.log(foo.prop);  //456
    const foo = {};   //Identifier 'foo' has already been declared
    这里const定义一个foo之后,对其添加了属性prop,随后又对该属性进行了修改,为什么没有报错?那是因为常量foo本身存储的是一个地址,该地址指向一个对象,不可变的是foo这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为foo添加新属性,改变新属性值,而最后一行中尝试改变foo的地址,就会报错,如果要彻底将对象冻结,应该使用Object.freeze(obj)方法。同理,数组也是一样的
    const group = [];
    group.push('Bob');
    console.log(group[0]); //Bob
    group = ["Tom"];//Uncaught TypeError: Assignment to constant variable.
  2. var 和 let 就有意思了,let声明的变量声明前使用也会报错,这个与const一致;最重要的一点是let声明了一个块级作用域的变量在一个块的“}”结束的时候,该变量消失。例子:
    (function(x,y){
            var b = x;
            let c = y;
            if (true) {
                var b = 5;
                let c = 6;
                console.log(b);  //5
                console.log(c);  //6,这里的let c在下一行的"}"之后消失
            }
            console.log(b);  //5
            console.log(c);  //3 ,这里仍然是第三行的let c;
    }(2,3));
  3. 再看一个例子:
    var array1 = [],array2 = [];
    for(var  i=0;i<10;i++){ 
            array1[i] = function(){
                console.log(i);
            };
    }
    for(let  j=0;j<10;j++){  
            array2[j] = function(){
                console.log(j);
            };
    }
    array1[6]();  //10
    array2[6]();  //6
    所以说let是一个比较保守的变量。这里变量为i的for循环中,i是一个全局变量,array1[i]是一个console.log(i)的函数,而i的最终结果为10,故而每次调用array1[i],实际上都是console.log(10);而let作为仅在其代码块有效的变量,当前的j仅在本轮的循环中有效,就是说每一次循环,j其实都是一个新产生的变量。所以let变量适合用于循环体中
  4. 再看一个例子:
    var tmp = 1;
    if(true){
        tmp = 2;   //ReferenceError
        let tmp;
    }
    这个例子中tmp=2的赋值会报错,因为if中的let对tmp变量的声明,导致该tmp绑定了这个作用域,而let不会像var那样“变量提升”,所以未声明赋值会报错。ES6中明确规定:如果区块中存在let和const命令,则这个区块对这些命令声明的变量从一开始就形成了封闭做作用域,只要在声明之前做任何使用,都会报错。这在语法上称为“暂时性死区”(temporal dead zone ,简称TDZ)。
  5. 还有一点要注意,var声明的变量为全局变量,而let,const声明的变量不为全局变量,使用window访问不到,如下:
    var a = 1;
    console.log(window.a); //1
    let b = 2;
    console.log(window.b) //undefined

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

var与ES6中const、let声明的变量的区别 的相关文章

  • 如何使用数据对象中的值指定 d3.js 选择器?

    我在 Web 应用程序中使用 d3 js 描述我想要做的事情的最简单方法是查看下面链接的 Fiddle 但基本设置是我有一个包含数据对象的数组 my data id B text I want this text in B id C tex
  • 具有多个参数的 JavaScript 函数

    我有一个将数组作为输入的函数 我如何修改它以使用变量参数和数组 例如我想要arrSum 1 2 3 arrSum 1 2 3 回来true即两者都应该返回 6 const arrSum arr gt arr reduce a b gt a
  • iframe 不读取 Chrome 中的 cookie

    Chrome 不允许子 iframe 读取自己的 cookie 我有一个带有子 iframe 的父网页 家长在https first site com 孩子在 父级内部 cookie set with 小路 安全 真实 仅http 假 域名
  • Soundcloud自定义播放器动态添加和播放歌曲

    我在用soundcloud自定义播放器 https github com soundcloud soundcloud custom player创建一个可以播放所有歌曲的播放器 我的网站 当我只放置任何曲目或帖子的静态网址时 这效果非常好
  • 从 JavaScript 字符串保存文件而不访问服务器

    如果我在 JavaScript 中有一个内存字符串 例如 Excel 或 PDF 格式 并且我想弹出一个保存对话框以便用户可以将这些字节保存到文件中 我将如何执行此操作 我试图避免回到服务器 如果我要返回服务器 我可以在响应中发送正确的 H
  • 禁用 Chrome 的文本输入撤消/重做 (CTRL+Z / CTRL+Y)

    i m currently developing a web application and i encounter a problem As you might know or not chrome has a feature that
  • 如何从 OnChange 事件捕获文本框的值

    在我的 C MVC 应用程序中 我有一系列这样生成的文本框 foreach object item in items Html TextBox 渲染的结果是一系列看起来像这样的文本框
  • 如何使用 Material UI 制作一个圆形复选框?

    我尝试匹配的设计要求复选框为圆形 我正在使用 Material UI 和 React 边框半径不起作用 因为实际图标的边框不是可见复选框的边框 我不能只使用像 Font Awesome 这样的东西 因为它需要实际检查和取消检查 Curren
  • 使用HTMLWebpackPlugin时如何通过webpack加载图片?

    我正在使用 HTMLWebpackPlugin 在我的模板中我有一个 img 标签 img src images logo png 如果您注意到 这里我使用相对路径 认为 webpack 将触发在 webpack config js 文件中
  • CasperJS - 在网站上注册并验证 Gmail 上发送的邮件 - 对于 slimer 和 phantom -

    Edit 这是windows的行为 linux就失败了 首先 如果您使用 casper 成功导航 gmail 没有随机等待时间 从 20 秒到 5 分钟 请告诉我 我想在我们的网站上注册 然后使用 Gmail 自动验证我的注册 整个注册步骤
  • 属性列表后缺少 jquery 验证 }

    我这里有这个代码 order validate rules name required true lastname required true address required true telephone required true di
  • canvas:如何在一个变换语句中完成平移、倾斜、旋转...?

    最近几天我在学习 变换 现在我知道如何通过变换的矩阵进行平移 旋转 倾斜 缩放 但如果我想在一个转换语句中执行上述所有操作 我该怎么办 ctx transform a b c d e f 当我们想要通过变换旋转某些东西时 我们必须为每个参数
  • JavaScript:字符串连接性能低下? Array.join('')?

    我读过如果我有一个for循环 我不应该使用字符串连接 因为它很慢 例如 for i 0 i lt 10000000 i str a 相反 我应该使用Array join 因为它更快 var tmp for i 0 i lt 10000000
  • 在 JavaScript onClick 事件处理程序中转义双引号

    下面的简单代码块可以在静态 HTML 页面中提供 但会导致 JavaScript 错误 您应该如何转义中嵌入的双引号onClick处理程序 即 xyz 请注意 HTML 是通过从数据库中提取数据动态生成的 其中的数据是其他可能带有单引号或双
  • 在javascript中调用c#函数[重复]

    这个问题在这里已经有答案了 可能的重复 从 Javascript 调用 ASP NET 函数 https stackoverflow com questions 3713 call asp net function from javascr
  • 在单选按钮选择上提交 Rails 表单

    我有以下 Rails 表单 有效 但我想删除 Submit tag 并在选择单选按钮后立即提交表单 我怎么做 p nbsp nbsp p p p 所以我找到了精确的解决方案 感谢输入人员 它帮助我重新定义了我的谷歌搜索
  • 检测 Service Worker 离线状态的最佳实践

    我有一个服务工作者应该缓存一个offline html客户端没有网络连接时显示的页面 然而 有时它会认为导航器已离线 即使它并未离线 那是 navigator onLine false 这意味着用户可能会得到offline html而不是实
  • JavaScript 类继承

    谁能告诉我为什么我的 showDiv boo 在类的方法中未定义 我也无法访问我的类的方法 这是我的 Blink 类及其属性和方法 function Blink div this div div Blink prototype counte
  • 无法定义 set 和 get 方法

    尝试使用访问器定义属性时出现错误 这是我的代码 var person Object defineProperty person birthYear value 1997 writable true enumerable true confi
  • Selenium - 运行 javascript

    我有一个愚蠢的问题 如何运行位于测试站点上的脚本 我可以运行警报 但我无权访问我编写的脚本 我尝试过 runscript geteval 没有任何效果 由于 Selenium 是用 JavaScript 编写的 因此 window 对象会移

随机推荐

  • 找不到d3dx9_43.dll丢失怎么解决(分享几种解决方法)

    为什么我们打开电脑软件或许游戏时候 电脑会报错出现d3dx9 43 dll丢失 或许找不到d3dx9 43 dll等等的提示 下面来详细介绍一下d3dx9 43 dll详细解决方法跟d3dx9 43 dll是什么 如果你的系统中没有安装或安
  • 【Python】 _tkinter.TclError: bitmap "xzw.ico" not defined

    问题描述 在Python中可以使用pyinstaller命令将 py文件打包成 exe文件 但是成功打包成 exe文件后 在Windows系统上运行却出现了如下错误 tkinter TclError bitmap xzw ico not d
  • ESP32-CAM网络摄像头系列-01-基于RTSP协议的局域网视频推流/拉流的简单实现

    前言 由于项目需要 最近开始开坑关于ESP32 CAM系列的RTSP网络摄像头系列 该文章为该系列的第一篇文章 用于记录项目开发过程 本文解决的问题 使用ESP32 CAM获取图像数据 并通过RTSP协议将获取到的视频流传输到上位机进行显示
  • mysql存储loop_mysql存储loop

    mysql数据库存储过程 存储过程简介 存储过程可以简单理解为一条或者多条sql语句的集合 存储过程用来实现将一组关于表的操作的sql语句当作一个整体来执行 存储过程在实际应用中最主要的特点的事提高执行效率以及sql代码封装功能 特别是sq
  • 今天我要写Code吗?

    Manager还能不能写Code 如果你刚从技术开发职位升迁到管理职位 这会是一个在相当长一段时间内非常纠结你的问题 如果你之前技术做得还不错 算是个 高手 你应该会更加纠结一点 也许每天都在挣扎着 今天我要写Code吗 在深入探讨这个问题
  • 基础设计三——FPGA学习笔记<4>

    前置学习 基础设计二 FPGA学习笔记 3 基础设计一 FPGA学习笔记 2 verilog语法 FPGA学习笔记 1 参考书目 野火FPGA Verilog 开发实战指南 目录 一 串口 RS232 lt 1 gt 简介 lt 2 gt
  • Qt5.3.1编译QOCI链接oracle

    一 Qt 我下载的是mingw版本的 qt opensource windows x86 mingw482 opengl 5 3 1 exe 安装 安装的时候记得把source选上 建议全选 电脑不差3点多G的空间吧 安装好后 我们设置一下
  • IDC存储软件定义的七个主要类别

    在DoStor上看到一篇文章 提到IDC存储软件定义的七个主要类别 1 数据备份与恢复 2 归档软件 3 复制软件 4 存储管理软件 5 存储设备管理软件 6 存储基础架构软件 7 文件系统软件 对号入坐 我在学习和工作中涉及了其中的1 2
  • Git密码(登录凭证)的保存和重置 Mac

    Git密码 登录凭证 的保存和重置 Mac 1 凭证系统 2 命令行操作 store模式 2 1 凭证存储 2 2 凭证删除 3 命令行操作 osxkeychain模式 Mac用户 3 1 辅助工具安装 3 2 凭证存储 3 3 凭证删除
  • osg报错:错误(活动) E0757 变量 “GLenum“ 不是类型名

    前言 osg报错 错误 活动 E0757 变量 GLenum 不是类型名 原因 osg中封装了openGL的库 感觉vs2019无法识别openGL相关的部分 解决 vs2019中配置 预处理器
  • DELL R服务器配置IPMI

    转载自https blog csdn net hanzheng260561728 article details 107661274 使用iDRAC设置实用程序 在启动过程中按F2 设置iDRAC IP 打开受管理的系统 在开机自检 POS
  • 如何将node.js部署到服务器上

    注 本文只是简易的单个node js文件 名为server js 运行 是为了给前端项目写一个数据接口 环境 阿里云服务器 ubuntu 64bit xshell 1 首先登录阿里云添加安全组规则 开放程序运行时访问的端口号 本文为8000
  • 使用 selenium 连接已经打开的 chrome 浏览器

    1 方法一 新建文件夹test 进入chrome exe 目录 打开CMD 输入 chrome exe remote debugging port 9999 user data dir D test 弹出 浏览器框 pycharm运行脚本如
  • springmvc代码正确但是报错404解决以及乱码解决

    1 如果代码正确 但是运行报错404的话 可能是jar包没有导入到maven上 可以到Project Structure 中的Artifacts中 找到对应的项目 创建一个lib文件夹 添加jar包到里面 如果没有导入jar包的话 可以在W
  • Linux nohup后台命令基础详解

    一 前言 因为经常使用Xshell进行服务器代码的运行 但是每次到关机后 或者是关掉Xshell连接窗口 在服务器上的命令 操作也就断掉了 这不得不找到了一个Linux命令 nohup 二 基本用法 nohup command arg 拿p
  • PHP实现发送邮件

    不同类型的邮箱发送邮件的方式也是不同的 下面我们就先给大家举例介绍qq邮箱开启发送邮件服务的方法 首先我们登录qq邮箱 打开设置 选择帐户 然后在帐户下 找到如下所示的开启服务部分 开启服务中 前两个选项均可实现邮件发送服务 点击开启 会出
  • 2个map集合求差集

    List
  • I - Playing With Strings(回文串)

    I Playing With Stringshttps vjudge csgrandeur cn problem Gym 101020I 丹尼和迈克是两个孩子 他们整天玩游戏 当他们找不到游戏玩的时候 他们就发明一个游戏 有一个小时左右到达
  • 用table进行网页的布局

    table width 100 tr td table width 100 tr td img src img logo2 png td td img src img header jpg td td a href 登录 a td tr t
  • var与ES6中const、let声明的变量的区别

    好久以前的研究 今天再来回顾一下 首先我们比较一下使用var声明的变量和不使用var声明的变量的区别 使用var声明的变量声明前调用 那么该变量的值为undefined 不使用var声明的变量声明前调用直接报错Uncaught Refere