• 当前位置: 首 页 > 教育百科 > 其他 > 正文

    JavaScript 中的 Var,Let 和 Const 有什么区别

    :2021年07月04日
    酷扯儿

    一、var在ES5中,顶层对象的属性和全局变量是等价的,用var声明的变量既是全局变量,也是顶层变量注意:顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象var a =10;console.log(windo...

    5775370e-317b-465e-9625-ca108a72012a.png@q_90,w_450.jpeg

    一、var

    在ES5中,顶层对象的属性和全局变量是等价的,用var声明的变量既是全局变量,也是顶层变量

    注意:顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象

    var a =10;console.log(window.a)//10使用var声明的变量存在变量提升的情况

    console.log(a)// undefinedvar a =20在编译阶段,编译器会将其变成以下执行

    var aconsole.log(a)a =20使用var,我们能够对一个变量进行多次声明,后面声明的变量会覆盖前面的变量声明

    var a =20var a =30console.log(a)//30在函数中使用使用var声明变量时候,该变量是局部的

    var a =20functionchange(){var a =30}change()console.log(a)//20而如果在函数内不使用var,该变量是全局的

    var a =20functionchange(){ a =30}change()console.log(a)//30二、let

    let是ES6新增的命令,用来声明变量

    用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效

    {let a =20}console.log(a)// ReferenceError: a is not defined.不存在变量提升

    console.log(a)//报错ReferenceErrorlet a =2这表示在声明它之前,变量a是不存在的,这时如果用到它,就会抛出一个错误

    只要块级作用域内存在let命令,这个区域就不再受外部影响

    var a =123if (true){ a ='abc'// ReferenceErrorlet a;}使用let声明变量前,该变量都不可用,也就是大家常说的“暂时性死区”

    最后,let不允许在相同作用域中重复声明

    let a =20let a =30// Uncaught SyntaxError: Identifier 'a' has already been declared注意的是相同作用域,下面这种情况是不会报错的

    let a =20{let a =30}因此,我们不能在函数内部重新声明参数

    functionfunc(arg){let arg;}func()// Uncaught SyntaxError: Identifier 'arg' has already been declared三、const

    const声明一个只读的常量,一旦声明,常量的值就不能改变

    const a =1a =3// TypeError: Assignment to constant variable.这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值

    const a;// SyntaxError: Missing initializer in const declaration如果之前用var或let声明过变量,再用const声明同样会报错

    var a =20let b =20const a =30const b =30//都会报错const实际上保证的并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动

    对于简单类型的数据,值就保存在变量指向的那个内存地址,因此等同于常量

    对于复杂类型的数据,变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的,并不能确保改变量的结构不变

    const foo ={};//为 foo 添加一个属性,可以成功foo.prop =123;foo.prop //123//将 foo 指向另一个对象,就会报错foo ={};// TypeError:"foo" is read-only其它情况,const与let一致

    四、区别

    var、let、const三者区别可以围绕下面五点展开:

    变量提升暂时性死区块级作用域重复声明修改声明的变量使用变量提升

    var声明的变量存在变量提升,即变量可以在声明之前调用,值为undefined

    let和const不存在变量提升,即它们所声明的变量一定要在声明后使用,否则报错

    // varconsole.log(a)// undefinedvar a =10// let console.log(b)// Cannot access 'b' before initializationlet b =10// constconsole.log(c)// Cannot access 'c' before initializationconst c =10暂时性死区

    var不存在暂时性死区

    let和const存在暂时性死区,只有等到声明变量的那一行代码出现,才可以获取和使用该变量

    // varconsole.log(a)// undefinedvar a =10// letconsole.log(b)// Cannot access 'b' before initializationlet b =10// constconsole.log(c)// Cannot access 'c' before initializationconst c =10块级作用域

    var不存在块级作用域

    let和const存在块级作用域

    // var{var a =20}console.log(a)//20// let{let b =20}console.log(b)// Uncaught ReferenceError: b is not defined// const{const c =20}console.log(c)// Uncaught ReferenceError: c is not defined重复声明

    var允许重复声明变量

    let和const在同一作用域不允许重复声明变量

    // varvar a =10var a =20//20// letlet b =10let b =20// Identifier 'b' has already been declared// constconst c =10const c =20// Identifier 'c' has already been declared修改声明的变量

    var和let可以

    const声明一个只读的常量。一旦声明,常量的值就不能改变

    // varvar a =10a =20console.log(a)//20//letlet b =10b =20console.log(b)//20// constconst c =10c =20console.log(c)// Uncaught TypeError: Assignment to constant variable使用

    能用const的情况尽量使用const,其他情况下大多数使用let,避免使用var

    参考文献

    https://es6.ruanyifeng.com/

    [编辑:宋聪乔 &发表于江苏]
    [我要纠错]

    来源:本文内容搜集或转自各大网络平台,并已注明来源、出处,如果转载侵犯您的版权或非授权发布,请联系小编,我们会及时审核处理。
    声明:江苏教育黄页对文中观点保持中立,对所包含内容的准确性、可靠性或者完整性不提供任何明示或暗示的保证,不对文章观点负责,仅作分享之用,文章版权及插图属于原作者。

    关键词: 顶层 对象 属性 全局 变量
    有价值
    0
    无价值
    0
    猜您喜欢
    最热文章

    暂不支持手机端,请登录电脑端访问

    正在加载验证码......

    请先完成验证