調試網站

http://babeljs.io/repl/

擴展閱讀：

# export、exports、modules.exports 和 require 、import 的一些常用方法和套路
http://www.cnblogs.com/CyLee/p/5836069.html

# es6學習筆記
https://github.com/dragon8github/es6-Study-Notes

（數組）擴展運算符使用

// demo 1
var a = (...args) => console.log(args)
a(1, 2, 3, 4) // [ 1, 2, 3, 4 ]

// demo 2
console.log(...[1, 2, 3, 4]); // 1 2 3 4

// demo 3
Math.max(...[1, 2, 3, 4, 5]) // 5

// demo 4
var arrl = [0, 1, 2];
var arr2 = [3, 4, 5];
arrl.push(...arr2); // [ 0, 1, 2, 3, 4, 5 ]

箭頭函數與高階函數

getters: {
  // ...
  getTodoById: state => id => state.todos.find(todo => todo.id === id)
}

怎么會有兩個箭頭函數？語法錯誤吧？其實這就是一個函數返回另一個函數罷了。簡化一下：

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

然后再還原為es5的代碼

"use strict";

getters: {
  // ...
  getTodoById: (function (state) {
    return function (id) {
      return state.todos.find(function (todo) {
        return todo.id === id;
      });
    };
  });
}

類的基本操作

class UserService
{
    constructor(UserName,UserPwd)
    {
         this._UserName = UserName;
         this._UserPwd = UserPwd;
    }

    get UserName(){return this._UserName} //獲取屬性,命名必須大寫開頭
    set UserName(n){this._UserName = /^w{6,19}$/.test(n)?n:null} //設置屬性，命名必須大寫開頭

    get UserName(){return this._UserName} //獲取屬性,命名必須大寫開頭
    set UserName(n){this._UserName = /^w{6,19}$/.test(n)?n:null} //設置屬性，命名必須大寫開頭

    getVersion()
    {
        console.log("1.0");
    }
}

let user = new UserService('Lee','123456');
//user.getVersion();
// console.log(user.name,user.pwd);
user.UserName = 'dragon8github';
console.log(user.UserName);

---

5、使用promise寫法

http://es6.ruanyifeng.com/#docs/promise

仔細研究這幾個demo就可以學會promise的用法了：

// demo 1： Promise的基本特性和使用
var fuck = new Promise((resolve, reject) => {
    resolve("123");  // 會激活.then的第一個參數函數. 請注意，resolve 和 reject 這兩個函數只能選擇一個執行
    reject("456");   // 會激活.then的第二個參數函數 或者 .catch函數
})

fuck.then(data => {
    console.log(data);  // => 123 當Promise執行第一個參數函數reject時會觸發
}, err => {
    console.log(err);  // => 456 當Promise執行第二個參數函數reject時會觸發 或者Promise發生錯誤時會觸發。
})

fuck.then(data => {
    console.log(data);  // => 123 當Promise執行第一個參數函數reject時會觸發
}).catch(err => {      
    console.log(err); // => 456 當Promise執行第二個參數函數reject時會觸發 或者Promise發生錯誤時會觸發。
})


// demo 2: 在promise中return，是return 一個promise對象，所以可以無限的.then/.catch
var fuck = new Promise(function(resolve, reject){
    resolve("123");  // 會激活p.then的第一個參數函數, 注意，如果調用這個。這個函數就會停止執行，所以下一句代碼沒有效果
    reject("456");   // 會激活p.then的第二個參數函數 或者 p.catch函數
});

fuck.then(data => {
  console.log(data);  // => 123
  return data + 1
}).then(data2 => {
   console.log(data2); // => 1231
})


// demo 3: promise自動會啟動try catch 機制 使用catch或者then的第二個參數函數捕獲
var fuck = new Promise((a, b) => {
    mdzz()  // 根本沒有mdzz這個函數，所以會報錯,也可以使用 throw new Error('mdzz') 來觸發報錯
})

fuck.then(data => {
　　//do someting...
}).catch(err => {
    // 這里可以捕獲到err。當然你可以什么都不寫。這樣程序就不報錯了。
    // 但正常情況下還是建議處理好err
    console.log(123)
})

// 或者這樣
fuck.then(data => {
  console.log(data);  // => 123 當Promise執行第一個參數函數reject時會觸發
}, err => {
  console.log(err);  // => 456 當Promise執行第二個參數函數reject時會觸發 或者Promise發生錯誤時會觸發。
})


// demo 4: 如何共享參數
// 暫時沒有方法。只能用全局變量.下面是代碼片段：
connect().then(db => {
   return (this.db = db).collection('users')
}).then(docs => {
    return docs.insert({name: this.name, pwd: this.pwd, email: this.email}, {safe: true})
}).catch(err => {
    this.db && this.db.close();
    throw new Error(err);
})

demo5： 實現finally函數
Promise.prototype.finally = function (callback) {
    let P = this.constructor;
    return this.then(
        ret => P.resolve(callback()).then( () => ret),
        err => P.resolve(callback()).then( () => {throw new Error(err) })
    );
};

封裝一個promise的函數，希望繼續返回Promise.

以下是我實戰的代碼片段，僅供參考。

var MongoClient = require('mongodb').MongoClient;
var url = 'mongodb://localhost:27017/myproject';
// 如果我要使用fuck()之后繼續執行.then，那么說明這個fuck要返回一個promise即可。
let fuck = () => {
    // 由于我知道MongoClient.xxxx()也返回一個promise，所以這里直接返回即可。
    return MongoClient.connect(url, {}).then(db => db).catch(err => {
        throw new Error(err);
    }); 
}

fuck().then(db => {
    console.log(db);
    db.close();
})

async + await + Promise

// 使用async 和 await 必須配合使用Promise
// 在同一個代碼段中，不可以同時使用resolve和reject。因為他們執行之后會return
const f = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(123); 
      // reject(321)
    }, 1000);
  });
};

// async返回的是一個promise。所以別妄想在這里就可以直接返回普通類型的值（如string/object/Boolean)
// 事實上，在這里面我也可以用Promise的方式.then()來解析。感覺就是一個語法糖。
// 總之指的注意的是，在這個async返回的是一個promise對象
const testAsync = async () => {
  try {
    let a =  await f(); // 如果使用await，則接受起其返回值
    console.log(a)  // 輸出123
　　 return a  // 請注意，雖然上句輸出的是123,但返回的時候，卻是一個Promise對象哦
  } catch (err) {
    alert(err) // 可以獲取reject的值
  }
};

let a = testAsync()

console.log(a) // 注意這是一個promise
  

補充：2017-11-28

async 更像是一個標記。 await 也必須在有async 標記的函數中才可以正常使用。目前粗淺的理解是這樣，而且大多數遇到的場景也是這樣。如果以后碰到再回來補充。

await 標記的函數必須是返回promise才可以正常使用獲取，如果不是只能是undefined。以Fetch為例演示（省略了async的標記）：

 let myjson = await fetch(API_SERVER, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(form)
    }).then(data => {
        return data.json()
    })

Async + await 新理解

使用它們的目的是，優雅的，不嵌套，不回調的使用返回值。
但代價就是，它們必須是同個圈子里的，也就是同個函數里的，也就是同個async函數里的。然后被執行才可以。

describe('注冊', () => {
  it('注冊', done => {
        const Register = async () => {
            // 獲取驗證碼
            const data = await xdapi.wechat_SmsSend({TelNo: '13713332657', Type: '1'}).then(data=>data);

            if (data.Data) {
                return await xdapi.wechat_Register({
                        TelNo: '13713332657',           // 賬號
                        Password: '123456.a',           // 密碼
                        ValidateCode: data.Data,        // 驗證碼
                        ExtensionTelNo: '13713332652',  // 推薦手機號
                        Type: 'wechat_pulic'            // 注冊方式是微信
                }).then(data => data)
            } else {
                return {ReturnMessage: '獲取驗證碼失敗' + data.ReturnMessage};
            }
        }

        Register().then(data => {
           if (data.ReturnCode == 1) {
               console.log(data)
               done()
           } else {
               Toast('注冊失敗：' + data.ReturnMessage);
           }
        })
  })
})

ES6 class setTimeout promise async/await 測試Demo

class Person {
    async getVersion () {
        return new Promise((resolve, reject) => {
           setTimeout(function () {
                resolve('1.0'); // reject('fail')
           }, 1000);
        })
    }
}

const start = async () => {
   var p = new Person();
   const data = await p.getVersion();
   console.log(20180716090040, data); 
}

start(); // 20180716090040 "1.0"

---

proxy 代理的實戰運用

如果你返回的是函數，那就是攔截函數，如果是其它類型。就是算是攔截屬性

// 結合getter 和 proxy 的特性實現php中的__GET魔術函數

var api = {}

/**
 * @func
 * @desc Proxy使用示例
 * @param {object}  - 要代理的對象
 * @param {object}  - 相關的代理配置
 */
var proxy = new Proxy(api, {
    get: function (target, key, receiver) {
        console.log('獲取函數名', key)
        // return Reflect.get(target, key, receiver)
        return function (aa) {
          window.alert(aa + key) 
        }
    }
})

proxy.fuck('abc')

---

函數名用類似數組的形式定義

const mutations = {
    INCREMENT (state,amount) {
        state.count = state.count + amount
    }
    //Es2015的知識點
    ["SET_INCREMENT"] (state,amount) {
        state.count = state.count + amount
    }
} 

用for of 代替所有的遍歷方式。 對數組和對象都使用for of

數組就用for(let[index,ele]of[].entries()),對象就用for (let [key, val] of Object.entries(obj))
除了entries, 還有keys() values() 詳情百度

var aa = {boj1: {name:"fuck", age:18 }, obj2: {name:"shit", age:19 }}

# 對象遍歷
for (let [index, ele] of Object.entries(aa)) {
         console.log(index, ele)
}

# 數組遍歷
for (let [index, ele] of [1, 2, 3].entries()) {
         console.log(index, ele)
}

總結

以上是生活随笔為你收集整理的使用和学习 ES2015的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。