es2015也称为ES6，是JavaScript语言的下一代标准，下面将分享如何一步步解开它的面纱，哟没有一种幸福感O(∩_∩)O哈哈~
目录
1. 简介
ECMAScript6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年6月批准通过发布的，所以又称ECMAScript 2015, 是自从2009年ES5标准化后的第一次重大更新。。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。
2. 为什么要了解es6
随着越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6，但为了看懂别人的你也该懂点ES6的语法了...如：
var sum=0;
[2.3,2,2].map(function(elem){
sum+=elem;
});
console.log('sum='+sum);
注：Angular.js、react.js、vue.js都是以es6为标准的，koa框架（node的mvc）致力于全栈开发也全部兼容
3. ES-Checker
ES-Checker用来检查各种运行环境对ES6 的支持情况
$ npm install -g es-checker
$ es-checker
4. Babel
Babel是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。
Babel的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。
在线转换：http://babeljs.io/
工具：
Ø bable-loader
安装bable-loader
$npm install bable-loader –g
安装转换规则
$npm install bable-preset-es2015 –save-dev
Ø babel-cli工具，用于命令行转码；
$ npm install --g babel-cli
# 转码结果输出到标准输出
$ babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 参数生成source map文件
$ babel src -d lib -s
Ø babel-node：babel-cli工具自带一个命令，提供一个支持ES6的REPL环境。它支持Node的REPL环境的所有功能，而且可以直接运行ES6代码；
Ø babel-register：该模块改写require命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用Babel进行转码；
Ø babel-core：如果某些代码需要调用 Babel 的 API 进行转码，就要使用该模块；
Ø babel-polyfill：Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API
5. 开发工具
5.1. Sublime Text
1) 下载压缩包地址：https://github.com/tanepiper/SublimeText-Nodejs
2) 解压zip文件，并重命名文件夹“Nodejs”
3) 打开sublime，操作"preference"-->"Browse packages", 把Nodejs复制到该目录
4) 打开Nodejs文件夹，找到文件“Nodejs.sublime-build”，要更改encoding为GB2312或者utf8否则终端显示乱码
5) 要用sublime打开文件“Nodejs.sublime-settings”并修改
"node_command":"D:\Program\nodejs\node.exe",
"npm_command":"D:\Program\nodejs\npm.cmd",
6) 重启sublime
新建一个test.js文件,按 Ctrl + B 或者F7运行
5.2. WebStorm
绝对是前端开发大型应用的利器之一，后续介绍
6. es6新语法
6.1. Let/const和块级作用域
在ES2015的新语法中，影响速度最为直接范围最大的，恐怕就是 let 和 const 了，它们是继var 之后，新的变量定义方法。与 let 相比，const 更容易被理解：const 也就是 constant 的缩写，跟 C/C++ 等经典语言一样，用于定义常量，即不可变量。但由于在ES6之前的 ECMAScript 标准中，并没有原生的实现，所以在降级编译中，会马上进行引用检查，然后使用 var 代替。
// foo.js
const foo ='bar'
foo ='newvalue'
$ babel foo.js
...
SyntaxError: test.js: Line 3:"foo" is read-only
1|const foo ='bar'
2|
>3| foo ='newvalue'
...
块级作用域
在ES6诞生之前，给JavaScript 新手解答困惑时，经常会提到一个观点：JavaScript 没有块级作用域。这个问题之所以为人所熟知，是因为它引发了诸如历遍监听事件需要使用闭包解决等问题。
<button>一</button>
<button>二</button>
<button>三</button>
<button>四</button>
<div id="output"></div>
<script>
var buttons =document.querySelectorAll('button')
var output =document.querySelector('#output')
for(var i =0; i < buttons.length; i++){
buttons[i].addEventListener('click',function(){
output.innerText = buttons[i].innerText
})
}
</script>
运行时就会报出这样的错误信息：
Uncaught TypeError: Cannot readproperty 'innerText' of undefined
出现这个错误的原因是因为buttons[i]不存在，即为undefined。对i的变量引用(Reference)一直保持在上一层作用域（循环语句所在层）上，而当循环结束i 则正好是 buttons.length。而在ES6中，我们只需做出一个小小的改动，便可以解决该问题（假设所使用的浏览器已经支持所需要的特性）：
// ...
for(/* var */ let i =0; i < buttons.length; i++){
// ...
}
// ...
改进后的代码经过 babel 的编译后的代码：
// ...
var _loop =function(i){
buttons[i].addEventListener('click',function(){
output.innerText = buttons[i].innerText
})
}
for(var i =0; i < buttons.length; i++){
_loop(i)
}
// ...
6.2. 箭头函数
继let和const之后，箭头函数就是使用率最高的新特性。顾名思义便是使用箭头(=>)进行定义的函数，属于匿名函数（Lambda）一类。当然了，也可以作为定义式函数使用，但我们并不推荐这样做，随后会详细解释。
使用（用法）
foo => foo +' world'//means return`foo + ' world'`
(foo, bar)=> foo + bar
foo =>{
return foo +' world'
}
(foo, bar)=>{
return foo + bar
}
其最大的好处便是简洁明了，省略了function关键字，而使用=>代替。
let names =['Will','Jack','Peter','Steve','John','Hugo','Mike']
let newSet = names
.map((name, index)=>{
return{
id: index,
name: name
}
})
.filter(man => man.id %2==0)
.map(man =>[man.name])
.reduce((a, b)=> a.concat(b))
console.log(newSet)//=> [ 'Will','Peter', 'John', 'Mike' ]
箭头函数与上下文绑定
参考CoffeeScript 中的定义一般，是用于对函数内部的上下文 （this）绑定为定义函数所在的作用域的上下文。
let obj ={
hello:'world',
foo(){
let bar =()=>{
returnthis.hello
}
return bar
}
}
window.hello ='ES6'
window.bar = obj.foo()
window.bar()//=> 'world'
上面代码中的 obj.foo 等价于：
// ...
foo(){
let bar =(function(){
returnthis.hello
}).bind(this)
return bar
}
// ...
注意事项
另外，要注意的是箭头函数对上下文的绑定是强制性的，无法通过 apply 或 call 方法改变其上下文。
let a ={
init(){
this.bar =()=>this.dam
},
dam:'hei',
foo(){
returnthis.dam
}
}
let b ={
dam:'ha'
}
a.init()
console.log(a.foo())//=> hei
console.log(a.foo.bind(b).call(a))//=> ha
console.log(a.bar.call(b))//=> hei
另外，因为箭头函数会绑定上下文的特性，故不能随意在顶层作用域使用箭头函数，以防出错：
// 假设当前运行环境为浏览器，故顶层作上下文为 `window`
let obj ={
msg:'pong',
ping:()=>{
returnthis.msg // Warning!
}
}
obj.ping()//=> undefined
let msg ='bang!'
obj.ping()//=> bang!
// 等价于：
let obj ={
// ...
ping:(function(){
returnthis.msg // Warning!
}).bind(this)
}
// 同样等价于
let obj ={/* ... */}
obj.ping =(function(){
returnthis.msg
}).bind(this/* this -> window */)
6.3. 模板字符串
模板字符串模板出现简直对 Node.js 应用的开发和发展起到了相当大的推动作用。模板字符串要求使用 ` 代替原本的单/双引号来包裹字符串内容。它有两大特点：
l 支持变量注入
let name ='Will Wen Gunn'
let title ='Founder'
let company ='LikMoon Creation'
let greet =`Hi, I'm ${name}, I am the${title} at ${company}`
console.log(greet)//=> Hi, I'm Will Wen Gunn, I am theFounder at LikMoon Creation
l 支持换行
let sql =`
SELECT * FROM Users
WHERE FirstName='Mike'
LIMIT 5;
`
console.log(sql)
6.4. 对象字面量拓展语法
对象字面量的语法在 ES2015 之前早已挺完善的了。不过，对于聪明的工程师们来说，细微的改变，也能带来不少的价值。
方法属性省略function
let obj ={
// before
foo:function(){
return'foo'
},
// after
bar(){
return'bar'
}
}
支持 __proto__ 注入
在 ES2015 中，我们可以给一个对象硬生生的赋予其 __proto__，这样它就可以成为这个值所属类的一个实例了。
class Foo {
constructor(){
this.pingMsg ='pong'
}
ping(){
console.log(this.pingMsg)
}
}
let o ={
__proto__:new Foo()
}
o.ping()//=> pong
有什么卵用？有一个比较特殊的场景会需要用到：我想扩展或者覆盖一个类的方法，并生成一个实例，但觉得另外定义一个类就感觉浪费了。那我可以这样做：
let o ={
__proto__:new Foo(),
constructor(){
this.pingMsg ='alive'
},
msg:'bang',
yell(){
console.log(this.msg)
}
}
o.yell()//=> bang
o.ping()//=> alive
同名方法属性省略语法
也是看上去有点鸡肋的新特性，不过在做 JavaScript 模块化工程的时候则有了用武之地。
// module.js
exportdefault{
someMethod
}
function someMethod(){
// ...
}
// app.js
import Module from'./module'
Module.someMethod()
可以动态计算的属性名称
在上面的两个[...] 中，我演示了动态计算的对象属性名称的使用，分别为对应的对象定义了当前计数器n和n的2次方
let arr =[1,2,3]
let outArr = arr.map(n =>{
return{
[ n ]: n,
[`${n}^2`]:Math.pow(n,2)
}
})
console.dir(outArr)//=> [{ '1': 1, '1^2': 1 },{ '2': 2, '2^2': 4 },{'3': 3, '3^2': 9 }]
6.5. 变量解构赋值
ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
数组
let a =1;
let b =2;
let c =3;
//现在可以这样
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[x,, y]=[1,2,3];
x // 1
y // 3
let[head,...tail]=[1,2,3,4];
head // 1
tail // [2, 3, 4]
let[x, y,...z]=['a'];
x // "a"
y // undefined
z // []
如果解构不成功，变量的值就等于undefined。
// Matching with object
function search(query){
// ...
// let users = [ ... ]
// let posts = [ ... ]
// ...
return{
users: users,
posts: posts
}
}
let{ users, posts }= search('iwillwen')
// Matching with array
let[ x, y ]=[1,2]
// missing one
[ x,,y ]=[1,2,3]
function g({name: x}){
console.log(x)
}
g({name:5})
// Fail-soft destructuring
var[a]=[]
a ===undefined//=> true
// Fail-soft destructuring with defaults
var[a =1]=[]
a ===1//=> true
默认值
let[foo =true]=[];
foo // true
对象
let{ foo, bar }={ foo:"aaa", bar:"bbb"};
foo // "aaa"
bar // "bbb"
let{ baz }={ foo:"aaa", bar:"bbb"};
baz // undefined
//数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名
字符串
const[a, b, c, d, e]='hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
数值和布尔值
let{toString: s}=123;
s ===Number.prototype.toString// true
let{toString: s}=true;
s === Boolean.prototype.toString// true
函数参数的解构
function add([x, y]){
return x + y;
}
add([1,2]);// 3
6.6. 函数参数表达/传参
默认参数值
function noop(){returnfalse}
function readLineInFile(filename, callback = noop, complete = noop){
}
后续参数
我们知道函数的 call 和 apply 在使用上的最大差异便是一个在首参数后传入各个参数，一个是在首参数后传入一个包含所有参数的数组。如果我们在实现某些函数或方法时，也希望实现像 call 一样的使用方法，在 ES2015 之前，我们可能需要这样做：
function fetchSomethings(){
var args =[].slice.apply(arguments)
// ...
}
function fetchSomethings(...args){
// ...
}
要注意的是，...args 后不可再添加
虽然从语言角度看，arguments 和 ...args 是可以同时使用，但有一个特殊情况则不可：arguments 在箭头函数中，会跟随上下文绑定到上层，所以在不确定上下文绑定结果的情况下，尽可能不要再箭头函数中再使用 arguments，而使用 ...args。虽然 ECMA 委员会和各类编译器都无强制性要求用 ...args 代替 arguments，但从实践经验看来，...args 确实可以在绝大部份场景下可以代替 arguments 使用，除非你有很特殊的场景需要使用到 arguments.callee 和 arguments.caller。所以我推荐都使用 ...args 而非 arguments。
PS：在严格模式（Strict Mode）中，arguments.callee 和 arguments.caller 是被禁止使用的。
注意事项
默认参数值和后续参数需要遵循顺序原则，否则会出错。
function(...args, last =1){
// This will go wrong
}
6.7. Set/WeakSet/Map/WeakMap
在介绍新的数据结构之前，我们先复习一下在 ES2015 之前，JavaScript 中有哪些基本的数据结构。其中又分为值类型和引用类型，Array 其实是 Object 的一种子类。
l String 字符串
l Number 数字（包含整型和浮点型）
l Boolean 布尔值
l Object 对象
l Array 数组
Set和WeakSet
我们再来复习下高中数学吧，集不能包含相同的元素，我们有很多需要用到集的场景，如搜索、索引建立等。ECMA 委员会为 ECMAScript 增添了集(Set)和“弱”集(WeakSet)。它们都具有元素唯一性，若添加了已存在的元素，会被自动忽略。
let s =new Set()
s.add('hello').add('world').add('hello')
console.log(s.size)//=> 2
console.log(s.has('hello'))//=> true
WeakSet 在 JavaScript 底层作出调整（在非降级兼容的情况下），检查元素的变量引用情况。如果元素的引用已被全部解除，则该元素就会被删除，以节省内存空间。这意味著无法直接加入数字或者字符串。另外 WeakSet 对元素有严格要求，必须是 Object，当然了，你也可以用 new String('...') 等形式处理元素。
let weaks =new WeakSet()
weaks.add("hello")//=> Error
weaks.add(3.1415)//=> Error
let foo =newString("bar")
let pi =newNumber(3.1415)
weaks.add(foo)
weaks.add(pi)
weaks.has(foo)//=> true
foo =null
weaks.has(foo)//=> false
Map和WeakMap
从数据结构的角度来说，映射Map跟原本的Object非常相似，都是Key/Value的键值对结构。但是 Object 有一个让人非常不爽的限制：key 必须是字符串或数字，而Map则解决了这一问题。
let map =new Map()
let object ={ id:1}
map.set(object,'hello')
map.set('hello','world')
map.has(object)//=> true
map.get(object)//=> hello
而 WeakMap 和 WeakSet 很类似，只不过 WeakMap 的键和值都会检查变量引用，只要其一的引用全被解除，该键值对就会被删除。
let weakm =new WeakMap()
let keyObject ={ id:1}
let valObject ={ score:100}
weakm.set(keyObject, valObject)
weakm.get(keyObject)//=> { score:100 }
keyObject =null
weakm.has(keyObject)//=> false
6.8. Class
类，作为自 JavaScript 诞生以来最大的痛点之一，终于在 ES2015 中得到了官方的妥协，“实现”了 ECMAScript 中的标准类机制。为什么是带有双引号的呢？因为我们不难发现这样一个现象：
$ node
> class Foo {}
[Function: Foo]
回想一下在 ES2015 以前的时代中，我们是怎么在 JavaScript 中实现类的？
function Foo(){}
var foo = new Foo()
ES6 中的类只是一种语法糖，用于定义原型(Prototype)的。
定义
ES2015 所带来的类语法确实与很多C语言家族的语法相似，与JavaScript中的对象字面量不一样的是，类的属性后不能加逗号，而对象字面量则必须要加逗号。
class Person {
constructor(name, gender, age){
this.name = name
this.gender = gender
this.age = age
}
isAdult(){
returnthis.age >=18
}
}
let me =new Person('iwillwen','man',19)
console.log(me.isAdult())//=> true
继承
ES2015的类继承总算是为JavaScript类继承之争抛下了一根定海神针
class Animal {
yell(){
console.log('yell')
}
}
class Person extends Animal {
constructor(name, gender, age){
super()// must call `super` before using `this` if this class has a superclass
this.name = name
this.gender = gender
this.age = age
}
isAdult(){
returnthis.age >=18
}
}
class Man extends Person {
constructor(name, age){
super(name,'man', age)
}
}
let me =new Man('iwillwen',19)
console.log(me.isAdult())//=> true
me.yell()
静态方法
class Man {
// ...
static isMan(obj){
return obj instanceof Man
}
}
let me =new Man()
console.log(Man.isMan(me))//=> true
遗憾的是，ES2015 的类并不能直接地定义静态成员变量，但若必须实现此类需求，可以用static 加上 get 语句和 set 语句实现。
class SyncObject {
// ...
static get baseUrl(){
return'http://example.com/api/sync'
}
}
遗憾与期望
就目前来说，ES2015 的类机制依然很鸡肋：
不支持私有属性（private）
不支持前置属性定义，但可用 get 语句和 set 语句实现
不支持多重继承
没有类似于协议（Protocl）或接口（Interface）等的概念
中肯地说，ES2015的类机制依然有待加强。但总的来说，是值得尝试和讨论的，我们可以像从前一样，不断尝试新的方法，促进 ECMAScript 标准的发展。
6.9. Generator
对于一个纯前端的 JavaScript 工程师来说，可能 Generator 并没有什么卵用，但若你曾使用过 Node.js 或者你的前端工程中有大量的异步操作（ES6提供的一种异步编程解决方案），Generator 简直是你的“贤者之石”。
来龙
Generator 的设计初衷是为了提供一种能够简便地生成一系列对象的方法，如计算斐波那契数列（Fibonacci Sequence)
function* fibo(){
let a =1
let b =1
yielda
yieldb
while(true){
let next = a + b
a = b
b = next
yield next
}
}
let generator = fibo()
for(var i =0; i <10; i++)
console.log(generator.next().value)//=> 1 1 2 3 58 13 21 34 55
Generator函数
Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。
Generator 函数有多种理解角度。从语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。
yield表达式
其中支持一种新的语法 yield。它的作用与 return 有点相似，但并非退出函数，而是切出生成器运行时。
function* helloWorldGenerator(){
yield'hello';
yield'world';
return'ending';
}
var hw = helloWorldGenerator();
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
即该函数有三个状态：hello，world 和 return 语句（结束执行），必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。
事实上，Generator 的用法还是很多种，其中最为著名的一种便是使用 Generator 的特性模拟出 ES7 中的 async/await 特性。而其中最为著名的就是 co 和 koa(基于 co 的 Web Framework) 了。
6.10. Promise
光是 Promise 作为一个老生常谈的话题，作为异步编程的一种解决方案，目前就有多种标准，而目前最为流行的是Promises/A+，而ES2015 中的 Promise 便是基于此。Promise是一种用于解决回调函数无限嵌套的工具（当然，这只是其中一种）。它的作用便是“免去”异步操作的回调函数，保证能通过后续监听而得到返回值，或对错误处理。它能使异步操作变得井然有序，也更好控制。我们以在浏览器中访问一个 API，解析返回的 JSON 数据。
fetch('http://example.com/api/users/top')
.then(res => res.json())
.then(data =>{
vm.data.topUsers = data
})
// Handle the error crash in the chaining processes
.catch(err => console.error(err))
Promise 在设计上具有原子性，即只有两种状态：未开始和结束（无论成功与否都算是结束），这让我们在调用支持 Promise 的异步方法时，逻辑将变得非常简单，这在大规模的软件工程开发中具有良好的健壮性，带有 resolve 和 reject 参数对应的成功和失败。
function fetchData(){
returnnew Promise((resolve, reject)=>{
// ...
})
}
弊端
虽说 Promise确实很优雅，但是这是在所有需要用到的异步方法都支持 Promise 且遵循标准。而且链式 Promise 强制性要求逻辑必须是线性单向的，一旦出现如并行、回溯等情况，Promise 便显得十分累赘。所以在目前的最佳实践中，Promise 会作为一种接口定义方法，而不是逻辑处理工具。
6.11. Symbol
ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是ES6 引入Symbol的原因。
ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值，即便我们看不到它的区别在哪里。这就意味著，我们可以用它来保证一些数据的安全性。
console.log(Symbol('key')== Symbol('key'))//=> false
如果将一个 Symbol 隐藏于一个封闭的作用域内，并作为一个对象中某属性的键，则外层作用域中便无法取得该属性的值，有效保障了某些私有库的代码安全性。Symbol 作为属性名，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。但是，它也不是私有属性，有一个Object.getOwnPropertySymbols方法，可以获取指定对象的所有 Symbol属性名。
let privateDataStore ={
set(val){
let key = Symbol(Math.random().toString(32).substr(2))
this[key]= val
return key
},
get(key){
returnthis[key]
}
}
let key = privateDateStore('hello world')
privateDataStore[key]//=> undefined
privateDataStore.get(key)//=> hello world
黑科技
Symbol 除了带给我们数据安全性以外，还带来了一些很神奇的黑科技，Symbol.iterator，除 Symbol 以外，ES2015 还为 JavaScript 带来了 for...of 语句，这个跟原本的 for...in 又有什么区别？
对象的Symbol.iterator属性，指向该对象的默认遍历器方法。
var myIterable ={};
myIterable[Symbol.iterator]=function*(){
yield1;
yield2;
yield3;
};
[...myIterable]// [1, 2, 3]
对象进行for...of循环时，会调用Symbol.iterator方法，返回该对象的默认遍历器
class Collection {
*[Symbol.iterator](){
let i =0;
while(this[i]!==undefined){
yield this[i];
++i;
}
}
}
let myCollection =new Collection();
myCollection[0]=1;
myCollection[1]=2;
for(let value of myCollection){
console.log(value);
}
// 1
// 2
6.12. Proxy
Proxy 可以在不入侵目标对象的情况下，对逻辑行为进行拦截和处理。
假设我要对 api 这一对象进行拦截并记录下代码行为，我就可以这样做：
var obj =new Proxy({},{
get:function(target, key, receiver){
console.log(`getting ${key}!`);
return Reflect.get(target, key, receiver);
},
set:function(target, key, value, receiver){
console.log(`setting ${key}!`);
return Reflect.set(target, key, value, receiver);
}
});
obj.count =1
// setting count!
++obj.count
// getting count!
// setting count!
// 2
可惜的是，目前 Proxy 的兼容性很差，哪怕是降级兼容也难以实现。
6.13. 原生的模块化
历史小回顾
在 JavaScript 的发展历史上，曾出现过多种模块加载库，如 RequireJS、SeaJS、FIS 等，而由它们衍生出来的 JavaScript 模块化标准有 CommonJS、AMD、CMD 和 UMD 等。其中最为典型的是 Node.js 所遵循的 CommonJS 和 RequireJS 的 AMD。
ES2015 中的模块化机制设计也是相当成熟的。基本上所有的 CommonJS 或是 AMD 代码都可以很快地转换为 ES2015 标准的加载器代码。
import name from"module-name"
import* as name from"module-name"
import{ member }from"module-name"
import{ member as alias }from"module-name"
import{ member1 , member2 }from"module-name"
import{ member1 , member2 as alias2,[...]}from"module-name"
import defaultMember,{ member [,[...]]}from"module-name"
import defaultMember,* as alias from"module-name"
import defaultMember from"module-name"
import"module-name"
全局引入
import* as name from'module-name'
var name = require('module-name')//CommonJS 类似
局部引入，
与 CommonJS 等标准不同ES2015 的模块引入机制支持引入模块的部份暴露接口
import{ A, B, C }from'module-name'
暴露单独接口
// module.js
exportfunction method(){/* ... */}
// main.js
import M from'./module'
M.method()
基本的 export 语句可以调用多次，单独使用可暴露一个对象到该模块外
暴露复合模块
若需要实现像 CommonJS 中的 module.exports = {} 以覆盖整个模块的暴露对象，则需要在 export 语句后加上 default。
// module.js
exportdefault{
method1,
method2
}
// main.js
import M from'./module'
M.method1()
降级兼容
在实际应用中，我们暂时还需要使用 babel 等工具对代码进行降级兼容。庆幸的是，babel 支持 CommonJS、AMD、UMD 等模块化标准的降级兼容，我们可以根据项目的实际情况选择降级目标。
$ babel-m common -d dist/common/ src/
$ babel-m amd -d dist/amd/ src/
$ babel-m umd -d dist/umd/ src/
7. es7透析
7.1. async/await
Generator Function与普通的 Function在执行方式上有著本质的区别，在某种意义上是无法共同使用的。对于 ES7 的 Async Function 来说，这一点并不存在！它可以以普通函数的执行方式使用，并且有著 Generator Function 的异步优越性，它甚至可以作为事件响应函数使用。
var fs = require('fs');
var readFile =function(fileName){
returnnew Promise(function(resolve, reject){
fs.readFile(fileName,function(error, data){
if(error) reject(error);
resolve(data);
});
});
};
var gen =function*(){
var f1 = yield readFile('/etc/fstab');
var f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
// async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await
var asyncReadFile = async function(){
var f1 = await readFile('/etc/fstab');
var f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
async函数对 Generator 函数的改进，体现在以下四点:
1. 内置执行器
Generator函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。
2. 更好的语义
async和await，比起星号和yield，语义更清楚了
3. 更广的适用性
co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）
4. 返回值是Promise
7.2. Decorators
修饰器（Decorator）是一个函数，用来修改类的行为。这是 ES 的一个提案，目前 Babel 转码器已经支持。
定义如下：
l 是一个表达式
l Decorator 会调用一个对应的函数
l 调用的函数中可以包含target（装饰的目标对象）、name（装饰目标的名称）和 descriptor（描述器）三个参数
l 调用的函数可以返回一个新的描述器以应用到装饰目标对象上
PS：如果你不记得 descriptor 是什么的话，请回顾一下 Object.defineProperty() 方法。
我们在实现一个类的时候，有的属性并不想被 for..in 或 Object.keys() 等方法检索到，那么在 ES5 时代，我们会用到 Object.defineProperty() 方法来实现：
var obj ={
foo:1
}
Object.defineProperty(obj,'bar',{
enumerable:false,
value:2
})
console.log(obj.bar)//=> 2
var keys =[]
for(var key in obj)
keys.push(key)
console.log(keys)//=> [ 'foo' ]
console.log(Object.keys(obj))//=> [ 'foo' ]
/**
***ES7中可以这样
**/
class Obj {
constructor(){
this.foo =1
}
@nonenumerable
getbar(){return2}
}
function nonenumerable(target, name, descriptor){
descriptor.enumerable =false
return descriptor
}
var obj =new Obj()
console.log(obj.foo)//=> 1
console.log(obj.bar)//=> 2
console.log(Object.keys(obj))//=> [ 'foo' ]
黑科技
假如我们要实现一个类似于 Koa的CI的框架，且利用Decorator 特性实现 URL 路由，我们可以这样做。
// 框架内部
// 控制器
class Controller {
// ...
}
var handlers =new WeakMap()
var urls ={}
// 定义控制器
@route('/')
class HelloController extends Controller {
constructor(){
super()
this.msg ='World'
}
asyncGET(ctx){
ctx.body =`Hello ${this.msg}`
}
}
// Router Decorator
function route(url){
return target =>{
target.url = url
let urlObject =newString(url)
urls[url]= urlObject
handlers.set(urlObject, target)
}
}
// 路由执行部份
function router(url){
if(urls[url]){
var handlerClass = handlers.get(urls[url])
returnnew handlerClass()
}
}
var handler = router('/')
if(handler){
let context ={}
handler.GET(context)
console.log(context.body)
}
最重要的是，同一个修饰对象是可以同时使用多个修饰器的，所以说我们还可以用修饰器实现很多很多有意思的功能。
8. 参与资料
阮一峰《ECMAScript6 入门》