【ES6】let 和 const 详解

一、let 和 const 共同点

• 我们以前都是使用var关键字来声明变量的
• 在ES6的时候，多了两个关键字let和const，也是用来声明变量的，只不过和var有一些区别

1. 不重复声明

• let和const不允许在相同作用域内，重复声明同一个变量
• var关键字

/* 使用 var 的时候重复声明变量是没问题的，只不过就是后面会把前面的覆盖掉*/
// 在全局作用域中声明变量 num
var num = 100;
{// 在块级作用域中再次声明变量 num
	var num = 200;	// 这里不报错
}
// 在全局作用域中重复声明变量 num	
var num = 300;	// 这里不报错

• let关键字

// 在全局作用域中声明变量 num
let num = 100;
{// 在块级作用域中再次声明变量 num
	let num = 200;	// 这里不报错
}
// 在全局作用域中重复声明变量 num	
let num = 300;	// 这里会报错

• const关键字

// 在全局作用域中声明变量 num
const num = 100;
{// 在块级作用域中再次声明变量 num
	const num = 200;	// 这里不报错
}
// 在全局作用域中重复声明变量 num	
const num = 300;	// 这里会报错

2. 无变量提升

• let和const声明的变量不会在预解析的时候解析（也就是没有变量提升）
• var关键字

// 因为预解析（变量提升）的原因，在前面是有这个变量的，只不过没有赋值
console.log(num); // undefined
var num = 100;

• let关键字

// 因为 let 不会解析预解析（变量提升），所以直接报错了
console.log(num);	// 这里会报错
let num = 100;

• const关键字

 // 因为 const 不会继续预解析（变量提升），所以直接报错了
console.log(num);	// 这里会报错
const num = 100;

3. 作用域限制

• let 和const声明的变量会被所有代码块限制作用范围
• var关键字

// var 声明的变量只有函数能限制其作用域，其他的不能限制
if(true){
	var num = 100;
}
console.log(num);	//100

• let关键字

// let 声明的变量，所有的代码块都可以限制其作用域（函数，if，while，for。。）
if(true){
	let num = 100;
	console.log(num);	//100
}
console.log(num);	//报错

• const关键字

// const 声明的变量，所有的代码块都可以限制其作用域（函数，if，while，for。。）
if(true){
	const num = 100;
	console.log(num);	//100
}
console.log(num);	//报错

• let关键字在for循环中特例：

// ()相当于一个父作用域，{}是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);	// abc
}

4. 暂时性死区

ES6 明确规定，如果区块中存在 let 和 const 关键字，这个区块对声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

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

二、let 和 const 不同点

1. 声明时区别

• let声明的时候可以不赋值，const声明的时候必须赋值

let num1 ;
console.log(num1);	// undefined
const num2;
console.log(num2);	// 这里就会报错了，因为 const 声明的时候必须赋值

2. 赋值时区别

• let声明的变量的值可以改变，const声明的变量的值不可以改变

let num = 100;
num = 200;
console.log(num);	// 200
const num2 = 100;
num2 = 200;
console.log(num2);	// 这里就会报错了，因为 const 声明的变量值不可以改变（我们也叫做常量）