ES6常用新特性学习1-let和const
ES6常用新特性学习1-let和const
1. 简介
在ES6以前，变量的声明都是使用var关键字，且会进行变量声明提升。另外，我们曾经讲过，JS中是没有块级作用域的，这一点也带来了很多的不便。ES6 新增了let和var两个关键字，用来声明变量。下面我们就来看看他们的用法。
2. let
我们来看下面一段代码。
function f() {
var a = 1;
}
{
var b = 2;
}
// console.log(a); // Uncaught ReferenceError: a is not defined
console.log(b); // 2当变量a在函数f内使用var声明时，在全局无法直接引用该变量。但是在全局函数内用一对花括号包裹的区域中生命的变量b，却可以在全局中直接引用。因为对于JS来讲，是没有块作用域的。这一点和JAVA等语言有着很大的不同，也带来了很多不便。举一个简单的例子：
var i = 1;
... // 一堆其他的操作
for (var i = 0;i<3;i++) {
console.log(i); // 0 1 2
}
console.log(i); // 3在for循环内部生命的变量i其实是无效的，因为在同个作用域（此处是全局作用域）已经声明过变量i。此时var i = 3；中的声明会被忽略，而只保留i =3；（这块内容可以参考我的文章JS入门难点解析3-作用域）。所以，在for循环结束以后，你满心以为会输出最开始在全局声明赋值的var i = 1;时，结果却是被循环改变的结果3。这明显不是我们希望的结果，那么js中能否也使用块级作用域呢，我们生命的变量可否只在块级作用域中生效呢？ES6给我们提供了let。看下面代码：
let i = 1;
... // 一堆其他的操作
for (let i = 0;i<3;i++) {
console.log(i); // 0 1 2
}
console.log(i); // 1将for循环中的var改成let，其声明的变量i就只在循环内生效了。是不是更加灵活方便了呢？当然，let使用时有些需要注意的地方。
2.1 不存在变量提升
var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。（可以参考我的文章 JS入门难点解析2-JS的变量提升和函数提升）这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。
为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。
// var 的情况
console.log(foo); // 2
var foo = 2;
// let 的情况
console.log(bar); // Uncaught ReferenceError: bar is not defined
let bar = 2;2.2 暂时性死区
我们之前讲到过，let没有变量提升，也就是说在let声明一个变量之前对其引用会报错。这个很好理解。但如果此时该变量在块作用域外部也被声明了呢？是否此时的引用是对外部该变量的引用呢？
看下面这段代码：
var tmp = 123;
if (true) {
tmp = 'abc'; // Uncaught ReferenceError: tmp is not defined
let tmp;
}这里，tmp = 'abc';一句会报错。也就是说，let不仅不允许其声明的变量在其声明前被引用，还不允许其引用外部的同名变量，相当地霸道。其实，ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
在代码块内，使用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
}需要注意，TDZ有时会导致代码出错。比如：
曾经安全的typeof可能不在安全：
typeof y; // 未被let锁定，输出undefined
typeof x; // 被let锁定，报ReferenceError
let x;另外，有些TDZ导致的错误会十分隐晦：
function bar(x = y, y = 2) {
return [x, y];
}
bar(); // 报错改成
function bar(x = 2, y = x) {
return [x, y];
}
bar(); // [2, 2]就okay了。还有如下情况：
// 不报错
var x = x;
// 报错
let x = x;
// ReferenceError: x is not definedES6 规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。
总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
2.3 不允许重复声明
let不允许在相同作用域内(指的是ES5中规定的作用域，不包含块级作用域)重复声明一个变量，不管是使用var还是let。
var a = 1;
let a = 2;
console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared以及
let b = 2;
var b = 1;
console.log(b); // Uncaught SyntaxError: Identifier 'b' has already been declared还有
let c = 1;
let c = 2;
console.log(c); // Uncaught SyntaxError: Identifier 'c' has already been declared另外看下边两组代码。
let a = 1;
if (true) {
var a = 2;
console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared
}let a = 1;
function f(){
var a = 2;
console.log(a); // 2
}
f();还有一点，需要注意：
考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。
3. const
const的作用很简单。const声明一个只读的常量。一旦声明，常量的值就不能改变。
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.在代码中，我们将长会将一些常量用一些有实际意义的名称去命名。比如上面代码段中的圆周率PI。
const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。对于const来说，只声明不赋值，就会报错。
const foo;
// SyntaxError: Missing initializer in const declarationconst的作用域与let命令相同：只在声明所在的块级作用域内有效，其声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
需要注意的是，const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。
如下：
const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错上面代码中，常量a是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就会报错。
如果真的想将对象冻结，应该使用Object.freeze方法。(可以参考我的文章 JS入门难点解析13-属性描述符,数据属性和访问器属性)
const foo = Object.freeze({});
// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。
var constantize = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach( (key, i) => {
if ( typeof obj[key] === 'object' ) {
constantize( obj[key] );
}
});
};