es6 -- 基本用法

一、let 命令 -基本用法

1、块及作用域

     var d = 1;    
     if(true){
        var d = 4;     // 6之前的js作用域有 1、全局作用域  2、函数级作用域 3、eval作用域
     }
     console.log(d)    ->  4   d被覆盖

     let c = 2;
     if (true) {
        let c = 7;
     }
     console.log(c)    ->  2 

上面的代码中 分别用 var 和 let 声明了两个变量 。var 声明的即使在作用域的也可以覆盖之前声明 。 let 声明的变量不会被覆盖，这表明 let 声明的变量在块级作用域外无效。

    // for 循环的计数器就很适合使用 let 命令。
    for (let i = 0; i < 10; i++){
       // .....
    }
    console.log(i)
    //ReferenceError: i is not defined 

上面代码中 计数器 i 只在 for 循环体内部有效，在循环体外引用就回报错。 如果用 var 声明变量 i  的话，那么 i 在全局作用域内全都有效，所以全局只有一个变量 i。

 2、不存在变量提升

    
    console.log(a)  -> undefined
    var  a =  9;
   
    console.log(b)  -> ReferenceError
    let b =  10;

在上面代码中, 表明了 var 存在变量提升  let 不存在变量提升(也称 预解释)。"变量提升"的现象，既变量可以在声明之前使用，值为 undefined  。一般逻辑上，变量应该在声明语句之后才可以被使用。而 let  纠正了这一现象，它所声明的变量一定要在声明后才可以使用否则报错。

3、暂时性死区

    var a = 124;
    if(true){
        a = 'abc';  -> ReferenceError 
        let a
    }

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

也就是说，在区块中有 let 和 const 命令 ，则这个区块对当前声明的变量，形成一个封闭作用域。只要在声明前就是用这些变量，就回报错。

总之在代码块内，使用 let 声明变量之前，该变量都是不可使用的。这在语法上成为 "暂时性死区"(temporal dead zone) 简称TDZ。

4、不允许重复声明

  function () {
         let a = 3;
        let a = 5; // ->报错
     }

5、结构赋值

    let cat = 'maomao';
    let dog = 'gougou';
    let zoo = {cat, dog}
    console.log(zoo)  // -> {cat: "maomao", dog: "gougou"}

6、 拼接字符串

    var string = document.getElementById("string");
    var as = "3";
    var ex = "4";
    string.innerHTML = (`
    There are <b>${as}</b>items
    in your basket,<em>${ex}</em>
    are on sale;
    `)

 

二、const 命令 

 

1、基本用法 

const 用来声明一个只读的常量。而且常量一旦声明，常量的值就不能被改变。

   const a = 3.14;
    console.log(a);  //-> 3.14 

    a = 4.21;
    console.log(a)  //-> TypeError: Assignment to constant variable.

在上面代码中 改变常量 a 的值会报错。

   const  foo ;      //-> SyntaxError: Missing initializer in const declaration 

在上面代码中 const 只声明不赋值会报错。这就意味着，const 一旦声明常量就立即初始化，不能以后在赋值。

const 同 let 一样不存在常量提升，存在暂时性死区。

2、本质 

实际上const保证的并不是常量的值不可被改动，而是变量指向的那个内存地址不能改动。常量指向的内存地址只是一个指针，const只能保证这个指针是固定的，至于它的数据结构是否可变就不一定了。

   const foo = {};

   foo.value = 'hello';  // 给 foo 添加一个属性可以实现

   console.log(foo.value)  // -> hello

   foo = {}; //把 foo 指向另一个对象 就会报错

在上面代码中 常量 foo 存贮的是一个地址，这个地址是不可变 ，所以报错。但是对象本身是可以变得，所以我们可以为其添加新属性。

再来看一个数组

const arr = [];
arr.push('1');
console.log(arr.length); // -> 1
arr = ['die']  // ->将arr重新赋值  报错

在上面代码中 arr 这个数组本身是可写的，但是将另一个赋给 arr 就会报错。

因此 当我们声明常量遇到数组、对象时要小心。

ps: 将对象冻结方法 Object.feeeze  =>  const foo = Object.feeeze ( {} );  

end: 本人接触es6 有段时间了，最近又在看阮一峰es6 所以就当一个小结好啦。 有问题，多多指教。