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各自的区别。

  • 相关阅读:
    es字符串字段类型的私有属性 建立索引的分析器 用于查询的分析器 短语查询优化
    限制索引、字段的自动创建 无模式与自定义 索引结构映射 切面搜索
    Lucene索引数计算
    API网关性能比较:NGINX vs. ZUUL vs. Spring Cloud Gateway vs. Linkerd API 网关出现的原因
    git 中 A C D M R T U X 分别解释
    通过 ulimit 改善系统性能
    机器重启 查看crontab执行历史记录crontab没有执行
    烂代码 git blame
    es 中 for in for of
    发散阶段 收集阶段 标识符 得分 副本角色
  • 原文地址:https://www.cnblogs.com/goloving/p/12846315.html
Copyright © 2011-2022 走看看