摘自 ECMAScript 6 簡介：
大家習慣將
ECMAScript 6.0簡稱為ES6，它是 Javascript 語言的下一代標准，它的目標，是使得 Javascript 語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。
說是下一代，其實早在 2015 年 6月就正式發布了（所以又稱 ES2015），截止今日已經快3年了，很快 ES7/ES8 都要出來了，所以作為前端開發者，學習 ES6 已經是個必然命題了。不要再問有沒有必要學習之類的問題了。
關於 ES6 的基礎知識，推薦 阮一峰 老師的 ECMAScript 6 入門，看完你就會覺得，並不難。至於有些后端的朋友跟我聊到說 ES6 完全不明白，那是因為你們思想還停留在過去 jQuery 的時代，那個時候只需要隨便復制幾段代碼，然后寫幾個 js 函數，就可以搞定很多后端模板頁面了，但是今非昔比了，所以如果你們想深入了解前端，做一個全棧工程師，還是靜下心來，好好閱讀這篇 ES6 教程。代碼這東西，不只是需要會用，更重要的是需要知其所以然。就像你一個 python 同事看到一段代碼時問我，為啥 JS 引用一個模塊時是 import Vue form 'vue'，而不是 from 'vue' import Vue 一樣，這個我是沒法解釋的，因為ES6語言的規范就是這樣的啊~
模塊的定義和引入
復制一份上一篇中的項目，在 src 目錄下創建一個 utils.js 文件，內容如下：
/** * 簡單的深拷貝實現，個人經常這么使用 * 這里obj中不能包含特殊類型值：undefined,NaN,function類型值 * @param {object} obj */ export function deepClone(obj) { return JSON.parse(JSON.stringify(obj)); } /** * log 函數的二次封裝，這里只是為了演示 * @param {any} content */ export function log(content) { console.log(`[Yuga log]: ${JSON.stringify(content)}`); } 它就是通過 export 暴露出了兩個工具函數。
修改 app.js 代碼進行引入使用：
import './styles/app.scss'; import Vue from 'vue'; import userinfo from './info'; import { deepClone } from './utils'; import * as utils from './utils'; import hello1 from './hello1.vue'; import hello2 from './hello2.vue'; new Vue({ el: "#app", template: '<div><hello1 v-bind:info="userinfo"/><hello2/></div>', data () { return { userinfo: deepClone(userinfo) } }, components: { hello1, hello2 }, created () { // 你會發現這里也同時改變了源原數據 info ， // 所以需要用到深拷貝源數據賦值給 data 中的 info this.userinfo.name = 'yugasun111' utils.log(userinfo) } }); 上面分別演示了 5 種模塊引入方法，無論是哪一種，其實這個要看該模塊是如何 export 的，對於任何一個 npm 模塊，如果它支持 ES6 方式引入，它一般都會使用 export 或 export default 關鍵字暴露出一個對象（任何一個js數據類型），只不過 export default 指定了默認輸出，這樣用戶就不用閱讀接口文檔，就可以按照自己需要加載該模塊，並修改為自己喜歡的名稱來使用。而對於有些模塊（如上面的 utils.js）可以通過 export 關鍵字來實現多個子模塊的輸出，這樣用戶就可以根據個人需要來引入對應的子模塊，前提是得知道其內部子模塊名稱才行。 而 import 'normalize.css' 相當於全局引入了，將該模塊的所有內容一並引入。
更多細節講解，建議閱讀這篇文章： ES6 Module 的語法
這點對於 require 的引入方式，是沒法做到的，而著名的 tree-shaking 功能就是依賴 ES6 的這種模塊系統。
異步編程
Promise是異步編程的一種解決方案，比傳統的解決方案（回調函數）更合理和更強大。它由社區最早提出和實現，ES6 將其寫進了語言標准，統一了用法，原生提供了Promise對象。詳細Promise介紹可以閱讀這篇博文：異步編程之 Promise；
ES2017 標准又引入了 async 函數，是的異步操作變得更加方便。更詳細的介紹在這里：async 函數。
有的人說有了 async 函數 就不再需要 Promise 了，我覺得是不對的，因為很多異步模塊都是先基於 Promise 封裝，然后才能經過 async/await 函數來操作的。當然把兩者結合起來用，可以完成更加強大的異步編程操作，Vuejs 代碼也變得更加靈活、簡介和強大。
這里既然是 Vuejs 實戰，我就不講它們的基礎用法了，來看看如何用在實際項目中吧~
要想在項目中使用 async/await 函數，就必須有相關 babel 插件來支持，因為 async/await 語法屬於 ES2017 規范的內容，所以需要引入 babel-preset-stage-2 插件來轉化，當然還有 stage-0, stage-1, stage-3 等，這里參考 vue-cli 常用 stage-2，直接安裝：
npm install babel-preset-stage-2 babel-plugin-transform-runtime --save-dev 然后在 .babelrc 文件中添加配置：
{
"presets": [ "env", "stage-2" ], "plugins": [ "transform-runtime" ] } 現在我們的語言支持，配置好了，現在開始使用。
上面的代碼中，我們的 userinfo 是我們通過 info.js 硬編碼，然后在 app.js 中引入，通過 props 傳遞給了 hello1.vue 組件，下面我們通過請求接口方式來獲取。
先安裝 vue-axios-plugin 插件，來提供網絡請求服務：
npm install vue-axios-plugin --save
然后在 app.js 中導入並使用：
// 引入插件 import VueAxiosPlugin from 'vue-axios-plugin'; // 使用插件 Vue.use(VueAxiosPlugin) 這樣在應用中的組件中都會在 this 上綁定一個 $http 屬性，它由 get 和 post 方法，具體使用文檔：vue-axios-plugin文檔。
然后在 hello1.vue 中創建請求方法 getUserInfo，並在 created 鈎子函數中調用:
// ... methods: { async getUserInfo () { try { const res = await this.$http.get('http://yapi.demo.qunar.com/mock/4377/userinfo'); this.info = res.data } catch (e) { console.log(e); } } }, // ... 重新運行項目，審核元素，發現成功發起了 GET 請求，並顯示了接口數據。
注意：其實 Vuejs 的
methods屬性中所有的方法都可以定義為async函數來使用，包括 Vuejs 的生命周期函數，比如created。
可以發現使用 async/await 語法比使用 Promise 的鏈式語法簡潔多了，而且閱讀性更強了。
高級異步編程
因為本人工作主要是在大數據可視化，經常在繪制某張定制化圖形時，需要同時依賴多個接口（不要問我為什么會有這么多接口？為啥后端不一次性傳給我？因為我不想跟他們撕逼，╮(╯▽╰)╭哎），而且必須在這幾個請求都處理完后，才能開始處理數據，多的時候一張圖行依賴6個接口，當然我可以在一個 async函數 中寫6行 await 語法的請求，然后逐個處理，但是這樣效率太低了，但是這6個請求是可以並行執行的。這時就可以結合 Promise.all 高級方法來處理。這樣我可以同時發起六個請求，然后統一處理接口返回數據。為了方便，這里演示同時請求2個url，多個的是一樣的。我們再在 hello1.vue 中添加一個 get2UserInfo 方法，然后在 created 中調用下，更新后的 hello1.vue 如下：
<template> <div> <h1>{{ msg }}</h1> <a v-bind:href="info.site">{{ info.name }}</a><br> <a v-bind:href="user1.site">{{ user1.name }}</a><br> <a v-bind:href="user2.site">{{ user2.name }}</a><br> </div> </template> <script> export default { name: 'hello1', data () { return { msg: 'Hello Vue.js', info: {}, user1: {}, user2: {} } }, methods: { async getUserInfo () { try { const res = await this.$http.get('http://yapi.demo.qunar.com/mock/4377/userinfo'); this.info = res.data } catch (e) { console.log(e); } }, async get2UserInfo () { try { const res = await Promise.all([ this.$http.get('http://yapi.demo.qunar.com/mock/4377/userinfo1'), this.$http.get('http://yapi.demo.qunar.com/mock/4377/userinfo2'), ]) this.user1 = res[0].data; this.user2 = res[1].data; } catch (e) { console.log(e); } } }, created () { this.getUserInfo(); this.get2UserInfo(); } } </script> <style lang="scss" scoped> h1 { color: $green; } </style> 再次運行項目，可以發現頁面在初始化的時候同時發起了3個請求，並正常渲染出了接口數據。通過控制台可以看到這三個請求是並行發起的。
注意：這里的
Promise.all()的參數是一個函數執行隊列，它們會同時發起，然后都請求成功后，會將隊列的每個任務的結果組裝成一個結果數據，然后返回。
總結
其實要把講ES6講完，是在是太難了，寫本書都很難講好，我這里只能說是班門弄斧一下，結合我在 Vue 中的相關實踐，對相關功能做個簡短介紹，希望能起到引導的作用。不太了解的朋友，可以認真閱讀下文首提到的阮一峰老師的文章。接下來后面的文章將全部使用 ES6 的語法編寫代碼。