zoukankan      html  css  js  c++  java
  • ES6里let、const、var区别总结

      首先了解下let与var的区别,主要有以下3点:

    1、var在js中是支持预解析的,而let不支持预解析,也就是变量提升的区别

    console.log(a)
    var a = 22;
    // 打印undefined
    
    console.log(b)
    let b = 22
    // 报错:b is not defined

    2、var可以重复定义同一个变量,但是let不可以

    var a = 100;
    var a = 200;
    console.log(a)
    // 200
    
    let a = 100;
    let a = 200;
    console.log(a)
    // 报错:Identifier 'a' has already been declared

    3、let可以形成块级作用域,在es6之前js只有var函数作用域,没有块级作用域。

      在es6之前我们是怎么实现块级作用域的呢?有朋友已经猜到了,立即执行函数表达式,简称IIFF。

    (function () {
      var aa = 200
    })()
    console.log(aa)
    // 报错:aa is not defined

      可以看到通过一个立即执行函数表达式,我们实现了一个局部作用域或者块级作用域,但是有了let之后就不需要写这样的代码了,只需要一个大括号内即实现块级作用域。

    {
      let bb = 200
    }
    console.log(bb)
    // 报错:bb is not defined

    4、var定义的全局变量会挂载到window对象上,使用window可以访问,let定义的全局变量则不会挂载到window对象上

    var f = 200;
    window.f
    // 200
    
    let g = 200;
    window.g
    // undefined

      下面谈一下const的区别,以上四点完全适用const,但是const与let或是var还有两点不同

    1、const是用来定义常量的,常量定义之后是不允许改变的。

    const AA = 200;
    AA = 100;
    // 报错:Assignment to constant variable.

    错误提示为:Uncaught TypeError: Assignment to constant variable.意思是常量已经赋值了。

    这里有一个小坑,看如下代码:

    const BB = {}
    BB.a = 200
    console.log(BB)

      结果打印:{a:200},没有报错,并且赋值成功。

      为什么 ?因为BB的值并没有改变,依然指向刚开始赋值的那个对象,并没有重新赋值,如果将BB重新赋值,就会报错了,大家可以试试。其实就是引用变量与普通变量的区别。

      所以用const定义的常量只要是引用类型数据,改变这个引用类型数据的结构或属性,都是允许的。引用类型包括哪些呢?数组和对象。

      如果你想让我们的变量真正的不可变的话,可以使用 Object.freeze() , 它可以让你的对象保持不可变。不幸的是,他仅仅是浅不可变,如果你对象里嵌套着对象的话,它依然是可变的。

      关于这个可以查看我之前的博文:JavaScript 中的不可变对象(Immutable Objects)

    const A = {
      b: {
        c: 1
      }
    }
    Object.freeze(A)
    A.b = 10 // 不会变,
    console.log(A); // {b:{c:1}}
    console.log(A.b); // {c: 1}
    A.b.c = 10; // ok
    console.log(A.b.c); // 10

    2、用const定义常量必须赋值。不赋值的话,没有任何意思,所以报错。

    const CC
    // 报错:Missing initializer in const declaration

      意思是缺少初识值。

      以上便是let、const 和var各自的区别。

  • 相关阅读:
    httpcontext in asp.net unit test
    initialize or clean up your unittest within .net unit test
    Load a script file in sencha, supports both asynchronous and synchronous approaches
    classes system in sencha touch
    ASP.NET MVC got 405 error on HTTP DELETE request
    how to run demo city bars using sencha architect
    sencha touch mvc
    sencha touch json store
    sencha touch jsonp
    51Nod 1344:走格子(贪心)
  • 原文地址:https://www.cnblogs.com/goloving/p/12846315.html
Copyright © 2011-2022 走看看