• let var const的区别


    ES6 新增了let命令,用来声明变量。

    一.let

    (1)但是所声明的变量,只在let命令所在的代码块内有效。

      <script>
           {
              var a=10;
               let b=1;
           }
           console.log(a);//10
           console.log(b)//Uncaught ReferenceError: b is not defined
    
    
       </script> 

    (2)let不存在变量提升:它所声明的变量一定要在声明后使用,否则报错。var命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefined

    1  <script>
    2     console.log(c);
    3     var c=2;
    4     // 注意var 声明可以提前,没有获取值时为undefided
    5     console.log(d);//Uncaught ReferenceError: d is not defined
    6     let d=2;
    7    
    8 
    9    </script> 

    let命令声明,不会发生变量提升。这表示在声明它之前,变量d是不存在的,这时如果用到它,就会抛出一个错误。变量cvar命令声明,会发生变量提升,即脚本开始运行时,变量c已经存在了,但是没有值,所以会输出undefined

    (3)不允许重复声明:let不允许在相同作用域内,重复声明同一个变量。

    1   <script>
    2   
    3     // 注意:let不允许在相同作用域内,重复声明同一个变量
    4     let d=2;
    5     let d=4;
    6     console.log(d)//es6.html:14 Uncaught SyntaxError: Identifier 'd' has already been declared
    7 
    8    </script> 
    function a() {
      let a = 10;
      var a = 1;
      console.log(a);
    }
    a();
    function a() {
      let a1 = 10;
      let a1 = 1;
      console.log(a1);
    }
    a();

    不能在函数内部重新声明参数。

     <script>
      
    function func1(arg) {
       let arg; // 报错
     }
    
    function func2(arg) {
      {
        let arg; // 不报错
      }
    }
       </script> 

    (4)存在暂时性死区:只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

    <script>
      
    var tmp = 123;
    
    if (true) {
      tmp = 'abc'; //ReferenceError: tmp is not defined
      let tmp;
    }
    </script> 

    上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

    ES6 明确规定,如果区块中存在letconst命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

    ES6 规定暂时性死区和letconst语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。

    二。const 命令

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

    <script>
      
      const PI=3.14;
      console.log(PI);
      PI=2;//报错 const声明常量的值就不能改变
    </script> 

    const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

    <script>
      
      const PI;//Uncaught SyntaxError: Missing initializer in const declaration
    </script> 

    上面代码表示,对于const来说,只声明不赋值,就会报错。

    (2)const的作用域与let命令相同:只在声明所在的块级作用域内有效。

    if (true) {
      const MAX = 5;
    }
    
    MAX // Uncaught ReferenceError: MAX is not defined

    (3)const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。

    if (true) {
      console.log(MAX); // ReferenceError
      const MAX = 5;
    }

    上面代码在常量MAX声明之前就调用,结果报错。

    (4)const声明的常量,也与let一样不可重复声明。

    var message = "Hello!";
    let age = 25;
    
    // 以下两行都会报错
    const message = "Goodbye!";
    const age = 30;

     三。var

    (1.)可以重复声明变量

    <script>
      
     var a=1;
     var a=2;
     console.log(a)//可以重复声明变量,后面声明的变量会覆盖前面2 
    </script> 

    (2)存在变量声明提前

    <script>
      
    //   存在变量声明提前(虽然变量声明提前,但变量的赋值并没有提前,因此下面的程序不会报错,但a的值为undefined)
    function test(){
     console.log(a);//undefined
     var a=3
    }
    test()
    </script> 

    (3)var的作用域是函数作用域,在一个函数内利用var声明一个变量,则这个变量只在这个函数内有效

    function test(){
     var a=1;
    console.log(a);//函数未调用 输出的是undefined  函数调用输出的是1 
    }
    console.log(a);//ReferenceError:a is not defined
    
    </script> 

     什么时候用 var、let 或 const 呢?我的建议是,大多数情况下都使用 const,除非你知道你的变量的值还会被改变,这样的话,别人阅读你的代码不用老想着这个变量的值会不会有改变。如果这个变量的值的确需要改变,例如在 for 循环里面,那么就是用 let。这也同时意味着你以后就不要用 var 了。

     为什么需要块级作用域?

    ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

    第一种场景,内层变量可能会覆盖外层变量。

     1 var tmp = new Date();
     2 
     3 function f() {
     4   console.log(tmp);
     5   if (false) {
     6     var tmp = 'hello world';
     7   }
     8 }
     9 
    10 f(); // undefined

    上面代码的原意是,if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量。但是,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。

    第二种场景,用来计数的循环变量泄露为全局变量。

    1 var s = 'hello';
    2 
    3 for (var i = 0; i < s.length; i++) {
    4   console.log(s[i]);
    5 }
    6 
    7 console.log(i); // 5

    上面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。

    let实际上为 JavaScript 新增了块级作用域。

    function f1() {
      let n = 5;
      if (true) {
        let n = 10;
      }
      console.log(n); // 5
    }

    上面的函数有两个代码块,都声明了变量n,运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n,最后输出的值才是 10。

    var let 在for循环中的区别

    参考

    https://blog.csdn.net/zoelinjf/article/details/79618688

    ES6 声明变量的六种方法

    ES5 只有两种声明变量的方法:var命令和function命令。ES6 除了添加letconst命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令。所以,ES6 一共有 6 种声明变量的方法。

  • 相关阅读:
    springboot整合mybatisplus
    在layui中使用treetable.js插件
    shiro系列9:基于前端的权限控制和基于后端的权限控制
    springboot文件上传案例
    springboot配置虚拟路径访问上传到磁盘的文件
    springboot文件下载案例
    springboot跨域的处理方式
    springboot上传文件过大的解决方案
    Django与Ajax
    Django查询数据库性能优化
  • 原文地址:https://www.cnblogs.com/wanqingcui/p/10795152.html
Copyright © 2020-2023  润新知