1. ES6 let 和 const 命令

👑 博主简介：知名前端工程师！
✒️ 出没地点：重庆-沙坪坝
💊 交流扣群：559658154，欢迎您的加入！
———————————————————————————————————————————
版权声明：本文为 CSDN 博主「Lady Marry」的原创文章，转载请附上原文出处链接及本声明。

ES5 只有两种声明变量的方法： var 命令和 function 命令。ES6 除了添加 let 和 const 命令，另外两种声明变量的方法： import 命令和 class 命令。所以，ES6 一共有 6 种声明变量的方法。

一. let 命令

1. 基本用法

ES6 新增了 let命令，用来声明变量。它的用法类似于 var，但是所声明的变量，只在 let命令所在的代码块内有效。

{
  let a = 10;
  var b = 1;
}

console.log(a); // ReferenceError: a is not defined.
console.log(b); // 1

特点：

1. 变量不能重复声明
2. 新增块级作用域 es5(全局, 函数, eval)
3. 不存在变量提升
4. 不影响作用域链：先在本作用域查找，没有的话查找父作用域

for 循环的计数器，就很合适 let 命令。

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);// ReferenceError: i is not defined

另外，在 for 循环中使用还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面代码正确运行，输出了 3 次 abc。这表明函数内部的变量 i 与循环变量i不在同一个作用域，有各自单独的作用域（同一个作用域不可使用 let 重复声明同一个变量）。

2. 不存在变量提升

var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为 undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。
为了纠正这种现象，let 命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

3. 暂时性死区

只要块级作用域内存在 let 命令，它所声明的变量就绑定这个区域，不再受外部的影响。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp; //绑定了当前if块区，因此上一行赋值会报错，相当于屏蔽了全局区域
}

总之，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

4. 不可重复声明

let 不允许在相同作用域内，重复声明同一个变量。

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

因此，也不能在函数内部重新声明参数。

function func(arg) {
  let arg;
}
func() // 报错

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错

5. ES6 的块级作用域

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

{
  let a = 1;
  {
    let a = 2;
  }
  console.log(a); // 1
}

如上代码有两个块，都声明了变量 a ,都分别在自己的块级作用域，互不影响。
ES6 允许块级作用域的任意嵌套。

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错
}}}};

块级作用域的出现，实际上使得获得广泛应用的匿名立即执行函数表达式（匿名 IIFE）不再必要了。

// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

二. const 命令

1. 基本用法

const 基础特点 和 let 差不多，关键区别就是：声明一个只读的常量。一旦声明，常量的值就不能改变。
特点：

1. 一定要赋初始值
2. 一般常量使用大写
3. 常量的值不能修改
4. 块级作用域
5. 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错

const PI = 3.1415;
console.log(PI); // 3.1415

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

2. 本质

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

const foo = {};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

对于数组

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

a = ['Dave'];    // 报错

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

const foo = Object.freeze({});

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

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

"use strict"
var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach((key, i) => {
    if (typeof obj[key] === 'object') {
      constantize(obj[key]);
    }
  });
};
let person = { id: 1001, name: "tom" };
constantize(person);//冻结

// Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'
person.name = "jack";