ES6 知识储备

一、变量声明

1. let所声明的变量，只在let所在的代码块内有效。

2. 不存在变量提升：所声明的变量一定要在声明后使用，否则报错。一定要先声明，再去使用。let x=x;这样是错误的。ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

3. 不允许重复声明：let不允许在相同作用域内，重复声明同一个变量。即不能在函数内部重新声明参数。

二、块级作用域

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。第一种场景，内层变量可能会覆盖外层变量。

var tmp = new Date();
function f() {
	console.log(tmp);
	if(false) {
		var tmp ='hello world';
	}
}
f(); //undefined

第二种场景，用来计数的循环变量泄露为全局变量。下面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

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

2.1 ES6 块级作用域

外层作用域无法读取内层作用域的变量。内层作用域可以定义外层作用域的同名变量。

下面的函数有两个代码块，都声明了变量n，运行后输出5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是10。

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

块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。

// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());
// 块级作用域写法
{
	let tmp = …;
	…
}

2.2 块级作用域用法

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

// 函数声明语句
{
  let a = 'secret';
  function f() {
    return a;
  }
}
// 函数表达式
{
	let a = ‘secret’;
	let f = function () {
		return a;
	};
}

ES6 的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错。

三、do 表达式

本质上，块级作用域是一个语句，将多个操作封装在一起，没有返回值。使得块级作用域可以变为表达式，也就是说可以返回值，办法就是在块级作用域之前加上do，使它变为do表达式，然后就会返回内部最后执行的表达式的值。

let x = do {
  let t = f();
  t * t + 1;
};

四、const 命令

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

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

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

五、箭头函数

1. 省略关键字function，花括号‘{}’用‘=>’代替了。这种写法更简洁了。
2. 优点，就是函数体内的this的指向始终是指向定义它所在的对象，而不会指向调用它的对象，我们知道es5中的函数是谁执行它，它就指向谁。

六、Promise 对象

拓展阅读：

• 《Vue进阶（四十五）：精解ES6 Promise 用法》

七、模块语法

1. ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

// ES6模块
import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载3个方法，其他方法不加载。这种加载称为编译时加载或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。

八、严格模式

• 变量必须声明后再使用;
• 函数的参数不能有同名属性，否则报错;
• 不能使用with语句;
• 不能对只读属性赋值，否则报错;
• 不能使用前缀0表示八进制数，否则报错;
• 不能删除不可删除的属性，否则报错;
• 不能删除变量delete prop，会报错，只能删除属性delete global[prop];
• eval不会在它的外层作用域引入变量;
• eval和arguments不能被重新赋值;
• arguments不会自动反映函数参数的变化;
• 不能使用arguments.callee;
• 不能使用arguments.caller;
• 禁止this指向全局对象;
• 不能使用fn.caller和fn.arguments获取函数调用的堆栈;
• 增加了保留字（比如protected、static和interface）;
• 尤其需要注意this的限制。ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this。

九、export 命令

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

export命令除了输出变量，还可以输出函数或类（class）。下面代码对外输出一个函数multiply。

export function multiply(x, y) {
  return x * y;
};

export输出的变量就是本来的名字，但是可以使用as关键字重命名。

function v1() { ... }
function v2() { ... }
export {
	v1 as streamV1,
	v2 as streamV2,
	v2 as streamLatestVersion
};

上面代码使用as关键字，重命名了函数v1和v2的对外接口。重命名后，v2可以用不同的名字输出两次。需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

上面三种写法都是正确的，规定了对外的接口m。其他脚本可以通过这个接口，取到值1。它们的实质是，在接口名与模块内部变量之间，建立了一一对应的关系。

function和class的输出，也必须遵守这样的写法。

另外，export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代码输出变量foo，值为bar，500毫秒之后变成baz。export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错.

十、import 命令

使用export命令定义了模块对外接口后，其他 JS 文件就可以通过import命令加载这个模块。

// main.js
import {firstName, lastName, year} from './profile';
function setName(element) {
	element.textContent = firstName + ’ ’ + lastName;
}

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。