[ES6语法1]let和const

你的名字 2022-06-14 01:06 190阅读 0赞

/**学习es6第一篇:let和const命令
     * Created by liyanq on 17/6/5.
     * http://es6.ruanyifeng.com/#docs/let
     */
    /*summary
     * 1,let是用来声明变量,不是常量(swift是常量),但是所声明的变量,只在let命令所在的代码块内有效。
     * 2,不存在变量提升
     * */
    
    for (let i = 0; i < 3; i++) {//块级的i
    }
    //console.log(i);//ReferenceError: i is not defined;//和以前不一样了哦～
    
    var a = [];
    for (var i = 0; i < 10; i++) {//全局的i
      a[i] = function () {
        console.log(i);
      }
    }
    a[6]();//10
    for (let i = 0; i < 10; i++) {//块级的i,覆盖了全局的i
      a[i] = function () {
        console.log(i);
      }
    }
    a[6]();//6
    for (let i = 0; i < 1; i++) {
      let i = "abc";
      console.log(i);//abc
    }
    //-----let不存在变量提升--------//
    /*可放开
     console.log(foo);//undefined
     var foo = "123";
    
     console.log(bar);
     let bar = "bar";//ReferenceError: bar is not defined*/
    //-----暂时性死区----------//
    /*只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
     即使是在后面let声明,ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,
     从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。*/
    
    /*可放开
     var tmp = 123;
     {
     tmp = "abc";//ReferenceError: tmp is not defined
     let tmp = 456;
     }
     */
    
    /*可放开
     function bar(x = y, y = 2) {//ReferenceError: y is not defined
     return [x, y]
     }
     console.log(bar());
     */
    //-------不允许重复声明------//
    //-------为什么需要块级作用域？---------//
    
    /*场景1，利用了var变量的提升，导致内层的tmp覆盖了外层的tmp*/
    
    /*可放开
     var tmp = "hello";
     function show() {
     console.log(tmp);//undefined
     if (tmp == "hello"){
     var tmp = "world";
     }
     }
     show();
     */
    
    /*场景2，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量*/
    
    /*可放开
     var s = 'hello';
     for (var ii = 0; ii < s.length; ii++) {
    
     }
     console.log(ii); // 5
     */
    
    //------------ES6 的块级作用域----------//
    /*1,外层代码块不受内层代码块的影响
     * 2,内层作用域可以定义外层作用域的同名变量。
     * 3,ES5 只有全局作用域和函数作用域
     * 4,块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。*/
    
    /*可放开
     function show() {
     let tmp = "123";
     {
     let tmp = 456;//如果改成var声明的话，会提示声明冲突。var在函数里面声明就是函数级别的变量
     }
     console.log(tmp);
     }
     show();
     */
    //-----块级作用域与函数声明------//
    /*1,ES6 引入了块级作用域，明确允许在块级作用域之中声明函数
     * 2,ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。*/
    
    
    /*可放开
    function fa() {
      console.log('I am outside!');
    }
    (function () {
      if (false) {//因为false，声明了函数，没定义
        // 重复声明一次函数f
        function fa() {
          console.log('I am inside!');
        }
      }
      fa();//TypeError: fa is not a function
    })();*/
    
    /*ES6在附录B里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。
      1,允许在块级作用域内声明函数。
      2,函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
      3,同时，函数声明还会提升到所在的块级作用域的头部。
      上面里层的fa明显提升了了作用域,看来node环境就是浏览器的环境
      */
    
    /*function fa1() {
      console.log('I am outside!');
    }
    (function () {
      if (false) {
        // 重复声明一次函数f
        let fa1 = function () {
          console.log('I am inside!');
        }
      }
      fa1();//I am outside!
    })();
    */
    
    //------const----------//
    /*1,const的作用域与let命令相同：只在声明所在的块级作用域内有效。
    * 2,const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
    * 3,const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。*/
    const foo = {};
    foo.prop = 123;
    console.log(foo.prop);//成功
    // 不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。
    // 如果真的想将对象冻结，应该使用Object.freeze方法。
    const foo2 = Object.freeze({});
    foo2.prop = 123;
    console.log(foo2.prop);//undefined
    
    /*ES6 声明变量的六种方法
      ES5 只有两种声明变量的方法：var命令和function命令。
      ES6除了添加let和const命令，后面章节还会提到，
      另外两种声明变量的方法：import命令和class命令。
      所以，ES6 一共有6种声明变量的方法。*/
    
    //-------顶层对象的属性--------//
    /*1,顶层对象，在浏览器环境指的是window对象，在Node指的是global对象。
      2,ES5之中，顶层对象的属性与全局变量是等价的。
    
     ES6一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；
     另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。
     也就是说，从ES6开始，全局变量将逐步与顶层对象的属性脱钩。*/