ES6 详解二： 新增内容概览

ES6 新增内容概览

相比对ES5 不痛不痒的几个改动，ES6新增了大量的内容。这里先简单罗列一下，后续会一个一个仔细解释。

打开ES6支持

chrome 已经支持了很多es6的特性，不过被关闭了，你可以在这里打开 chrome://flags/#enable-javascript-harmony。改完之后记得重启浏览器生效。

这可以查看主流浏览器和自己当前浏览器的兼容性 https://kangax.github.io/compat-table/es6/

编译ES6

有些特性即使打开了chrome的配置，依然不支持，比如 class。这个时候可以用 babel 来把 es6 的代码编译成 es5。它支持绝大部分的特性。

而且查看编译后的代码很容易理解这些特性。

地址：https://github.com/babel/grunt-babel

arrow function

可以用箭头语法来写函数了，很像 lambda 表达式，并且arrow function 会自动绑定this为当前上下文。
目前最新版的 chrome 43 竟然还是不支持，不过最新的火狐已经支持了，可以在火狐下实验。

[1,2,3,4].map(d=>d*d); //单行
//也可以写多行
[1,2,3,4].map(d=>{
    console.log(this);
    return d*d
});

class

现在原生支持 class 关键字来声明一个类了，虽然只是一个语法糖，最终还是基于原型继承实现的。但是毕竟可以很方便的实现创建和继承一个类了。

class People {
    constructor(name) {
        this.name = name;
    }

    sayName() {
        console.log(sayName);
    }
}

增强对象字面量

从上面的类定义可以看出，对象字面量语法做了增强，可以这样写了：

var people = {
      name: "Tom",
      sayName() {    //更方便定义函数
        console.log(this.name);
      },
      [ 'prop_' + (() => 42)() ]: 42    //甚至可以计算属性名
}

字符串模板

还记得在JS中痛苦的拼接html模板么，现在终于有语法支持了，并且用反引号支持多行字符串哦。

var people = {name: "Tom", age: 12};
var html = `

name: ${people.name}
age: ${people.age}
`;

destructuring

这个应该翻译成析构吗。不是很好解释，看下面的代码就很明白。简单的说，就是可以用一个对象来给一个对象的每一个属性赋值（或者数组）。

var [a,b,c]=[1,2,3];    //通过数组给多个变量赋值
var {name, age} = {name: "Tom", age:12} //通过一个对象来给多个变量赋值

//用对象来定义参数
function g({name: x}) {
    console.log(x);
}
g({name: 5})

函数默认变量和延展属性

现在可以在函数声明的时候指定一个默认值，还有react中奇怪的三个点号就是这里的延展属性

function say(name="Tom") {
    return name;
}

function a(x, ...y) {//延展属性
  console.log(x,y)
}
a(1,2,3,4);

let & const

可以通过 let 和 const 来声明块级作用于的变量（通过 var 声明的是函数级作用域）。而且 const 声明的是不可变变量。

{
    let x=1;
    console.log(x);
}
console.log(x);
const y=2;

Iterators + For..Of

Iterator 用来实现一个可以用 for 关键字遍历的对象：

let students = {
  [Symbol.iterator]() {
    let current = 1;
    return {
      next() {
        return {done: current > 100, value: current++};
        }
    }
  }
}

for(s of students) {
  console.log(s);
}
//输出 0 - 100

yield

JS终于支持大名顶顶的 yield 了，就是在一个函数内部可以返回多次 return 一个变量。如果用 yield 来实现上面的代码，应该是这样的

let students = {
  [Symbol.iterator]: function*() {
    for(var i=0;i<=100;i++) {
      yield i;
    }
  }
}

for(var s of students) {
  console.log(s);
}

unicode

原生支持 unicode，暂时不是很了解这个。

modules

这个必须有！对模块的语法级支持。

export function sum(x, y) {
  return x + y;
}

import sum from "math"
sum(1,2);

Map + Set + WeakMap + WeakSet

map 和 set 是一种数据结构，没什么好讲的。 WeakMap 和 WeakSet 用来防止内存泄露，后面有详细讲解。

#map
var m = new Map();
m.set("a", 1);
m.get("a")

#set
var s = new Set();
s.add("a");
s.add("b");
s.add("a"); //不变，因为 a 已经存在了

proxy

这里的proxy和 jQuery.proxy 可是两码事，不是用来绑定this的。它和 java 的annotation，python 的 decorator 类似。就是它可以代理一个对象的所有行为，比如你取一个对象的属性，正常是直接取，但是加了 proxy之后，“取”的这个操作会先传个proxy，他来决定到底怎么取。

var target = {};
var handler = {
    get: function (receiver, name) {
        return `Hello, ${name}!`;
    }
};

var p = new Proxy(target, handler);
p.world === 'Hello, world!';

当然他不止可以代理 get，还有 set, has 等一堆操作可以被代理。

Symbol

Sybmol 用来创建唯一不可变字符串，后面有详细讲解。

继承内置类

现在内置的 Array, Date 和 Element 都可以被继承了

新增的 Math + Number + String + Array + Object APIs

这些是以前就有的类型，不过这次增加了一大推新的API：

"abcd".include("bc");

promise

大家很熟悉的 promise, 现在原生支持了.

反射

估计类似java的反射，可以通过反射机制去操作运行时的对象。

尾递归调用优化

如果不知道什么是尾递归，可以参考这里 http://www.zhihu.com/question/20761771

ES6规定了解释器必须对尾递归进行优化，无论你的尾递归有多少次调用再也不会造成栈溢出了。

function factorial(n, acc = 1) {
    'use strict';
    if (n <= 1) return acc;
    return factorial(n - 1, n * acc);
}

factorial(100000)

上面这个是计算阶乘的，现在在任何浏览器中运行都会造成栈溢出。

后面针对几个重点逐个解析。

这里主要参考这篇文章:
- https://github.com/lukehoban/es6features