01.ES6之let和const命令

前言：

个人觉得，阮一峰的《ECMAScript6入门》非常不错，学习时把重要的知识点记下来以便以后复习。

一.let命令声明变量

 1.let声明变量，类似于var，与var不同的是，let声明的变量只在let命令所在的代码块内有效，而var声明的是全局变量。

{
    let a = 1;
    var b = 2;
    console.log(b)  // 2
    console.log(a)  // 1
}

console.log(b)  // 2
console.log(a)  // a is not defined

2.for循环中使用var和let的区别：

下边代码使用var声明i，最后返回的结果为10。原因：i是var声明的全局变量，在全局范围内有效，每次循环，变量i的值都会改变，console.log(i)里的i指向的是全局的i。即数组a的所有成员里的i指向的都是同一个i，导致运行时输出的是最后一轮i的值。

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

下边代码使用let声明i，最后返回的结果为5。原因：i是let声明的，当前的i只在本轮循环内有效，每次循环的i都是一个新的变量，所以最后的结果为5。

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

补充：for循环有一个特别之处，即设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。

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

也就是说函数内部的变量i和循环变量i不在同一个作用域，有各自单独的作用域。

3.let声明变量不存在变量提升

var声明的变量存在变量提升现象，变量可以在声明之前使用，值为undefined；而let声明的变量只能在声明之后使用，否则会报错。

4.let暂时性死区（temporal dead zone，简称TDZ）

在代码块内，使用let命令声明变量之前，该变量都是不可用的。在语法上，称为暂时性死区。

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

在函数内，有些死区比较隐蔽，如下：

造成死区的原因是参数x默认值为y，而y还没被声明，就被使用了。

function test(x=y,y=2){
    return [x,y];
}
test()  // 报错

先声明x，再使另一个参数y等于x，就不会出现死区了。

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

暂时性死区的本质就是：只要一进入当前作用域，所要使用的变量就已经存在了，但不可获取，只有等到声明变量的那行代码出现，才可以获取和使用该变量。

5.let不允许重复声明

let不允许在相同作用内重复声明同一个变量，即使是在用let声明之后，用var声明也不行。

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

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

不允许在函数内部用let重新声明参数，但可以在函数内部再有一个代码块去声明参数，不会报错。

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

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

二、块级作用域

1.为什么需要块级作用域

ES5只有全局作用域和函数作用域，没有块级作用域，会出现很多问题。

（1）变量提升之后，内层变量会覆盖外层变量

var a= 'lyf';

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

f(); // undefined

上边代码原意是if代码块外部的a使用外层的a变量，内部使用内层的a变量，但由于var变量提升，导致内层的a变量覆盖了外层的a变量，未声明就使用，返回undefined。

（2）for循环中，使用var定义i，用来计数的变量泄露为全局变量

var s = 'evenLee';

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

console.log(i); // 7

上边代码中，i只是用来控制循环的，但var声明之后，就会变为全局变量，i控制循环之后并没有消失，打印i为7（若没有泄露为全局变量，打印i会返回undefined）

2.ES6的块级作用域

（1）let为JavaScript新增了块级作用域：

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

由于if语句里的n是内层代码块，所以最后打印出来的n还是外层代码块声明的n。

但把let换成var，最后打印出的n为10：

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

（2）ES6允许块级作用域的任意嵌套，第四层无法读取第五层的内部变量

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错
}}}};

（3）内层作用域可以定义外层作用域的同名变量（同一块级作用域let不能重复定义变量）

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

（4）块级作用域与函数声明

ES5规定，函数只能在顶层作用域和函数作用域中声明，不能在块级作用域中声明；

ES6规定，块级作用域之中，函数声明语句的行为类似let，在块级作用域之外不可引用

ES6的块级作用域必须有大括号，否则不存在块级作用域；严格模式下，函数只能声明在当前作用域的顶层：

// 不报错
'use strict';
if (true) {
  function f() {}
}

// 报错
'use strict';
if (true)
  function f() {}

三、const命令声明常量

1.基本概念

const声明一个只读的常量，一旦声明，不能改变其值，否则会报错；

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

const声明的常量只在其所在的块级作用域之内有效：

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

const声明的常量也不提升，也存在暂时性死区，也不可重复声明，也是只能在声明的常量之后使用，常量声明前使用会报错：

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

2.const的本质

const保证的并不是变量的值不可改变，而是变量指向的那个内存地址所保存的数据不可改变。

对于简单数据类型来说，值就保存在变量指向的内存地址，因此等同于常量；

对于复合数据类型来说（对象和数组），变量指向的内存地址保存的只是指向实际数据的指针，

const只能保证指针固定（即总是指向另一个固定的地址），它指向的数据结构是否可变就不受控制了。

因此，将一个对象声明为常量必须小心。

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。

不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

将对象冻结，使其不能添加新属性，可以使用object.freeze()方法：

const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

补充—ES6声明变量的6种方法：

var   function  let   const   import   class

3.顶层对象的属性

顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。

ES5 之中，顶层对象的属性与全局变量是等价的：

window.a = 1;
a // 1

a = 2;
window.a // 2

上面代码中，顶层对象的属性赋值与全局变量的赋值，是同一件事。

从ES6开始，全局变量将逐步与顶层对象的属性脱钩。

var a = 1;
// 如果在 Node 的 REPL 环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
window.a // 1

let b = 1;
window.b // undefined

上面代码中，全局变量a由var命令声明，所以它是顶层对象的属性；

全局变量b由let命令声明，所以它不是顶层对象的属性，返回undefined。