標籤：

SegmentFault 技術周刊 Vol.2 - 666，ES6

01-30

ECMAScript 6.0，ECMAScript 2015，直到大家最後確定簡稱為 ES6，從最初的制定，到最後發布成為國際標準，歷時 15 年之久。

2015 年 6 月，ES6 正式發布，過去了一年，已有不少開發者在 SegmentFault 分享了 ES6 相關的內容，從初探到深入，從理論到實踐。

這期，我們就來聊聊 ES6 的新特性，開始上手實踐：

  1. 走馬觀花，初識 ES6
  2. 新功能及特性的學習
  3. 重要特性之 Module
  4. 上手實踐之 Angular 搭配

從這四個方面逐步深入。篇幅較長，內容極多，請準備好你的時間與大腦 ∠( ? 」∠)＿

走馬觀花

幾篇簡單易懂的文章，讓未接觸過 ES6 的新同學有大致的了解。

阮一峰 - ECMAScript 6入門

作為入門，阮一峰老師的《ECMAScript 6 入門》一書中的 章節必不可少。此章節中，阮一峰老師對 ECMAScript 歷史做了較詳細的介紹，同時也介紹了 ECMAScript 和 JavaScript 的關係、部署進度、Babel 轉碼器等等。

meikidd - ES6 走馬觀花

閱讀本文，你將了解到

  • 什麼是 ES6
  • ES6 有哪些「明星」特性
  • ES6 可以運行在哪些環境

LeuisKen - [翻譯] Learn ES2015

再深入一步，在譯文《Learn ES2015》中，將介紹到更多 ES6 的新特性：箭頭函數、類、增強的對象字面量、模板字元串、解構、迭代器、生成器、Unicode 編碼、模塊、代理對象、二進位和八進位字面量、Promises、Reflect API、Tail Calls……

更多閱讀：

  • 不寫代碼的碼農 -ECMAScript 6不完全教程
  • AlexChen - ES6中非常實用的新特性介紹

分解學習

熟悉 ES6 之後，我們將開始逐一分解、進行詳細的特性學習。

zach5078 - 30分鐘掌握ES6/ES2015核心內容（上）30分鐘掌握ES6/ES2015核心內容（下）

上篇介紹了 ES6 最常用的幾個語法，包括 let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments。

下篇介紹 import、export 以及 ES6 module 的其他高級用法。

菜菜蔡偉 - [譯]JavaScript ES6解構賦值指南、[譯]JavaScript ES6迭代器指南、[譯]JavaScript ES6箭頭函數指南

這個系列，詳細講解了解構賦值（Destructuring）、迭代器（Iterators）、箭頭函數（Arrow Functions）等新特性

  • 數組的解構賦值、對象的解構賦值、函數參數的解構賦值，ES6 的解構賦值給 JavaScript 的語法帶來了更多的現代化，它在減少了代碼量的同時，增加了代碼的可讀性和表現力；
  • for-of、惰性執行、內置迭代器、無限迭代器、Generator 函數，迭代器給 JavaScript 中的循環、Generator 函數和值序列（Value Series）帶來了新的維度；
  • this、arguments、yield，箭頭函數獲得成就「ES6 最受歡迎特性之一」。

grace_xhw - [譯] ES6 中 Arguments 和 Parameters 用法解析、[譯] 最深刻而易懂的ES6解構教程

ES6 給 JavaScript 帶來了上百個大大小小的改進，其中就包括

  • arguments 和 parameters，ES6 顯著地完善了 JS 中參數的處理方式；
  • 解構賦值，作為 ES6 的重要新特性，解構可以從根本上改變你的 JS 編碼方式，用的越多，你就會發現越多塑造數據和函數的方式，這些實現方式在過去幾乎是不可能的。

這兩篇文章，深入探討這些特性中你所需要知悉的一切。

小問 - 生成器（Generator）

生成器（Generator）可以說是在 ES2015 中最為強悍的一個新特性，因為生成器是涉及到 ECMAScript 引擎運行底層的特性，生成器可以實現一些從前無法想像的事情。

zindex - ES6 探秘：Classes

ES6 中增加的某些新特性，從底層的角度來說，只是一些語法糖。如果不了解這些語法糖的本質，是用不安心的。Classes 就是其中之一，它並沒有引入一種新的繼承模式，而是為對象創建和繼承提供了更清晰、易用的語法。

meikidd - ES6 舊瓶新酒

ES6 對這些原來就被廣泛使用的 JS 對象——String、Number、Array、Object——擴展的一些有用的新方法。

ping4god - [譯] 實例解析 ES6 Proxy 使用場景

ES6 中的箭頭函數、數組解構、rest 參數等特性一經實現就廣為流傳，但類似 Proxy 這樣的特性卻很少見到有開發者在使用，一方面在於瀏覽器的兼容性，另一方面也在於要想發揮這些特性的優勢，需要開發者深入地理解其使用場景。本文將介紹 Proxy 的使用方式，並通過列舉具體實例來解釋 Proxy 的使用場景。

更多閱讀：

  • fighterleslie - 備胎的自我修養——趣談 JavaScript 中的 ASI (Automatic Semicolon Insertion)
  • JoeRay - ES6學習筆記之箭頭函數
  • shane_xu - ES6學習筆記3—-Symbol
  • 見見 - 觸摸ES6 - 模板字元串、觸摸ES6 - 解構賦值
  • array_huang - ES6部分方法點評（一）
  • 大猛 - 使用ES6寫更好的JavaScript

細說 Module

完成了上個階段，你會發現 ES6 中有兩個非常重要的特性：Module 和 Promise，是無論如何都繞不過去的。所以這期我們將 Module 作為重點學習，Promise 會是之後的 ES6 相關周刊中的重點。

野狗科技 - 寫了十年JS卻不知道模塊化為何物？

模塊化這個問題並非一開始就存在，WWW 剛剛問世的時候，HTML、JavaScript、CSS（JS 和 CSS 都是後來在網景被引進瀏覽器的）都是極其簡單的存在，不需要模塊化。模塊化的需求是規模的產物，當 web page 進化到 web application，瀏覽器端處理的邏輯越來越複雜，展現的樣式和動畫越來多，對於工程的要求也就越來越高，模塊化的需求也就產生了。

PortWatcher - ES6 的模塊系統

事過情遷，JavaScript 項目已經變得十分龐大，社區也發展出了一些有助於開發可擴展程序的工具。比如模塊系統。JavaScript 其實很早就發展出了模塊系統，以及對應的包管理工具（如 AMD，CommonJS 和 NPM），而帶有模塊特性的 ES6，是不是姍姍來遲呢？

Amio - 為何 ES Module 如此姍姍來遲

瀏覽器大戰風起雲湧，大家爭先恐後地部署 ES2015 新特性，然 ES Module 這個萬眾期待的重要特性卻始終遲遲未能實現。Module 的規範是完工了的，只是對於模塊如何載入和解析留給了「實現環境決定」——根據歷史經驗問題往往就出現在「實現環境決定」這一環。

import 和 export 的語法規範很明確，模塊的解析器 V8 早已實現，萬事俱備只欠載入。區區載入能有多麻煩？

文藺 -【譯】從發展歷史理解 ES6 Module

在很長一段時間內，ES6 帶來了 JavaScript 最大的變化，包括管理大型、複雜代碼庫的一些新特性。這些特性，主要是 import 和 export 關鍵詞，共同被稱為 Modules。

grace_xhw - [譯]從JS模塊化現狀闡釋選擇ES6模塊的重要性

為了弄明白為什麼全部遷移到 ES6 模塊如此重要，首先需要描述一下當前的實際狀況。在過去 5 年，JavaScript 的發展如此迅猛，以至於大多數的開發者都沒有意識到現在有 5 種方式可以來創建 JavaScript 腳本和應用…

見見 - Rollup 試煉之路

Rollup 是下一代 ES6 模塊化工具。ES6 之後，模塊化的寫法將更加的趨勢化，會將以前的文件切割成多個的細小模塊。那麼如何來高效的組織管理這些文件，又有了很多不同的方案。現有的模塊化打包已經有如 Browserify 和 Webpack，那為啥還需要一個新的呢？

ES6 + Angular

ES6 的各式搭配風格中，Angular 當作是一種經典。

leftstick - 用ES6編寫AngularJS程序是怎樣一種體驗

過去我們認為屌炸天的 AngularJS（現在也屌炸天，只不過還有 Angular2, React, Vue 橫空出世）是不是可以用 ES6 來寫？少年不要懷疑，真的可以哦！

kuitos - Angular 1.x + ES6 開發風格指南

框架的選型在這幾年是很頭痛的事情，你無法肯定某個框架會是終極解決方案。但是有一點毫無疑問，就是使用 ES6 來寫業務代碼是勢在必行的。這便是一篇趟坑經驗文。

n?i?g?h?t?i?r?e? - ES6 + Angular 1.x

ES2015 是讓人興奮的，除了語法層面的種種提升之外，最令人期待的就是模塊化系統和非同步模塊載入機制。JavaScript 第一次在語言層面擁有了標準且先進的模塊化系統。然而標準本身只是落在紙面上的「理想」，更進一步的問題則是如何實踐？這篇例子就是結合 jspm，通過 ES2015 構造一個基於 Angular 1.x 的前端項目—。

靜逸秋水 - 使用 ES2015 開發 Angular1.x 應用指南

Angular 的編碼風格以及架構已經使用 ES2015 進行重寫，這些在 Angular 1.5+ 的變化可以更好幫助你升級到 Angular2，這份指南包括了新的單向數據流、事件委託、組件架構和組件路由的最佳實踐。

xufei - Angular 1.x和ES6的結合 · Issue #29 · xufei/blog · GitHub

特別推薦：徐飛老師關於 Angular 和 ES6 結合的見解

「在任何一個嚴謹的項目中，應當有比較確定的業務模型，即使脫離界面本身，這些模型也應當是可以運作的，而 ES6 之類語法的便利性，使得我們可以更好地組織下層業務代碼。即使目的不是為了使用 Angular 1.x，這一層的精心構造也是有價值的。當做完這層之後，上層遷移到各種框架都基本只剩體力活了。」

（本期完）

往期周刊傳送門：Vol.1 - Vue.js 起手式

# SegmentFault 技術周刊 #

「技術周刊」是社區特別推出的技術內容系列，一周一主題。周刊篩選的每篇內容，是作者的獨到見解，踩坑總結和經驗分享。

每周二更新，歡迎關注「關注」或者「訂閱」。大家也可以在評論處留言自己感興趣的主題，推薦主題相關的優秀文章。

? 本文版權歸作者 SegmentFault 所有，文中提及所有文章版權歸原文作者所有，任何形式轉載請聯繫作者。

推薦閱讀：

TAG:ECMAScript2015 | ES2015 | Angular? |