摘要：字面上是生成器的意思，在里是迭代器生成器，用于生成一個(gè)迭代器對(duì)象。當(dāng)執(zhí)行的時(shí)候，并不執(zhí)行函數(shù)體，而是返回一個(gè)迭代器。迭代器具有方法，每次調(diào)用方法，函數(shù)就執(zhí)行到語(yǔ)句的地方。也有觀點(diǎn)極力反對(duì)，認(rèn)為隱藏了本身原型鏈的語(yǔ)言特性，使其更難理解。

本文為 ES6 系列的第一篇。旨在給新同學(xué)一些指引，帶大家走近 ES6 新特性。
簡(jiǎn)要介紹：

什么是 ES6

它有哪些“明星”特性

它可以運(yùn)行在哪些環(huán)境

ECMAScript 6（以下簡(jiǎn)稱ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。

ECMA-262 標(biāo)準(zhǔn) 第6版。計(jì)劃以后每年發(fā)布一次標(biāo)準(zhǔn)，使用年份作為標(biāo)準(zhǔn)的版本。因?yàn)楫?dāng)前版本是在2015年發(fā)布的，所以又稱ECMAScript 2015。ECMA 的全稱是 European Computer Manufacturers Association(歐洲計(jì)算機(jī)制造商協(xié)會(huì))。ECMA-262 被 ISO 國(guó)際標(biāo)準(zhǔn)化組織采納為 ISO/IEC 16262:2011

日常討論的 JavaScript 通常還包括 DOM(文檔對(duì)象模型)、BOM(瀏覽器對(duì)象模型)，而 ES6 不包含這些。

主流框架全面轉(zhuǎn)向 ES6

Angular 2

ReactJs

koa

兼容性 對(duì)比表格

本節(jié)介紹一些廣為人知的 ES6 “明星”特性，也就是討論 ES6 時(shí)經(jīng)常提及的一些新特性。當(dāng)然 ES6 并不僅限于這些，還包括很多其他有用的特性，會(huì)在本系列的其他文章中介紹。

原來(lái)的 javascript 中沒(méi)有塊級(jí)作用域，只有函數(shù)級(jí)作用域。ES6 中新增了 let 命令，使用 let 命令代替 var 命令聲明變量，具有塊級(jí)作用域。

函數(shù)級(jí)作用域

function test() {
  var hello = "world";
  console.log(hello);
}
test(); // "world"
console.log(hello); // Error: hello is not defined

塊級(jí)作用域

var 命令

if(true) {
  var hello = "world";
  console.log(hello); // "world"
}
console.log(hello); // "world"

let 命令

if(true) {
  let hello = "world";
  console.log(hello); // "world"
}
console.log(hello); // Error: hello is not defined

使用 const 命令聲明常量

const STATUS_NOT_FOUND = 404;

常量的值為只讀，不能修改

STATUS_NOT_FOUND = 200;
// SyntaxError: "STATUS_NOT_FOUND" is read-only

傳統(tǒng)的字符串

var name = "es6";

var sayhello = "hello, 
my name is " + name + ".";

console.log(sayhello); 

輸出：

hello, my name is es6.

ES6 模板字符串

var name = "es6";

var sayhello = `hello,
my name is ${name}.`;

console.log(sayhello);

輸出：

hello,
my name is es6.

空格和換行都會(huì)被保留

允許使用 => 定義函數(shù)，箭頭函數(shù)自動(dòng)綁定當(dāng)前上下文 this。

x => x+1

等同于匿名函數(shù)

function (x) {
  return x + 1;
}

多個(gè)參數(shù)：

(a,b) => a+b

等同于

function (a, b) {
  return a + b;
}

多行函數(shù)體：

(a,b) => {
    console.log(a + b);
    return a + b;
}

等同于

function (a, b) {
    console.log(a + b);
    return a + b;
}

原生的 Promise 實(shí)現(xiàn)，不再需要 bluebird 或 Q+。

Generator 生成器允許你通過(guò)寫(xiě)一個(gè)可以保存自己狀態(tài)的的簡(jiǎn)單函數(shù)來(lái)定義一個(gè)迭代算法。和 Generator 一起出現(xiàn)的通常還有 yield。

Generator 是一種可以停止并在之后重新進(jìn)入的函數(shù)。生成器的環(huán)境（綁定的變量）會(huì)在每次執(zhí)行后被保存，下次進(jìn)入時(shí)可繼續(xù)使用。generator 字面上是“生成器”的意思，在 ES6 里是迭代器生成器，用于生成一個(gè)迭代器對(duì)象。

function *gen() {
    yield "hello";
    yield "world";
    return true;
}

以上代碼定義了一個(gè)簡(jiǎn)單的 generator，看起來(lái)就像一個(gè)普通的函數(shù)，區(qū)別是function關(guān)鍵字后面有個(gè)*號(hào)，函數(shù)體內(nèi)可以使用yield語(yǔ)句進(jìn)行流程控制。

var iter = gen();
var a = iter.next();
console.log(a); // {value:"hello", done:false}
var b = iter.next();
console.log(b); // {value:"world", done:false}
var c = iter.next();
console.log(c); // {value:true, done:true}

當(dāng)執(zhí)行g(shù)en()的時(shí)候，并不執(zhí)行 generator 函數(shù)體，而是返回一個(gè)迭代器 Iterator。迭代器具有 next() 方法，每次調(diào)用 next() 方法，函數(shù)就執(zhí)行到y(tǒng)ield語(yǔ)句的地方。next() 方法返回一個(gè)對(duì)象，其中value屬性表示 yield 關(guān)鍵詞后面表達(dá)式的值，done 屬性表示是否遍歷結(jié)束。generator 生成器通過(guò) next 和 yield 的配合實(shí)現(xiàn)流程控制，上面的代碼執(zhí)行了三次 next() ，generator 函數(shù)體才執(zhí)行完畢。

在 JavaScript 中引入 OO 面向?qū)ο蟆?shí)際上是語(yǔ)法糖，只是看上去更面向?qū)ο蠖?。也有觀點(diǎn)極力反對(duì) Class，認(rèn)為 Class 隱藏了 JavaScript 本身原型鏈的語(yǔ)言特性，使其更難理解。

一半以上庫(kù)是按 OO/class 方式寫(xiě)的，除了jQuery之外，幾乎每個(gè)“嚴(yán)肅”的JS基礎(chǔ)庫(kù)都有一個(gè)Class實(shí)現(xiàn)，工具、IDE 更容易識(shí)別，JavaScript 引擎性能優(yōu)化。---- johnhax

ES5

function Point(x,y){
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return "(" + this.x + ", " + this.y + ")";
}

ES6

class Point {

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return "("+this.x+", "+this.y+")";
  }

}

許多JS框架都會(huì)實(shí)現(xiàn)一套自己的 module/loader 機(jī)制。反復(fù)造輪子這也就罷了，更大的問(wèn)題在于，這些輪子互相都是不兼容的。結(jié)果就造成了JS社區(qū)的分化和內(nèi)耗，阻礙了JS庫(kù)和組件在較細(xì)粒度上的競(jìng)爭(zhēng)和發(fā)展，JS框架和庫(kù)的切換成了強(qiáng)迫開(kāi)發(fā)者做出非此即彼的選擇。缺乏語(yǔ)言級(jí)別的 module，其惡果就是既沒(méi)有足夠的標(biāo)準(zhǔn)庫(kù)，也很難像其他語(yǔ)言一樣通過(guò)叢林法則發(fā)展出事實(shí)標(biāo)準(zhǔn)庫(kù)。 ---- johnhax

社區(qū)主流解決方案有 CommonJS 和 AMD，分別用于服務(wù)器端和瀏覽器端，瀏覽器端還有 seajs 遵循的 CMD。

CommonJS

exports.firstName = "mei";
exports.lastName = "qingguang";
exports.year = 1988;

// or

module.exports = {
    firstName: "mei",
    lastName: "qingguang",
    year: 1988
}

// or

module.exports = function() {
    // do something
}

AMD

define(["./a", "./b"], function(a, b) { // 依賴必須一開(kāi)始就寫(xiě)好
    a.doSomething()
    // 此處略去 100 行
    b.doSomething()
    // ...
    
    exports.action = function() {};
}) 

CMD

define(function(require, exports, module) {
    var a = require("./a")
    a.doSomething()
    // 此處略去 100 行
    var b = require("./b") // 依賴可以就近書(shū)寫(xiě)
    b.doSomething()
    // ... 
    
    exports.action = function() {};
})

ES6 Module

export 命令 和 import 命令

export var firstName = "mei";
export var lastName = "qingguang";
export var year = 1988;

import {firstName, lastName, year} from "./profile"

console.log(firstName, lastName, year)

模塊整體輸出

var firstName = "mei";
var lastName = "qingguang";
var year = 1988;

export {firstName, lastName, year};

import * as Profile from "./profile"

console.log(Profile.firstName, Profile.lastName, Profile.year)

export default 整體輸出

export default function() {
    console.log("My name is mei qingguang");
};

import sayMyName from "./profile" 

console.log(sayMyName())

可以在 Node.js 和 io.js 中使用部分 ES6 特性。Node.js 和 io.js 都是使用 V8 引擎作為 JavaScript 運(yùn)行環(huán)境，io.js 集成了更高版本的 V8 引擎，因此可以比 Node.js 支持更多的 ES6 特性。

在 Node.js 中，需要使用 --harmony 參數(shù)開(kāi)啟 ES6 特性，包括所有已完成、待完成和修訂中的特性。為了避免用到那些廢棄的特性，可以通過(guò)加類似 --harmony_generators 參數(shù)開(kāi)啟特定的特性。

而在 io.js 中，所有已完成的穩(wěn)定 ES6 特性都已經(jīng)默認(rèn)開(kāi)啟，不需要加任何運(yùn)行時(shí)參數(shù)。而待完成和修訂中的特性也可以通過(guò)特定的參數(shù)開(kāi)啟。

io.js 默認(rèn)開(kāi)啟了以下 ES6 特性：

block scoping

let

const

function-in-blocks

Classes

Collections

Map

WeakMap

Set

WeakSet

Generators

Binary and Octal literals

Object literal extensions

Promises

New String methods

Symbols

Template strings

有兩個(gè)著名的編譯器，能將 ES6 代碼編譯成 ES5 代碼，本節(jié)只介紹 Babel。

Babel

Traceur

Babel 從根本上講是一個(gè)平臺(tái)，這是它與 compile-to-JS 語(yǔ)言 CoffeeScript 和 TypeScript 最大的不同。Babel 的插件系統(tǒng)允許開(kāi)發(fā)者自定義代碼轉(zhuǎn)換器并插入到編譯過(guò)程。Babel 還能提升 JavaScript 的執(zhí)行速度，在編譯時(shí)進(jìn)行性能優(yōu)化。

編譯單個(gè)文件

babel script.js --out-file script-compiled.js

監(jiān)聽(tīng)文件變化

babel script.js --watch --out-file script-compiled.js

編譯整個(gè)文件夾

babel src --out-dir lib

使用 source map，方便調(diào)試

babel script.js --out-file script-compiled.js --source-maps

使用 babel-node 命令代替 node 命令，實(shí)時(shí)編譯并執(zhí)行 ES6 代碼。不要在生產(chǎn)環(huán)境使用 babel-node 命令，它非常耗內(nèi)存，并且會(huì)拖慢應(yīng)用的性能。

node app.js

babel-node app.js

使用 require 鉤子，可以讓你的應(yīng)用 require 模塊時(shí)自動(dòng)編譯 ES6 代碼。例如：

run.js

require("babel/register")
require("./app.js")

將 run.js 作為整個(gè)應(yīng)用的入口，就可以在 app.js 和其他業(yè)務(wù)代碼中編寫(xiě) ES6 代碼，當(dāng)代碼被 require 進(jìn)來(lái)時(shí)，自動(dòng)編譯成 ES5 代碼。

ES6 Katas