es6.md 5.6 KB

ECMAScript 6 入门

let 和 const 命令

1. let 命令

变量提升

  1. 变量提升是指,ES5版本,var命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefined

  2. 为了纠正这种奇怪的现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

  3. // var 的情况
    console.log(foo); // 输出undefined
    var foo = 2;
       
    // let 的情况
    console.log(bar); // 报错ReferenceError
    let bar = 2;
    

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

暂时性死区

  1. 首先要了解一个概念,块级作用域(比如说函数的定义,if啥的,括号内的)

  2. 要了解一个概念,全局变量不能

  3. 什么是暂时性死区呢。比如说我申请了个全局变量tmp,然后我在某个函数中,又申请了个局部变量tmp,那么这个时候,在这个函数中,就以局部变量tmp为准,可以认为全局变量tmp不存在

    var tmp = 123;
    if (true) { //这里没申请同名局部变量,不存在死区
       tmp = 'abc'; 
       console.log(tmp)
    }
    if (true) {//这里申请了同名局部变量,存在死区
       // TDZ开始
       tmp = 'abc'; // ReferenceError
       console.log(tmp); // ReferenceError
       let tmp; // TDZ结束
       console.log(tmp); // undefined
       tmp = 123;
       console.log(tmp); // 123
    }
    

不允许重复声明

  1. let 不允许同一作用域内,重复声明一个变量

2. 块级作用域

  1. 块级作用域可以任意嵌套,每一层都是一个单独的的作用域。第四层作用域无法读取第五层作用域的内部变量。

  2. 内层作用域可以定义外层作用域的同名变量。

    {{{{
     let insane = 'Hello World';
     {let insane = 'Hello World'}
    }}}};
    
  3. 块级作用域的出现,实际上使得获得广泛应用的匿名立即执行函数表达式(匿名 IIFE)不再必要了。

    // IIFE 写法
    (function () {
     var tmp = ...;
     ...
    }());
       
    // 块级作用域写法
    {
     let tmp = ...;
     ...
    }
    
  4. ES6 规定,允许在块级作用域之中申明函数。函数声明语句的行为类似于let,在块级作用域之外不可引用。

    // 块级作用域内部的函数声明语句,建议不要使用
    {
     let a = 'secret';
     function f() {
       return a;
     }
    }
       
    // 块级作用域内部,优先使用函数表达式
    {
     let a = 'secret';
     let f = function () {
       return a;
     };
    }
    

3. const 命令

基本用法

  1. const声明一个只读的常量。一旦声明,常量的值就不能改变。
  2. const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。
  3. const的作用域与let命令相同:只在声明所在的块级作用域内有效。
  4. const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。
  5. const声明的常量,也与let一样不可重复声明。

本质

  1. const 实际上保证的,并不是变量的值不动,而是变量所指向的那个内存地址所保存的数据不动。

  2. 对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量

  3. 但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了

    //ex1
    const foo = {};
       
    // 为 foo 添加一个属性,可以成功
    foo.prop = 123;
    foo.prop // 123
       
    // 将 foo 指向另一个对象,就会报错
    foo = {}; // TypeError: "foo" is read-only
       
    //ex2
    const a = [];
    a.push('Hello'); // 可执行
    a.length = 0;    // 可执行
    a = ['Dave'];    // 报错
       
    
  4. 如果想将const的对象冻结,应该用Object.freeze方法

    const foo = Object.freeze({});
       
    // 常规模式时,下面一行不起作用;
    // 严格模式时,该行会报错
    foo.prop = 123;
    
  5. 除了将对象本身冻结,应该要将对象的属性也得冻结

    var constantize = (obj) => {
     Object.freeze(obj);
     Object.keys(obj).forEach( (key, i) => {
       if ( typeof obj[key] === 'object' ) {
         constantize( obj[key] );
       }
     });
    };
    

变量的解构赋值

  1. 模式匹配,不匹配的返回undefined

  2. 实现方式,可能是对等号右边的值遍历。Iterator 接口

    // 报错
    let [foo] = 1;
    let [foo] = false;
    let [foo] = NaN;
    let [foo] = undefined;
    let [foo] = null;
    let [foo] = {};
    
  3. 允许制定匹配失败的默认值,但只有某个数组成员严格等于undefined时,默认值才会生效(null不生效)

    let [foo = true] = [];
    foo // true
    let [x, y = 'b'] = ['a']; // x='a', y='b'
    let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
       
       
    let [x = 1] = [undefined];
    x // 1
    let [x = 1] = [null];
    x // null