ES6学习--let和const命令

1.let命令

所声明的变量命令所在代码块有效：

{
let a=10;
var  b=1;
}
a;// ReferenceError: a is not defined.
b;//1

for循环的计数器，就很适合let命令

for (let i = 0; i < arr.length; i++) {}

console.log(i);
//ReferenceError: i is not defined

使用var，最后输出10

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

变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。

如果使用let，声明的变量仅在块级作用域内有效，最后输出6

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

i是let声明的，当前i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。

不存在变量提升：

let不像var那样会发生变量提升，所以变量一定要在声明后使用。

console.log(foo); // 输出undefined
console.log(bar); // 报错ReferenceError

var foo = 2;
let bar = 2;

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

暂时性死区

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

var tmp = 123;

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

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

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
}

暂时性死区也意味着typeof不再是一个安全的操作

typeof x; // ReferenceError
let x;

如果一个变量根本没有被声明，使用typeof反而不会报错

typeof undeclared_variable // "undefined"

有些死区比较隐蔽，不太容易被发现：

function bar(x = y, y = 2) {
return [x, y];
}

bar(); // 报错

因为参数x默认值等于另一个参数y,而此时y还没有声明，属于死区。如果y的默认值是x，就不会报错，因为此时x已经声明了。

function bar(x = 2, y = x) {
return [x, y];
}
bar(); // [2, 2]

ES6规定暂时性死区和不存在变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。

不允许重复声明

let不允许在相同作用域内，重复声明同一个变量

// 报错
function () {
let a = 10;
var a = 1;
}

// 报错
function () {
let a = 10;
let a = 1;
}

因此，不能再函数内部重新声明参数

function func(arg) {
let arg; // 报错
}

function func(arg) {
{
let arg; // 不报错
}
}

块级作用域

只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

第一种场景，内层变量可能会覆盖外层变量

var tmp = new Date();

function f() {
console.log(tmp);
if (false) {
var tmp = "hello world";
}
}

f(); // undefined

函数f执行后，输出undefined，原因在于变量提升，导致内层的temp变量覆盖了外层的tmp变量。

第二种场景，用来计数的循环变量泄露为全局变量

var s = 'hello';

for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}

console.log(i); // 5

变量i用来控制循环，但是循环结束后，它没有显示，泄露成了全局变量。

ES6块级作用域

function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}

上面的两个代码块中，都声明了变量n，运行后输出5.外层代码块不受内层外码块的影响

因此可以在内层作用域和外层作用域定义同名的变量。

{{{{
let insane = 'Hello World';
{let insane = 'Hello World'}
}}}};

ES6引入了块级作用域，明确允许在块级作用域之中声明函数。

2 const命令

const声明一个只读的常量。一旦声明，常量的值就不能改变。const声明的值不能改变，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

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

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

if (true) {
console.log(MAX); // ReferenceError
const MAX = 5;
}

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

const命令只是保证变量名指向的地址不变，并不保证该地址的数据不变，所以将一个对象声明为常量必须非常小心。

const foo = {};
foo.prop = 123;

foo.prop
// 123

foo = {}; // TypeError: "foo" is read-only

参考学习的网址：

http://es6.ruanyifeng.com/#docs/destructuring