ES6-let 与 const

1.let命令 

---

基本概念

let语法类似于var，不同点在于let定义的变量只在定义它的代码块中有效。

{
var a = 1;
let b = 2;
}
a // 输出1
b // 报错 Uncaught ReferenceError: b is not defined

var 定义的变量要么为全局变量，要么是在函数之中的局部变量。上述代码块中的 a 即为全局变量，所以在代码块外也可调用此变量。而在代码块外调用变量 b 报错可证明 b 只在定义它的代码块中有效。

---

不存在变量提升和暂时性死区

ES6 中的 let 命令是不存在“变量提升”现象的，变量提升指的是在变量未经定义之前便可调用。

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

console.log(b); 
let b = 2;
// Uncaught ReferenceError: b is not defined

上述代码，使用 var 定义的变量 a 发生变量提升，在脚本程序运行时变量已经存在了，只是还未定义值，所以输出 undefined。而变量 b 在未定义之前调用打印 b 的代码会报错，表明使用let 命令定义的变量是不存在变量提升的。

b = 3; 
let b = 2;
// Uncaught ReferenceError: b is not defined

当你输入上述代码却得到报错的结果是不是很疑惑呀，为什第一句代码没有把变量 b 定义为一个全局变量呢？

没错！“罪魁祸首” 就是 let 命令，因为从当前作用域的头部一直到 let 命令声明变量 b 之前，b都是不可用的，这在语法上称为暂时性死区（temporal dead zone）。

ES6中规定暂时性死区和let、const不出现变量提升，能够有效地避免在声明变量之前就使用它。

---

重复定义检查

相同作用域内，var 可以让同一个变量名在同一个作用域里被定义多次，而 let 则不允许。以下是几个例子。

{
let a = 1;
var a = 2;
}

{
let b = 2;
let b =3;
}

function test(argument){
let argument = 4;
}
test();

上述三块代码均会报出变量名已经声明的错误。

---

let 用途

下面考虑一种需求：需要动态往HTML中一个ID为“list”的标签中插入十个li标签，并且每个li标签都带有一个提示本标签被点击的点击事件。

var list = document.getElementById('list');
for( let i=1;i<=10 ;i++){
let item = document.createElement('li');
item.appendChild(document.createTextNode('Item '+i));
item.onclick = function(e){
console.log('Item '+i+' is clicked.');
};
list.appendChild(item);
}

上述代码利用 for 循环完成了上述需求。这时候你会想这个和 let 命令有什么关系，我换成 var 岂不是也能实现。下面我们来检验一下换成 var 可行吗？

var list = document.getElementById('list');
for( var i=1;i<=10 ;i++){
let item = document.createElement('li');
item.appendChild(document.createTextNode('Item '+i));
item.onclick = function(e){
console.log('Item '+i+' is clicked.');
};
list.appendChild(item);
}

当我们点击上述代码生成的 li 标签时，会发现无论点击哪个都会打印出“Item 11 is clicked.”。下面我来解释一下为什么会出现这种情况，因为在 for 循环中的变量 i 是var定义的，在全局范围内都有效，而每个标签被点击所执行的函数内部的 i 都指的是这个全局的 i 。而使用 let 命令时，循环体的每一次执行都产生一个作用域，每次绑定点击事件时，函数都能保留当前计数器的数值和引用。

注意：
let、const 命令定义的全局变量不属于顶层对象的属性。
let a = 1;
window.a // undefined

---

2.const命令

---

基本概念

const 命令用来定义常量，一旦声明，不可改变。这也意味着声明变量的同时就需要进行初始化，不可留到以后赋值。

const Max_Age;
Max_Age = 100;
// Uncaught SyntaxError: Missing initializer in const declaration

const 命令与 let 命令一样：
1.只在声明的块级作用域有效；
2.常量不可提升，同样存在暂时性死区；
3.不可重复声明。

---

原理

变量与内存之间的关系由三部分组成：变量名、内存绑定及内存地址。const 的实现原理便是在常量名和内存地址之间创建一个不可变的绑定。在某些情况下，并非是值不可变的。对于基本类型（数值，字符串等）而言，常量指向的内存地址便保存着实际值。而对于对象、数组等引用类型，常量指向的只是一个指针，const 只能保证这个指针是不可变的，如下：

const obj = {};
obj.item = 456;
obj.item; // 输出456
obj = {}; // Uncaught TypeError: Assignment to constant variable.

冻结对象

上述说明当用 const 定义对象时，并不能保证值不可变，下面我们就介绍如何获取值不可变的对象。除了冻结对象，如果对象的属性指向的还是对象，那么这个属性也该被冻结。如下代码便可获取值不可变的对象。

const deepFreeze = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach((key,i) => {
if(typeof obj[key] === 'object')
{ deepFreeze(obj[key]);}
});
};

---

3.建议

1. 一般情况下，使用 const 命令对值进行存储；
2. 当一个值容器存储的值确认会被改变时才使用 let 进行定义；
3. 不再使用 var。