ES6中的let和const命令

let和const命令

let命令

基本用法

ES6新增了let命令，用来声明变量，let的语法和var的语法基本上一样，格式：let 变量名 = 变量值;

只不过let声明的变量只能在let命令所处的代码块中有效。

// 一个大括号就属于一个代码块(除了字面量定义的对象 var obj = {})
{
   var num = 10;
   let sum = 2
}
console.log(num); //打印 10
console.log(sum); //报错 Uncaught ReferenceError: sum is not defined

上面代码在代码块之中，分别用let和var声明了两个变量num和sum。然后在代码块之外打印这两个变量，结果let声明的变量报错，var声明的变量打印的是正确的值。这说明，let声明的变量只在它所在的代码块有效。

for循环中就很适合用let声明计数器变量

for (let index = 0; index < 10; index++) {
    console.log(index); //会依次打印0~9
}
console.log(index); // 打印的是10 for循环执行完毕 index的值是10

for (let index = 0; index < 10; index++) {
    console.log(index); //会依次打印0~9
}
console.log(index); //报错 Uncaught ReferenceError: index is not defined

在上面两个for循环的代码块中，用var声明的index能在代码块内部以及代码块外打印，并没有报错。而用let声明的index，在代码块内部打印index，浏览器控制台会依次打印0~9，而在代码块外面打印index则会报错，也能说明，let声明的变量只在它所在的代码块有效。

let与var的区别

• 不能重复定义：let不允许在相同作用域内，重复声明同一个变量，也不能在函数内部重新声明参数。

  //报错 Uncaught SyntaxError: Identifier 'num' has already been declared
  let num = 100;
  console.log(num);
  let num = 200;
  console.log(num);
  

  //报错 Uncaught SyntaxError: Identifier 'num' has already been declared
  function fn() {
       var num = 10;
       let num = 20;
   }
  
  //报错 Uncaught SyntaxError: Identifier 'a' has already been declared
  function fun() {
      let a = 1;
      let a = 'abc';
  }
  
  //报错 Uncaught SyntaxError: Identifier 'arg' has already been declared
  function fn(arg) {
      let arg;
  }
  fn();
  
  //不报错 此时的let已是在另外一个代码块中声明变量arg
  function fn(arg) {
      {
          let arg = 10;
          console.log(arg);
      }
  }
  fn();//打印 10
  

• 没有变量提升（var定义的变量是有变量提升的），必须先定义再使用

  // 打印的是undefined
  console.log(sum);
  var sum = 200;
  
  //没有变量提升 Uncaught ReferenceError: Cannot access 'num' before initialization
  console.log(num);
  let num = 100;
  
  //全局变量不会添加到window属性上
  let num = 100;
  console.log(window.num, num); //undefined 100
  
  

  var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。其实用var声明的全局变量是给window对象添加了一个属性，如果没有给该属性赋值，js解析器会默认给一个值undefined。用let则没有“变量提升”现象，声明的变量也不会添加到window属性上，没有“变量提升”现象就意味着提前访问变量就会报错。

• 具有块级作用域

  • 为什么需要块级作用域？

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

  ​ 第一种场景，由于变量提升可能会使内层变量可能会覆盖外层变量。

  var num = "你好";
  function fun() {
    console.log(num);
    if (false) {
      var num = 'hello';
    }
  }
  fun(); // undefined
  

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

  ​ 第二种场景，用来计数的循环变量会成为全局变量。

  var arr = [1,8,9,5,6,7,3,2,4];
  
  for (var index = 0; index < arr.length; index++) {
    console.log(arr[index]);
  }
  
  console.log(index); // 10
  

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

​ ES6 的块级作用域

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

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

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

const命令

基本用法

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

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

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

const M;
// SyntaxError: Missing initializer in const declaration

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

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

if (true) {
  const X = 1;
}
console.log(X); // Uncaught ReferenceError: X is not defined

const命令声明的常量也是不提升，只能在声明的位置后面使用。

if (true) {
  console.log(Y);//Uncaught ReferenceError: Cannot access 'Y' before initialization
  const Y = 2;
}

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

const声明的常量，也与let一样不可重复声明。

var message = "Hello!";
let age = 25;

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

本质

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

const obj = {};
// 为 foo 添加一个属性，可以成功
obj.num = 123;
console.log(obj.num); // 123
// 将 foo 指向另一个对象，就会报错
 obj = {}; //Uncaught TypeError: Assignment to constant variable.

上面代码中，常量obj储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把obj指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

下面是另一个例子。

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

上面代码中，常量a是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就会报错。

如果真的想将对象冻结，应该使用Object.freeze方法。

const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

上面代码中，常量foo指向一个冻结的对象，所以添加新属性不起作用，严格模式时还会报错。

除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

 deepFreeze(obj); // 调用函数对obj进行深冻结

    // 下面是尝试修改，验证结果
    obj.name = 'abc';
    obj.arr[2] = 'abc';
    obj.gf.school = 'abc';
    obj.gf.config.a = 'abc';
    console.log(obj); // 发现无法修改，功能设置成功

    // 封装的用于深冻结的函数：
    function deepFreeze(obj) {
      // 1 先通过Object.freeze()对对象的属性进行冻结
      Object.freeze(obj);

      // 2 遍历obj获取所有属性
      for (var k in obj) {
        // 3 检测当前属性值是否为复杂类型
        if (typeof obj[k] === 'object' && obj[k] !== null) {
          // console.log(k + '是复杂类型值');
          // 4 进行递归调用
          deepFreeze(obj[k]);
        }
      }
    }

参考文章：ES6电子书：http://es6.ruanyifeng.com/#docs/intro