ES6语法——let和const

一、let

　　1.定义

　　　　ES6新增了let命令，用来声明变量，用法类似于var，但是和var有一定的区别

　　2.let只在块级作用域内有效

　　　　首先来看一个比较简单的例子，请告诉我，他们分别输出什么

//代码段1
for(var i = 0; i < 10 ;i++){
	console.log('我是var声明的')
}
console.log(i)//10
//代码段2
for(let i = 0; i < 10 ;i++){
	console.log(‘我是let声明的’)
}
console.log(i)// i is not defined

　　　　两段代码的不同之处就在声明变量i时，一个采用的var，一个采用的let。代码段1在外部打印i时的结果是　　10，而代码段2的结果却是　　i is not defined。

　　　　这是因为let声明的变量只在块级作用域内有效，所以在外部环境无法使用这个变量，而var声明的变量是一个全局变量。

　　　　然后再看下面这个经典面试题，告诉我，他们分别输出什么

//代码段1 var声明
for (var i = 0; i < 10; i++) {
	setTimeout(function(){
		console.log(i)//10次10
	},100)
}

//代码段2 let声明
for (var i = 0; i < 10; i++) {
	setTimeout(function(){
		console.log(i)//0-9
	},100)
}

　　　　分析代码之前，你要知道setTimeout是一个异步函数，异步函数的执行顺序是当主线程执行完成之后才会执行异步队列里的函数。所以每一次for循环实际上是将与之对应的setTimeout放入异步队列里面。当for循环执行完成之后，再执行这些setTimeout。

　　　　搞清楚了执行过程，那我们从结果来分析原因。用var声明的for循环的结果是10次10，这是因为当for循环执行完成之时，全局变量i的值已经变成了10，调用setTimeout函数，打印10次10。用let声明的变量并不是一个全局变量，是一个有块级作用域的变量，那么在每次循环的时候，这个i就绑定到了对应的setTimeout函数身上，实际上就是每一次循环的i都是一个新变量。所以他会输出0-9。

　　　　园友：你说上面每一次循环的i都是一个新变量，那为什么i的值会依次增加呢？

　　　　小炉：因为 javascript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

　　3.不存在变量提升

　　　　var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。我也在之前的博客里面多次分析变量提升的代码执行顺序，在这里不再赘述，后续会专门出一篇变量提升和函数提升的解析博客

　　　　let命令则不会出现这个现象，它要求所声明的变量一定要在声明后使用，否则报错。

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

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

　　　　上面的代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。

　　4.暂时性死区

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

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

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

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

　　总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 tdz）。暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

　　5.不允许重复声明

　　　　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() // 不报错

　　　　值得一提的是，一定要明确不允许重复声明的概念，请看下面的代码：

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

　　　　实际上这段代码并不是重复声明（let不允许在相同作用域内，重复声明同一个变量），for循环有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。

二、const

　　1.定义

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

　　2.const特点

　　　　（1）const一旦声明变量，就必须立即初始化，不能留到以后赋值。只声明不赋值，就会报错。

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

　　　　（3）const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

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

　　　　（5）const声明的变量不得改变值，改变常量的值就会报错

　　3.const声明真的不能改值吗？

　　　　const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。

　　　　但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。

　　　　接下来我们分别用基本数据类型和引用数据类型举例

//const声明基本数据类型
const i = 10
function show(){
	i = 20
}
show()//Uncaught TypeError: Assignment to constant variable.

//const声明 数组 改变数组内某个元素
const arr = [1,3,5,67,8,90]
arr[0] = 5
arr.push(4)
console.log(arr)//[5, 3, 5, 67, 8, 90, 4]

//const声明 对象 改变对象某个键值
const obj = {
	name:'杰西卡',
	age:15,
	time:true
}
    obj[name] = '詹姆斯'
    obj.aa = 'hold on'
console.log(obj)//{name: "杰西卡", age: 15, time: true, "": "詹姆斯", aa: "hold on"}

　　　　从上面代码的结果可以看到，const声明基本数据类型的时候，该变量的值是不可以改变的。当声明引用数据类型的时候，对数组/对象内部的元素进行删改，是可以改变的。那这是为什么呢？我们再看一段代码，再来解释

//const声明的对象 重新赋值
	const obj = {
		name:'杰西卡',
		age:15,
		time:true
}
	let a = {
		name:'haha',
		age:12,
		time:false
}
	obj = a
console.log(obj)//Uncaught TypeError: Assignment to constant variable.

//const声明的数组 重新赋值
	const arr = [1,3,5,67,8,90]
	let cc = [0]
	arr = cc
console.log(arr)Uncaught TypeError: Assignment to constant variable.

　　　　上面两段代码的结果都是报错，且提示const声明的是无法修改的。

　　　　原因：首先你应该知道引用数据类型的存储方式，在栈中存储了指针，该指针指向堆中具体的对象（也就是对象的值）。const所说的声明变量不能改变值，这个值对于引用数据类型来说是栈中的指针，const只能保证这个指针是固定的。所以当你对对象内部的值进行修改时是被允许的。但是当你去修改这个指针时，就会报错。

三、总结

　　let、const声明的变量只能在块级作用域中使用，没有变量提升，不能重复声明，必须先声明再使用。const声明变量必须伴随初始化，且const声明的变量值不可以修改。

　　var声明的变量作用域是整个封闭函数，是全局的（浏览器环境下会挂到window上，作为window的属性，let、const不会），var声明的变量存在变量提升，声明会提升到作用域的最顶部。var可以重复声明。