ES6：const与let

本文链接： https://blog.csdn.net/qq_39025670/article/details/99474887

本小结的关键词有

代码块
变量提升
暂时性死区
块级作用域

1.基础

在 ES6 中，我们用 const 声明常量，let 生命变量；const 和 let 声明常量和变量只在代码块内有效，如

{
	var a = 1;
	const b = 2;
	let c = 3;
}
console.log(a) // 1
console.log(b) // Uncaught ReferenceError: b is not defined
console.log(c) // Uncaught ReferenceError: c is not defined

在一些面试题中我们还可能遇到类似的题，如

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  }
}
a[6](); // 10

上面的代码输出的是10，如果是第一次见这个，可能想许久都搞不明白，其实原理很简单，var 声明的变量全局都有效，导致函数体内的 i 指向的都是同一个 i，导致输出的值都为10；如果换成let，由于let只在块级作用域内有效，所以函数体内的i都指向各自的i，最后输出的结果就是6。

就上面的题我们顺便再介绍一个类似的题

for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 0)
}

输出的结果为10个10，这里主要考的是同步和异步的知识，for循环是同步，setTimeout是异步。在js中，同步操作执行完后才开始执行异步操作，所以输出10个10这里就不奇怪了，还有一点要提醒一下，不要粗心把答案写成了10个9。

另外，var可以在同一块级作用域中重复声明，但const和let不允许，否则报错。

2.变量提升

var命令会发生变量提升，即变量可以在声明之前使用，值为undefined。这个现象并不合理，所以let和const就不会发生变量提升，若你在声明前使用就会报错。

console.log(a); // 输出undefined
var a = 1;

console.log(b); // 报错ReferenceError
let b = 2;

3.暂时性死区

let tmp = '123';
if (true){
  tmp = 'ab'; // 报错ReferenceError
  let tmp;
}

上面这个代码居然报错了，明明前面有声明tmp变量。其实这里是因为在if语句中重新声明了一个tmp变量，导致后者被绑定在这个块级作用域中，所以在未声明tmp变量前使用就会报错。

如果区块中存在let和const命令，则这个区块对这些命令声明的变量从一开始就形成封闭作用域，这种现象就叫“暂时性死区”。

4.const要注意的点

我们知道const声明的是常量，是不可改变的，但对于对象和数组而言，不能改变只是其指向的内存地址。比如下面这些操作是允许的

const mObj = {};
mObj.name = 'Tom';

const mArr = [];
mArr[0] = 0;

如果我们改变其地址就会报错，如下

const mObj = {};
mObj = {}; // 报错

const mArr = [];
mArr = []; // 报错

同时，声明一个const常量就必须赋值，不能留在后面赋值。

1.基础

2.变量提升

3.暂时性死区

4.const要注意的点

猜你喜欢