一、ES5/ES6和babel
ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化，现在的浏览器已经相当于完全实现了这个标准。
ECMAScript6，即ES6，也称ES2015，是ECMAScript的第六次修订，于2015年完成，并且运用的范围逐渐开始扩大，因为其相对于ES5更加简洁，提高了开发速率，开发者也都在陆续进行使用，但是由于ES6还存在一些支持的问题，所以一般即使是使用ES6开发的工程，也需要使用Babel进行转换。
Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这一过程叫做“源码到源码”编译， 也被称为转换编译。
一般来说Babel作为依赖包被引入ES6工程中，此处不再介绍以cli方式使用的ES6，如果你需要以编程的方式来使用 Babel，可以使用 babel-core 这个包。babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js。babel的使用过程如下：
1. 首先安装 babel-core。
$ npm install babel-corevar babel = require("babel-core");字符串形式的 JavaScript 代码可以直接使用 babel.transform 来编译。
-
babel.transform(
"code();", options);
-
// => { code, map, ast }
-
babel.transformFile(
"filename.js", options,
function(err, result) {
-
result;
// => { code, map, ast }
-
});
-
babel.transformFileSync(
"filename.js", options);
-
// => { code, map, ast }
1. 添加依赖
在Node.js工程package.json包中添加如下依赖：
-
"devDependencies": {
-
"babel-cli": "^6.26.0",
-
"babel-eslint": "^8.0.1",
-
"babel-plugin-transform-flow-strip-types": "^6.22.0",
-
"babel-preset-es2015": "^6.24.1",
-
"babel-register": "^6.26.0",
-
...
-
}
-
"scripts": {
-
"serve-dev": "NODE_ENV=development nodemon ./src/index.js --exec babel-node",
-
},
二、let, const
这两个的用途与var类似，都是用来声明变量的，但在实际运用中他俩都有各自的特殊用途。首先来看下面这个例子：
-
var name =
'zach'
-
-
while (
true) {
-
var name =
'obama'
-
console.log(name)
//obama
-
break
-
}
-
-
console.log(name)
//obama
-
let name =
'zach'
-
-
while (
true) {
-
let name =
'obama'
-
console.log(name)
//obama
-
break
-
}
-
-
console.log(name)
//zach
-
var a = [];
-
for (
var i =
0; i <
10; i++) {
-
a[i] =
function () {
-
console.log(i);
-
};
-
}
-
a[
6]();
// 10
-
var a = [];
-
for (
let i =
0; i <
10; i++) {
-
a[i] =
function () {
-
console.log(i);
-
};
-
}
-
a[
6]();
// 6
-
const PI =
Math.PI
-
-
PI =
23
//Module build failed: SyntaxError: /es6/app.js: "PI" is read-only
三、解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
-
let [a, b, c] = [
1,
2,
3];
-
let [foo, [[bar], baz]] = [
1, [[
2],
3]];
-
foo
// 1
-
bar
// 2
-
baz
// 3
-
let [ , , third] = [
"foo",
"bar",
"baz"];
-
third
// "baz"
-
let [head, ...tail] = [
1,
2,
3,
4];
-
head
// 1
-
tail
// [2, 3, 4]
-
let [x, y, ...z] = [
'a'];
-
x
// "a"
-
y
// undefined
-
z
// []
-
let [x, y] = [
1,
2,
3];
-
x
// 1
-
y
// 2
-
-
let [a, [b], d] = [
1, [
2,
3],
4];
-
a
// 1
-
b
// 2
-
d
// 4
-
let [x =
1] = [
undefined];
-
x
// 1
-
-
let [x =
1] = [
null];
-
x
// null
-
let {
foo: baz } = {
foo:
'aaa',
bar:
'bbb' };
-
baz
// "aaa"
-
-
let obj = {
first:
'hello',
last:
'world' };
-
let {
first: f,
last: l } = obj;
-
f
// 'hello'
-
l
// 'world'
-
-
let arr = [
1,
2,
3];
-
let {
0 : first, [arr.length -
1] : last} = arr;
//属性名表达式
-
first
// 1
-
last
// 3
-
-
function add([x, y]){
-
return x + y;
-
}
-
-
add([
1,
2]);
// 3 //函数入参也可进行解构
-
-
// 返回一个数组
-
-
function example() {
-
return [
1,
2,
3];
-
}
-
let [a, b, c] = example();
-
-
let jsonData = {
-
id:
42,
-
status:
"OK",
-
data: [
867,
5309]
-
};
-
-
let { id, status,
data: number } = jsonData;
-
-
// 获取键名
-
for (
let [key]
of map) {
-
// ...
-
}
-
-
// 获取键值
-
for (
let [,value]
of map) {
-
// ...
-
}
如下两种函数的定义方法在解构赋值时具备不同的返回值：
-
function m1({x = 0, y = 0} = {}) {
-
return [x, y];
-
}
-
-
// 写法二
-
function m2({x, y} = { x: 0, y: 0 }) {
-
return [x, y];
-
}
-
// x 有值，y 无值的情况
-
m1({
x:
3})
// [3, 0]
-
m2({
x:
3})
// [3, undefined]
-
-
// x 和 y 都无值的情况
-
m1({})
// [0, 0];
-
m2({})
// [undefined, undefined]
-
-
m1({
z:
3})
// [0, 0]
-
m2({
z:
3})
// [undefined, undefined]
四、模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
-
// 普通字符串
-
`In JavaScript '\n' is a line-feed.`
-
-
// 多行字符串
-
`In JavaScript this is
-
not legal.`
-
-
console.log(
`string text line 1
-
string text line 2`);
-
-
// 字符串中嵌入变量
-
let name =
"Bob", time =
"today";
-
`Hello ${name}, how are you ${time}?`
let greeting = `\`Yo\` World!`;标签模板
模板字符串它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。
-
let a =
5;
-
let b =
10;
-
-
tag
`Hello ${ a + b } world ${ a * b }`;
-
// 等同于
-
tag([
'Hello ',
' world ',
''],
15,
50);
-
function tag(stringArr, value1, value2){
-
// ...
-
}
-
// 等同于
-
function tag(stringArr, ...values){
-
// ...
-
}
tag(['Hello ', ' world ', ''], 15, 50)五、rest参数
ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
-
// arguments变量的写法
-
function sortNumbers() {
-
return
Array.prototype.slice.call(
arguments).sort();
-
}
-
-
// rest参数的写法
-
const sortNumbers =
(...numbers) => numbers.sort();
扩展运算符
rest函数的实现也是基于扩展运算符，扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
-
console.log(
1, ...[
2,
3,
4],
5)
-
// 1 2 3 4 5
-
const a1 = [
1,
2];
-
// 写法一
-
const a2 = [...a1];
-
// 写法二
-
const [...a2] = a1;
-
// ES5
-
[
1,
2].concat(more)
-
// ES6
-
[
1,
2, ...more]
-
-
var arr1 = [
'a',
'b'];
-
var arr2 = [
'c'];
-
var arr3 = [
'd',
'e'];
-
-
// ES5的合并数组
-
arr1.concat(arr2, arr3);
-
// [ 'a', 'b', 'c', 'd', 'e' ]
-
-
// ES6的合并数组
-
[...arr1, ...arr2, ...arr3]
-
// [ 'a', 'b', 'c', 'd', 'e' ]
六、箭头函数
ES6 允许使用“箭头”（=>）定义函数。
-
var f = v => v;
-
//上面的箭头函数等同于：
-
var f = function(v) {
-
return v;
-
};
-
var f =
() =>
5;
-
// 等同于
-
var f =
function () {
return
5 };
-
// 报错
-
let getTempItem =
id => {
id: id,
name:
"Temp" };
-
-
// 不报错
-
let getTempItem =
id => ({
id: id,
name:
"Temp" });
-
const full =
({ first, last }) => first +
' ' + last;
-
// 等同于
-
function full(person) {
-
return person.first +
' ' + person.last;
-
}
-
// 正常函数写法
-
[
1,
2,
3].map(
function (x) {
-
return x * x;
-
});
-
-
// 箭头函数写法
-
[
1,
2,
3].map(
x => x * x);
（1）函数体内的 this对象 ，就是定义时所在的对象，而 不是使用时所在的对象 。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用 arguments对象 ，该对象在函数体内不存在。如果要用，可以用 rest 参数 代替。
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。
-
function foo() {
-
setTimeout(
() => {
-
console.log(
'id:',
this.id);
-
},
100);
-
}
-
-
var id =
21;
-
-
foo.call({
id:
42 });
七、ES6对象
ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。
-
const foo =
'bar';
-
const baz = {foo};
-
baz
// {foo: "bar"}
ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。下面是另一个例子。
-
function f(x, y) {
-
return {x, y};
-
}
-
-
// 等同于
-
-
function f(x, y) {
-
return {
x: x,
y: y};
-
}
-
-
f(
1,
2)
// Object {x: 1, y: 2}
-
const person = {
-
sayName() {
-
console.log(
'hello!');
-
},
-
};
-
-
person.sayName.name
// "sayName"
-
class Animal {
-
constructor(){
-
this.type =
'animal'
-
}
-
says(say){
-
console.log(
this.type +
' says ' + say)
-
}
-
}
-
-
let animal =
new Animal()
-
animal.says(
'hello')
//animal says hello
-
-
class Cat extends Animal {
-
constructor(){
-
super()
-
this.type =
'cat'
-
}
-
}
-
-
let cat =
new Cat()
-
cat.says(
'hello')
//cat says hello
Class之间可以通过 extends 关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。
super关键字，它指代 父类的实例 （即 父类的this对象 ）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
ES6的继承机制，实质是 先创造父类的实例对象this （所以必须先调用super方法），然后再 用子类的构造函数修改this 。
八、遍历方法
ES6 一共有 5 种方法可以遍历对象的属性。（1）for...in
for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。
（2）Object.keys(obj)
Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。
（3）Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。
（4）Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。
（5）Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。
以上的 5 种方法遍历对象的键名，都遵守同样的属性遍历的次序规则。
- 首先遍历所有数值键，按照数值升序排列。
- 其次遍历所有字符串键，按照加入时间升序排列。
- 最后遍历所有 Symbol 键，按照加入时间升序排列。
九、Symbol
ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。
Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。
-
let s1 =
Symbol(
'foo');
-
let s2 =
Symbol(
'bar');
-
-
s1
// Symbol(foo)
-
s2
// Symbol(bar)
-
-
s1.toString()
// "Symbol(foo)"
-
s2.toString()
// "Symbol(bar)"
-
let mySymbol =
Symbol();
-
-
// 第一种写法
-
let a = {};
-
a[mySymbol] =
'Hello!';
-
-
// 第二种写法
-
let a = {
-
[mySymbol]:
'Hello!'
-
};
-
-
// 第三种写法
-
let a = {};
-
Object.defineProperty(a, mySymbol, {
value:
'Hello!' });
-
-
// 以上写法都得到同样结果
-
a[mySymbol]
// "Hello!"
-
const obj = {};
-
let a =
Symbol(
'a');
-
let b =
Symbol(
'b');
-
-
obj[a] =
'Hello';
-
obj[b] =
'World';
-
-
const objectSymbols =
Object.getOwnPropertySymbols(obj);
-
-
objectSymbols
-
// [Symbol(a), Symbol(b)]
-
// mod.js
-
const FOO_KEY =
Symbol.for(
'foo');
-
-
function A() {
-
this.foo =
'hello';
-
}
-
-
if (!global[FOO_KEY]) {
-
global[FOO_KEY] =
new A();
-
}
-
-
module.exports = global[FOO_KEY];
十、Set和Map
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。
-
const s =
new
Set();
-
-
[
2,
3,
5,
4,
5,
2,
2].forEach(
x => s.add(x));
-
-
for (
let i
of s) {
-
console.log(i);
-
}
-
// 2 3 5 4
-
// 例一
-
const set =
new
Set([
1,
2,
3,
4,
4]);
-
[...set]
-
// [1, 2, 3, 4]
-
-
// 例二
-
const items =
new
Set([
1,
2,
3,
4,
5,
5,
5,
5]);
-
items.size
// 5
keys方法、values方法、entries方法返回的都是遍历器对象，由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。
ES6 提供了 Map 数据结构 。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“ 字符串—值 ”的对应，Map 结构提供了“ 值—值 ”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
-
const map =
new
Map([
-
[
'name',
'张三'],
-
[
'title',
'Author']
-
]);
-
-
map.size
// 2
-
map.has(
'name')
// true
-
map.get(
'name')
// "张三"
-
map.has(
'title')
// true
-
map.get(
'title')
// "Author"
（1）Map 转为数组
前面已经提过，Map 转为数组最方便的方法，就是使用 扩展运算符（...） 。
-
const myMap =
new
Map()
-
.set(
true,
7)
-
.set({
foo:
3}, [
'abc']);
-
[...myMap]
-
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
将数组传入 Map 构造函数，就可以转为 Map。
-
new
Map([
-
[
true,
7],
-
[{
foo:
3}, [
'abc']]
-
])
-
// Map {
-
// true => 7,
-
// Object {foo: 3} => ['abc']
-
// }
如果所有 Map 的键都是字符串，它可以转为对象。
-
function strMapToObj(strMap) {
-
let obj =
Object.create(
null);
-
for (
let [k,v]
of strMap) {
-
obj[k] = v;
-
}
-
return obj;
-
}
-
-
const myMap =
new
Map()
-
.set(
'yes',
true)
-
.set(
'no',
false);
-
strMapToObj(myMap)
-
// { yes: true, no: false }
-
function objToStrMap(obj) {
-
let strMap =
new
Map();
-
for (
let k
of
Object.keys(obj)) {
-
strMap.set(k, obj[k]);
-
}
-
return strMap;
-
}
-
-
objToStrMap({
yes:
true,
no:
false})
-
// Map {"yes" => true, "no" => false}
Map 转为 JSON 要区分两种情况。一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。
-
function strMapToJson(strMap) {
-
return
JSON.stringify(strMapToObj(strMap));
-
}
-
-
let myMap =
new
Map().set(
'yes',
true).set(
'no',
false);
-
strMapToJson(myMap)
-
// '{"yes":true,"no":false}'
-
function mapToArrayJson(map) {
-
return
JSON.stringify([...map]);
-
}
-
-
let myMap =
new
Map().set(
true,
7).set({
foo:
3}, [
'abc']);
-
mapToArrayJson(myMap)
-
// '[[true,7],[{"foo":3},["abc"]]]'
JSON 转为 Map，正常情况下，所有键名都是字符串。
-
function jsonToStrMap(jsonStr) {
-
return objToStrMap(
JSON.parse(jsonStr));
-
}
-
-
jsonToStrMap(
'{"yes": true, "no": false}')
-
// Map {'yes' => true, 'no' => false}
十一、模块（module）体系
ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
-
// ES6模块
-
import { stat, exists, readFile }
from
'fs';
由于 ES6 模块是编译时加载，使得 静态分析 成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。
除了静态加载带来的各种好处，ES6 模块还有以下好处。
- 不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。
- 将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性。
- 不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供。
- 变量必须声明后再使用
- 函数的参数不能有同名属性，否则报错
- 不能使用with语句
- 不能对只读属性赋值，否则报错
- 不能使用前缀 0 表示八进制数，否则报错
- 不能删除不可删除的属性，否则报错
- 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
- eval不会在它的外层作用域引入变量
- eval和arguments不能被重新赋值
- arguments不会自动反映函数参数的变化
- 不能使用arguments.callee
- 不能使用arguments.caller
- 禁止this指向全局对象
- 不能使用fn.caller和fn.arguments获取函数调用的堆栈
- 增加了保留字（比如protected、static和interface）
模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。
-
// profile.js
-
export
var firstName =
'Michael';
-
export
var lastName =
'Jackson';
-
export
var year =
1958;
-
// profile.js
-
var firstName =
'Michael';
-
var lastName =
'Jackson';
-
var year =
1958;
-
-
export {firstName, lastName, year};
-
function v1() { ... }
-
function v2() { ... }
-
-
export {
-
v1
as streamV1,
-
v2
as streamV2,
-
v2
as streamLatestVersion
-
};
export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的import命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。
-
// 报错
-
var m =
1;
-
export m;
-
-
// 写法一
-
export
var m =
1;
-
-
// 写法二
-
var m =
1;
-
export {m};
import 命令
使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
-
// main.js
-
import {firstName, lastName, year}
from
'./profile.js';
-
-
function setName(element) {
-
element.textContent = firstName +
' ' + lastName;
-
}
import { lastName as surname } from './profile.js';export default 命令
使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。
-
// export-default.js
-
export
default
function () {
-
console.log(
'foo');
-
}
-
// import-default.js
-
import customName
from
'./export-default';
-
customName();
// 'foo'
export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。
export 与 import 的复合写法
如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。
-
export { foo, bar }
from
'my_module';
-
-
// 等同于
-
import { foo, bar }
from
'my_module';
-
export { foo, bar };
import和require的区别
引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。也就是说，import和export命令只能在模块的顶层，不能在代码块之中（比如，在if代码块之中，或在函数之中）。这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载就不可能实现。如果import命令要取代 Node 的require方法，这就形成了一个障碍。因为require是运行时加载模块，import命令无法取代require的动态加载功能。
-
const path =
'./' + fileName;
-
const myModual =
require(path);
import()加载模块成功以后，这个模块会作为一个对象， 当作then方法的参数 。因此，可以使用对象解构赋值的语法，获取输出接口。
-
import(
'./myModule.js')
-
.then(
({export1, export2}) => {
-
// ...·
-
});
如上就是ES6中比较容易识别出的关键点，实际上在两天半的ES6使用中也确实见到了如上的用法，感谢阮一峰老师的博客，先总结到这里，留待后补?