let

      /* let 聲明變量 *//* es6相對于es5的全局和局部作用域，多了一個塊作用域，塊作用域里聲明的變量聲明周期只在本塊內 */let a = 1;console.info(a); // 輸出1for (let i=1;i<10;i++) {console.info(i); // 在塊內是可以正常使用的}console.info(i); // 異常，ReferenceError: i is not defined// let是不能重復定義的

const

      /* const 聲明常量*//* const也是塊作用域的 */const PI = 3.14159265const constObj = {key1: 'value1',key2: 'value2'}console.info(PI); // 輸出3.14159265console.info(constObj) // 輸出Object { key1: "value1", key2: "value2" }PI = 1 // 錯誤的，只讀，不能修改constObj = {key3: 'value3'} // 錯誤的，只讀，不能修改constObj.key1 = 1 // 可以修改，并不是因為常量可以修改，而是因為對象是引用類型的，這里只是修改對象的值，并沒有修改對象的引用console.info(constObj) // 輸出Object { key1: 1, key2: "value2" }

解構賦值

      /* 解構賦值 *//* 左邊一個結構，右邊一個結構，左邊與右邊解開結構一一賦值 *//* 變量交換、方法返回數組中存有多個變量、 只提取數組中的某些值、重組數組等場景*/// 數組解構賦值let a,b,c;[a,b,c] = [1,2,3];console.info(a); //輸出1console.info(b); //輸出2console.info(c); //輸出3[a,b,c =4] = [1,2];console.info(a); //輸出1console.info(b); //輸出2console.info(c); //輸出4,如果沒有默認值,匹配不上,就是undefinedlet d,e,f;[d,e,...f] = [1,2,3,4,5,6,7,8,9,10];console.info(d); //輸出1console.info(e); //輸出2console.info(f); //Array [ 3, 4, 5, 6, 7, 8, 9, 10 ]// 對象解構let obj1,obj2;({obj1,obj2} = {obj1: 'val1', obj2: 'val2'});console.log(obj1); //輸出val1console.log(obj2); //輸出val2

字符串

• 字符串unicode擴展

      /* 字符串unicode擴展 */// \u表示后面是要輸出一個unicoide編碼對應的字符let unicoideStr1 = '\u0061'let unicoideStr2 = '\u20334'//第一個正常輸出是因為在二字節范圍內的編碼（0x0000-0xffff）,第二個已經超過了兩個字節的unicode編碼表，會把前四位當成一個字符，最后一位當成一個字符console.info(unicoideStr1,unicoideStr2) // a ″4//顯示兩個字節以上的unicode編碼，需要把編碼用{}包起來let unicoideStr3 = '\u{20334}'console.info(unicoideStr1,unicoideStr3) // a ?let spacStr = '?'// es5中把超過兩個字節長度編碼的字符處理為4個字節，就是兩個字符，輸出2console.info(spacStr.length) //輸出2let spacStrTest = '?a'console.info(spacStrTest.length); //輸出3console.info("第一個字符",spacStr.charAt(0)) //輸出 第一個字符 亂碼console.info("第二個字符",spacStr.charAt(1)) //輸出 第一個字符 亂碼console.info("第二個字符編碼",spacStr.charCodeAt(0)) //第一個字符編碼 55360console.info("第二個字符編碼",spacStr.charCodeAt(1)) //第二個字符編碼 57140// 顯然，這不是想要的結果，因此es5中處理這種字符是不正確的console.info(spacStrTest.codePointAt(0)) //輸出 131892console.info(spacStrTest.codePointAt(0).toString(16)) //輸出 20334console.info(spacStrTest.codePointAt(1)) //輸出 57140console.info(spacStrTest.codePointAt(2)) //輸出 97//es5中根據編碼取字符，大于兩個字節的不能正常顯示console.info(String.fromCharCode('0x20334')) //輸出亂碼//es6中根據編碼取字符
//      console.info(String.fromCodePoint('0x20334')) //輸出 ?//es5的循環不能正確取值for(var i=0;i<spacStrTest.length;i++){console.info(spacStrTest[i]); //輸出兩個亂碼和一個a}//es6的循環可以正確取值
//      for(let char of spacStrTest){
//        console.info(char); //輸出 ? a
//      }

• 字符串其他擴展

 /* 字符串其他擴展 */let otherStrTest = 'string'//是否包含console.info(otherStrTest.includes('in')) //輸出true//是否起始console.info(otherStrTest.startsWith('str')) //輸出true//是否結尾console.info(otherStrTest.endsWith('ing')) //輸出true//復制10次console.info(otherStrTest.repeat(10)) //輸出stringstringstringstringstringstringstringstringstringstring (一共10次)//字符串模板let name = 'thatway'let age = '18'let man = `name is ${name},age is ${age}`console.info(man) //輸出name is thatway,age is 18//padStart、padEnd 接收兩個參數，第一個參數是長度，不夠就補白，第二個是補白用的字符let simpleStr = '1'let leftPaddingStr = simpleStr.padStart(2,'0')let rightpaddingStr = simpleStr.padEnd(2,'0')console.info(leftPaddingStr, rightpaddingStr) //輸出01 10// raw會ie所有字符轉義，就是在特殊字符錢加一個\，使其正常輸出console.info(String.raw('hello\nworld')) // 輸出hello\nworldconsole.info('hello\nworld')// 輸出hello//world

數組

   /* 數組 */
//      let arrTest1 = Array.of(1,2,3,4,5)
//      console.info(arrTest1) //輸出[1,2,3,4,5]//      let arr = [1,2,3,4,5]
//      let arrTest2 = Array.from(arr)
//      console.info(arrTest2) //輸出[1,2,3,4,5]
//      let arrTest3 = Array.from(arr,function(item){return item*2})
//      console.info(arrTest3) //輸出[2,3,6,8,10]//fill，把數組中元素全部替換掉let arrFill1 = [1,2,3]console.info(arrFill1.fill(0)) //輸出[0,0,0]//fill，把數組中元素從第1個開始替換到第3個let arrFill2 = [1,2,3,4,5]console.info(arrFill2.fill(0,1,3)) //輸出[ 1, 0, 0, 4, 5 ]//遍歷
//      for(let [index,value] of ['1','2','3'].entries()){
//          console.info(index,value)
//      }//find,查找元素，注意，只返回第一個符合的let arrTest3 = [1,2,3,4,5]console.info(arrTest3.find(function(item){return item > 3})) //輸出4console.info(arrTest3.findIndex(function(item){return item > 3})) //輸出3//是否包含某個值let arrTest4 = [1,2,3,4,5,NaN]console.info(arrTest4.includes(3)) // 輸出trueconsole.info(arrTest4.includes(NaN)) // 輸出true

函數

     /* 函數 *///參數默認值function test1(x,y='123'){console.info(x,y);}test1('abc') // 輸出abc 123test1('abc','def') // 輸出abc def//作用域let x = 'abc'function test2(x,y=x){console.info(x,y)}test2('123') //輸出123 123test2() //輸出 undefined undefinedfunction test3(z,y=x){console.info(z,y)}test3('123') //輸出123 abctest3() //輸出 123 undefined//rest參數,參數不確定個數,如果生命了rest參數，不能再聲明其他參數了function test4(...params){console.info(params)}test4(1,2,3,4,5) //Array [ 1, 2, 3, 4, 5 ]test4(1) //Array [ 1 ]test4() //[]// ...數組 可以把數組里的值拆散成值console.info(...[1,2,3,4,5]) //1 2 3 4 5console.info('a',...[1,2,3,4,5])//a 1 2 3 4 5//箭頭函數//es5的函數聲明function arrow5(){console.info('arrow')}//es6的函數聲明//方法體只有一行的時候可以不寫{}let arrow6 = ()=>console.info('arrow')arrow5() //arrowarrow6() //arrowlet arrowTest = (x,y)=>{console.info(x)console.info(y)}arrowTest(1,2) //1 2//--//偽調用,優化嵌套、依賴函數，可提高性能let fun1 = (x)=>{console.info('fun1')}let fun2 = (x)=>{return fun1(x)}console.info(fun2('abc'))

對象

   /* 對象 */let name= "thatway"let age= 18//es5的對象寫法let man5 = {name:name,age:age}//es6中可以將屬性名與變量名相同的簡寫成一個let man6 = {name,age}//結果是一樣的console.info(man5,man6);//es5對象中的方法寫法let man5_method = {play: function(){console.info("玩")}}//es6對象中的方法寫法let man6_method = {play(){console.info("玩")}}//--//      let param = 'sex'
//      //屬性表達式
//      let man5_obj = {
//        name: 'thatway',
//        age: 18
//      }
//
//      //es6屬性名可以用變量
//      let man6_obj = {
//        name: 'thatway',
//        age: 18,
//        [param]: 'boy'
//      }
//      console.info(man5_obj,man6_obj)//      //比較兩個對象是否是同一個，等同于===，注意引用類型的比較
//      console.info(Object.is('abc','abc'))

Symbol

聲明不想等的兩個值，保證唯一性，babel不支持此API的編譯，略過了，知道有這么回事先

Set

      /* set */let list1 = new Set()list1.add("1");list1.add("2");console.info(list.size) //2let arr = [1,2,3,4,5]let list2 = new Set(arr)console.info(list2.size) //5let list3 = new Set()list3.add(1)list3.add(2)list3.add(1)//set中的值必須唯一，因此忽略第二個2,可以利用這個特性來去重//去重的時候不會做類型的轉換，比如1和'1'是可以同時存在的console.info(list3.size) //2//set有add、has、delete、clear幾個方法list3.has(1) //是否含有某個元素list3.delete(1) //刪除1 返回true代表成功list3.clear() //清空//遍歷for(let key of list3.keys()){console.info(key)}for(let value of list3.values()){console.info(value)}for(let [key,value] of list3.entries()){console.info(key,value)}list3.forEach(function(item){console.info(item)})//在webpack里為什么編譯不通過呢，總覺得應該是配置的問題，有空查一下//補充，這個問題是因為babel只轉換es6的句法，不轉換新的API...比如比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，解決這個問題的辦法是引入babel-polyfill，它提供了es6語法的兼容。$ npm install --save babel-polyfill

WeakSet

//WeakSet 和Set的區別是只能放對象,WeakSet是弱引用類型，可以防止內存泄露，其中的對象不存在引用時會被垃圾回收釋放內存//WeakSet 沒有size屬性 只有三個方法add、delete、haslet list_w = new WeakSet();let obj = {title : '111'}list_w.add(obj)//異常，TypeError: [object WeakSet] is not iterable!//WeakSet不支持遍歷
//      for(let item of list_w){
//        console.info(item)
//      }//異常，TypeError: WeakSet value must be an object, got the number 1list_w.add(1)

Map

 //map//map里放的是鍵值對,鍵可以是任何類型let mapTest1 = new Map()mapTest1.set("key","value")console.info(mapTest1.get("key")) // 輸出value//用數組作為keylet arrKey = [1,2,3,4,5];mapTest1.set(arrKey,"value2")console.info(mapTest1.get(arrKey)) // 輸出value2// 用數組構造函數let mapTest2 = new Map([['key1','abc'],['key2','def']]);console.info(mapTest2.get('key1')) // abc//map長度console.info(mapTest2.size) //2//其他方法mapTest2.delete("key")mapTest2.clear()//遍歷與set一樣

WeakMap

WeakMap和WeakSet的特性一樣，鍵必須是對象。

Proxy

      /* proxy */let objTest1 = {name: 'thatway',age: '18'} //代理objTest1，讓用戶去操作proxyTest，實際數據是存在于objTest1 //第一個參數是要代理的對象 //第二個參數是要攔截的各種配置let proxyTest = new Proxy(objTest1,{ //攔截對象的讀取get(target,key){return target[key]+"哦"}, //攔截賦值操作set(target,key,value){return target['key']= value+"哦"}, //攔截in操作，是否存在has(target,key){if(key == 'name'){return false}}, //攔截deletedeleteProperty(target,key){if(key == 'name'){delete target[key]return true}else{return target[key]}},})console.info(proxyTest.name) //thatway哦proxyTest.name = "wp"console.info(proxyTest) //name值被設置為wp哦console.info(name in proxyTest); //falseconsole.info(delete proxyTest.name) //trueconsole.info(delete proxyTest.age) //trueconsole.info(proxyTest) //對象中沒有了name,age還存在

proxy的操作
- get
get(target, propKey, receiver)：攔截對象屬性的讀取，比如proxy.foo和proxy[‘foo’]。
- set
set(target, propKey, value, receiver)：攔截對象屬性的設置，比如proxy.foo = v或proxy[‘foo’] = v，返回一個布爾值。
- has
has(target, propKey)：攔截propKey in proxy的操作，返回一個布爾值。
- deleteProperty
deleteProperty(target, propKey)：攔截delete proxy[propKey]的操作，返回一個布爾值。
- ownKeys
ownKeys(target)：攔截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)，返回一個數組。該方法返回目標對象所有自身的屬性的屬性名，而Object.keys()的返回結果僅包括目標對象自身的可遍歷屬性。
- getOwnPropertyDescriptor
getOwnPropertyDescriptor(target, propKey)：攔截Object.getOwnPropertyDescriptor(proxy, propKey)，返回屬性的描述對象。
- defineProperty
defineProperty(target, propKey, propDesc)：攔截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一個布爾值。
- preventExtensions
preventExtensions(target)：攔截Object.preventExtensions(proxy)，返回一個布爾值。
- getPrototypeOf
getPrototypeOf(target)：攔截Object.getPrototypeOf(proxy)，返回一個對象。
- isExtensible
isExtensible(target)：攔截Object.isExtensible(proxy)，返回一個布爾值。
- setPrototypeOf
setPrototypeOf(target, proto)：攔截Object.setPrototypeOf(proxy, proto)，返回一個布爾值。如果目標對象是函數，那么還有兩種額外操作可以攔截。
- apply
apply(target, object, args)：攔截 Proxy 實例作為函數調用的操作，比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。
- construct
construct(target, args)：攔截 Proxy 實例作為構造函數調用的操作，比如new proxy(…args)。

reflect

refect方法與proxy一一對應。

     /* reflect *///字母是反射的意思//Reflect不用newconsole.info(Reflect.get(objTest,'name')) //thatwayconsole.info(Reflect.set(objTest,'key','value'))console.info(objTest)

reflect的設計目的，阮大神的文檔中是這么說的：
1、 將Object對象的一些明顯屬于語言內部的方法（比如Object.defineProperty），放到Reflect對象上。現階段，某些方法同時在Object和Reflect對象上部署，未來的新方法將只部署在Reflect對象上。也就是說，從Reflect對象上可以拿到語言內部的方法。

2、修改某些Object方法的返回結果，讓其變得更合理。比如，Object.defineProperty(obj, name, desc)在無法定義屬性時，會拋出一個錯誤，而Reflect.defineProperty(obj, name, desc)則會返回false。

3、讓Object操作都變成函數行為。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)讓它們變成了函數行為。

4、Reflect對象的方法與Proxy對象的方法一一對應，只要是Proxy對象的方法，就能在Reflect對象上找到對應的方法。這就讓Proxy對象可以方便地調用對應的Reflect方法，完成默認行為，作為修改行為的基礎。也就是說，不管Proxy怎么修改默認行為，你總可以在Reflect上獲取默認行為。

Proxy與Reflex結合實例

      //聲明一個方法，返回值是一個代理對象，參數是實際對象和驗證規則對象//其目的是為了給原對象做一些列數據格式驗證，用戶在使用對象時拿到的實際上是代理對象,而不是實際對象//這樣的話就能夠在用戶填充數據時做一層攔截let validator = (obj,validatorConfig)=> {return new Proxy(obj,{_validatorConfig:validatorConfig,set(target,key,value,receiver){if(target.hasOwnProperty(key)){let validateAction = this._validatorConfig[key];if(!!validateAction(value)){return Reflect.set(target,key,value,receiver)}else{throw Error(`不能設置${key}到${value}`)}}else{throw Error(`${key}不存在`)}}});}//針對man對象的數據驗證const manValidator = {name(val){return typeof val === 'string'},age(val){return typeof val === 'number' && val > 18}}//創建對象class Man{constructor(name,age=18){this.name= namethis.age= agereturn validator(this,manValidator)}}let manTest = new Man()
//      manTest.name = 123 // Error: 不能設置name到123manTest.name = 'thatway'console.info(manTest) // 輸出對象，其中name為thatway，age為18//      manTest.age = '20'// Error: 不能設置age到20manTest.age = 20console.info(manTest) // 輸出對象，其中name為thatway，age為20manTest.sex = 'boy' // Error: sex不存在

class

es6中定義類的關鍵字是class，不是Class

      /* class *///定義類class Parent{constructor(name='thatway'){this.name= name}}//實例化let thatway = new Parent('wp');console.log(thatway); //打印 Object { name: "wp" }//繼承類class Child extends Parent{}let child1 = new Child()console.info(child1) //Object { name: "thatway" }let child2 = new Child('tutu')console.info(child2) //Object { name: "tutu" }class Tutu extends Parent{constructor(name='child',type){//子類必須在constructor方法中調用super方法，否則新建實例時會報錯。這是因為子類沒有自己的this對象，而是繼承父類的this對象，然后對其進行加工。如果不調用super方法，子類就得不到this對象super(name)this.type = type}}let tutu1 = new Tutu()console.info(tutu1) //Object { name: "child", type: undefined }let tutu2 = new Tutu('tutu','boy')console.info(tutu2)//Object { name: "tutu", type: "boy" }//getter、setterclass P{constructor(name='thatway'){this.name = name}set title(value){this.name = value}get title(){return this.name}}let p = new P()p.title = '123'console.info(p.title)//123console.info(p)//Object { name: "123" }//靜態方法class S{constructor(name='thatway'){this.name = name}static sing(){console.info('金色的河藍色的海，都有我們快樂的身影...')}}console.info(S.sing()) //金色的河藍色的海，都有我們快樂的身影...//靜態屬性,靜態屬性不使用static關鍵字，目前的方案是直接賦值S.age = 18console.info(S.age) //18

promise

     // 使js異步操作更加合理強大//es5中ajax回調模式function ajax5(callback){console.info("ajax5-1")setTimeout(function(){callback&&callback()})console.info("ajax5-2")}ajax5(function(){console.info("callback5");})//es6 promise方式let ajax6 = ()=> {console.info("ajax6-1")return new Promise((resolve,reject)=>{console.info("ajax6-2")setTimeout(()=>{resolve()},1000)})}ajax6().then(()=>{console.info("callback6")})let ajaxSencond = ()=>{return new Promise((resolve,reject)=>{return reject(new Error('second error'))})}//promise實例的then方法返回一個新的promise實例，所以可以鏈式調用，這樣就可以將多個異步操作變得有序//第一個then返回的結果，會作為第二個then的參數//then是有順序的ajax6().then(((data)=>{console.info("ajax6 succ")return "ajax6 rs"}),(data)=>{console.info("ajax6 error")}).then((data)=>{console.info("第二個then的resolve接收到的參數,可以拿著異步返回的結果做下面的邏輯了:"+data)ajaxSencond().then((data)=>{console.info("ajaxSencond succ")},(data)=>{console.info(data)})},(data)=>{console.info("ajax6 error")})//異常的捕獲，建議用catchajaxSencond().then((data)=>{},(data)=>{console.info("異常在這里出現-回調")})ajaxSencond().then((data)=>{}).catch(function(data){console.info("異常在這里出現-catch")})//all 所有的promise都返回結果以后才會then，如果其中一個失敗了，則直接用失敗的結果let pro1 = new Promise((resolve,reject)=>{return resolve("data1")})let pro2 = new Promise((resolve,reject)=>{return resolve("data2")})Promise.all([pro1,pro2]).then(([data1,data2])=>{console.info(data1,data2)}).catch(function(error){console.info(error)}) //data1 data2let pro3 = new Promise((resolve,reject)=>{return reject(new Error('pro3 error'))})let pro4 = new Promise((resolve,reject)=>{return resolve("data4")})Promise.all([pro3,pro4]).then(([data3,data4])=>{console.info(data3,data4)}).catch(function(error){console.info(error)}) //Error: pro3 error//race 和all不一樣的是，哪個先返回結果就用哪個的結果，其他的不用了let pro5 = new Promise((resolve,reject)=>{setTimeout(function(){return resolve("data5")},100)})let pro6 = new Promise((resolve,reject)=>{return resolve("data6")})Promise.race([pro5,pro6]).then((data)=>{console.log(data)}).catch((data)=>{console.log(data)}) //data6

iterator

      /* Iterator *///數據集合結構的統一遍歷方法//具有Symbol.iterator屬性的數據結構就可以使用for of循環遍歷function Obj(value) {this.value = value;this.next = null;}Obj.prototype[Symbol.iterator] = function() {var iterator = { next: next };var current = this;function next() {if (current) {var value = current.value;current = current.next;return { done: false, value: value };} else {return { done: true };}}return iterator;}var one = new Obj(1);var two = new Obj(2);var three = new Obj(3);one.next = two;two.next = three;for (var i of one){console.log(i); // 1, 2, 3}//      原生具備 Iterator 接口的數據結構如下。
//
//      Array
//      Map
//      Set
//      String
//      TypedArray
//      函數的 arguments 對象
//      NodeList 對象

Gernerator

      /* Generator */// generator是es6中的另一個異步解決方法//基本定義let tell = function* (){yield 'a';yield 'b';return 'c'}let rs = tell()console.info(rs.next()) //Object { value: "a", done: false }console.info(rs.next()) //Object { value: "b", done: false }console.info(rs.next()) //Object { value: "c", done: true } 有return的時候done會變為trueconsole.info(rs.next()) //Object { value: undefined, done: true }//Generator返回的就是一個Iteratorlet obj = {}obj[Symbol.iterator] = function* (){yield '1';yield '2';return}for(let val of obj){console.info(val)}//Generator應用場景：狀態機//1、2、3三種狀態let state = function* (){while (true){yield 1;yield 2;yield 3;}}let status = state();for(let i = 0;i<= 10;i++){console.info(status.next()) //一直是1、2、3依次輸出}//抽獎次數限制let action = (count)=> {//抽一次獎品console.info(`剩余${count}次`)}let timesController = function* (count){while(count > 0){count --yield action(count)}}let times = 5let lottry = timesController(times)lottry.next()lottry.next()lottry.next()lottry.next()lottry.next()lottry.next()//長輪詢實例let ajax = function* (){//yield返回一個promise實例yield new Promise((resolve,reject)=> {//異步耗時1秒鐘后返回結果  setTimeout(()=>{return resolve('ok')},1000)})}//查詢方法let pull = ()=> {//拿到Generatorlet generator = ajax()//執行ajaxlet step = generator.next()// step.value是返回的promisestep.value.then((data)=>{//如果結果不是期望的，1秒以后再一次調用，直到結果是期望的 if(data != 'ok'){setTimeout(()=>{console.info("等待1秒后再輪詢")pull()},1000)}else{console.info('結束了：'+data)}})}//開始拉取數據 pull()

Decorators

這個api需要插件支持

npm i babel-plugin-transform-decorators-legacy -D

.babelrc中添加插件

"plugins": ["transform-decorators-legacy"]

      /* Decorator 修飾器 */// 是一個函數// 修改行為（可以修改或者擴展行為）// 類的行為 (只能在類上使用)// 類似于java的注解//聲明一個修飾器let decoratorReadOnly = function(target,name,descriptor){descriptor.writable = falsereturn descriptor}//修飾某一個類的行為class Test{@decoratorReadOnlygetName(){return 'thatway'}}let test = new Test()test.getName = function(){return 'new'}//TypeError: "getName" is read-only//也可以放在類前修飾類let typeDecorator = function(target,name,descriptor){target.name = 'a'}@typeDecoratorclass Empty{}console.info('修飾類',Empty.name) //"name" is read-only//日志埋點let log = (type)=> {return function(target,name,descriptor){let src_method = descriptor.valuedescriptor.value =(...args)=>{src_method.apply(target,args)console.info(`log ${type}`)}}}class logTestObj {@log('method1')method1(){console.info('method1')}@log('method2')method2(){console.info('method2')}}let o = new logTestObj()o.method1()o.method2()

core-decorators包已經封裝了常見的修飾符

npm i core-decorators

模塊

模塊主要涉及到import和export的語法，有幾種不同情況下不同的寫法。

學習資料

關于es6的入門，阮一峰大神已經整理的非常易懂了：

阮大神的babel介紹和ES6手冊
http://www.ruanyifeng.com/blog/2016/01/babel.html
http://es6.ruanyifeng.com