摘要：以下簡(jiǎn)稱是語(yǔ)言的下一代標(biāo)準(zhǔn)。因?yàn)楫?dāng)前版本的是在年發(fā)布的，所以又稱。命令用于規(guī)定模塊的對(duì)外接口，命令用于輸入其他模塊提供的功能。需要特別注意的是，命令規(guī)定的是對(duì)外的接口，必須與模塊內(nèi)部的變量建立一一對(duì)應(yīng)關(guān)系。

ECMAScript 6（以下簡(jiǎn)稱ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)。因?yàn)楫?dāng)前版本的ES6是在2015年發(fā)布的，所以又稱ECMAScript 2015。

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
這些是ES6最常用的幾個(gè)語(yǔ)法，基本上學(xué)會(huì)它們，我們就可以走遍天下都不怕啦！我會(huì)用最通俗易懂的語(yǔ)言和例子來(lái)講解它們，保證一看就懂，一學(xué)就會(huì)。

let, const

這兩個(gè)的用途與var類似，都是用來(lái)聲明變量的，但在實(shí)際運(yùn)用中他倆都有各自的特殊用途。
首先來(lái)看下面這個(gè)例子：

var name = "zach"

while (true) {
    var name = "obama"
    console.log(name)  //obama
    break
}

console.log(name)  //obama

使用var兩次輸出都是obama，這是因?yàn)镋S5只有全局作用域和函數(shù)作用域，沒有塊級(jí)作用域，這帶來(lái)很多不合理的場(chǎng)景。第一種場(chǎng)景就是你現(xiàn)在看到的內(nèi)層變量覆蓋外層變量。而let則實(shí)際上為JavaScript新增了塊級(jí)作用域。用它所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。

let name = "zach"

while (true) {
    let name = "obama"
    console.log(name)  //obama
    break
}

console.log(name)  //zach

另外一個(gè)var帶來(lái)的不合理場(chǎng)景就是用來(lái)計(jì)數(shù)的循環(huán)變量泄露為全局變量，看下面的例子：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代碼中，變量i是var聲明的，在全局范圍內(nèi)都有效。所以每一次循環(huán)，新的i值都會(huì)覆蓋舊值，導(dǎo)致最后輸出的是最后一輪的i的值。而使用let則不會(huì)出現(xiàn)這個(gè)問(wèn)題。

ES6學(xué)習(xí)筆記--let和const命令

export 命令
模塊功能主要由兩個(gè)命令構(gòu)成：export和import。export命令用于規(guī)定模塊的對(duì)外接口，import命令用于輸入其他模塊提供的功能。

一個(gè)模塊就是一個(gè)獨(dú)立的文件。該文件內(nèi)部的所有變量，外部無(wú)法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量，就必須使用export關(guān)鍵字輸出該變量。下面是一個(gè) JS 文件，里面使用export命令輸出變量。

// profile.js
export var firstName = "Michael";
export var lastName = "Jackson";
export var year = 1958;

上面代碼是profile.js文件，保存了用戶信息。ES6 將其視為一個(gè)模塊，里面用export命令對(duì)外部輸出了三個(gè)變量。

export的寫法，除了像上面這樣，還有另外一種。

// profile.js
var firstName = "Michael";
var lastName = "Jackson";
var year = 1958;

export {firstName, lastName, year};

上面代碼在export命令后面，使用大括號(hào)指定所要輸出的一組變量。它與前一種寫法（直接放置在var語(yǔ)句前）是等價(jià)的，但是應(yīng)該優(yōu)先考慮使用這種寫法。因?yàn)檫@樣就可以在腳本尾部，一眼看清楚輸出了哪些變量。

export命令除了輸出變量，還可以輸出函數(shù)或類（class）。

export function multiply(x, y) {
  return x * y;
};

上面代碼對(duì)外輸出一個(gè)函數(shù)multiply。

通常情況下，export輸出的變量就是本來(lái)的名字，但是可以使用as關(guān)鍵字重命名。

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

上面代碼使用as關(guān)鍵字，重命名了函數(shù)v1和v2的對(duì)外接口。重命名后，v2可以用不同的名字輸出兩次。

需要特別注意的是，export命令規(guī)定的是對(duì)外的接口，必須與模塊內(nèi)部的變量建立一一對(duì)應(yīng)關(guān)系。

// 報(bào)錯(cuò)
export 1;

// 報(bào)錯(cuò)
var m = 1;
export m;

上面兩種寫法都會(huì)報(bào)錯(cuò)，因?yàn)闆]有提供對(duì)外的接口。第一種寫法直接輸出1，第二種寫法通過(guò)變量m，還是直接輸出1。1只是一個(gè)值，不是接口。正確的寫法是下面這樣。

// 寫法一
export var m = 1;

// 寫法二
var m = 1;
export {m};

// 寫法三
var n = 1;
export {n as m};

上面三種寫法都是正確的，規(guī)定了對(duì)外的接口m。其他腳本可以通過(guò)這個(gè)接口，取到值1。它們的實(shí)質(zhì)是，在接口名與模塊內(nèi)部變量之間，建立了一一對(duì)應(yīng)的關(guān)系。

同樣的，function和class的輸出，也必須遵守這樣的寫法。

// 報(bào)錯(cuò)
function f() {}
export f;

// 正確
export function f() {};

// 正確
function f() {}
export {f};

另外，export語(yǔ)句輸出的接口，與其對(duì)應(yīng)的值是動(dòng)態(tài)綁定關(guān)系，即通過(guò)該接口，可以取到模塊內(nèi)部實(shí)時(shí)的值。

export var foo = "bar";
setTimeout(() => foo = "baz", 500);

上面代碼輸出變量foo，值為bar，500毫秒之后變成baz。

這一點(diǎn)與 CommonJS 規(guī)范完全不同。CommonJS 模塊輸出的是值的緩存，不存在動(dòng)態(tài)更新，詳見下文《ES6模塊加載的實(shí)質(zhì)》一節(jié)。

最后，export命令可以出現(xiàn)在模塊的任何位置，只要處于模塊頂層就可以。如果處于塊級(jí)作用域內(nèi)，就會(huì)報(bào)錯(cuò)，下一節(jié)的import命令也是如此。這是因?yàn)樘幱跅l件代碼塊之中，就沒法做靜態(tài)優(yōu)化了，違背了ES6模塊的設(shè)計(jì)初衷。

function foo() {
  export default "bar" // SyntaxError
}
foo()

上面代碼中，export語(yǔ)句放在函數(shù)之中，結(jié)果報(bào)錯(cuò)。

使用export命令定義了模塊的對(duì)外接口以后，其他 JS 文件就可以通過(guò)import命令加載這個(gè)模塊。

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

function setName(element) {
  element.textContent = firstName + " " + lastName;
}

上面代碼的import命令，用于加載profile.js文件，并從中輸入變量。import命令接受一對(duì)大括號(hào)，里面指定要從其他模塊導(dǎo)入的變量名。大括號(hào)里面的變量名，必須與被導(dǎo)入模塊（profile.js）對(duì)外接口的名稱相同。

如果想為輸入的變量重新取一個(gè)名字，import命令要使用as關(guān)鍵字，將輸入的變量重命名。

import { lastName as surname } from "./profile";

import后面的from指定模塊文件的位置，可以是相對(duì)路徑，也可以是絕對(duì)路徑，.js路徑可以省略。如果只是模塊名，不帶有路徑，那么必須有配置文件，告訴 JavaScript 引擎該模塊的位置。

import {myMethod} from "util";

上面代碼中，util是模塊文件名，由于不帶有路徑，必須通過(guò)配置，告訴引擎怎么取到這個(gè)模塊。

注意，import命令具有提升效果，會(huì)提升到整個(gè)模塊的頭部，首先執(zhí)行。

foo();

import { foo } from "my_module";

上面的代碼不會(huì)報(bào)錯(cuò)，因?yàn)閕mport的執(zhí)行早于foo的調(diào)用。這種行為的本質(zhì)是，import命令是編譯階段執(zhí)行的，在代碼運(yùn)行之前。

由于import是靜態(tài)執(zhí)行，所以不能使用表達(dá)式和變量，這些只有在運(yùn)行時(shí)才能得到結(jié)果的語(yǔ)法結(jié)構(gòu)。

// 報(bào)錯(cuò)
import { "f" + "oo" } from "my_module";

// 報(bào)錯(cuò)
let module = "my_module";
import { foo } from module;

// 報(bào)錯(cuò)
if (x === 1) {
  import { foo } from "module1";
} else {
  import { foo } from "module2";
}

上面三種寫法都會(huì)報(bào)錯(cuò)，因?yàn)樗鼈冇玫搅吮磉_(dá)式、變量和if結(jié)構(gòu)。在靜態(tài)分析階段，這些語(yǔ)法都是沒法得到值的。

最后，import語(yǔ)句會(huì)執(zhí)行所加載的模塊，因此可以有下面的寫法。

import "lodash";

上面代碼僅僅執(zhí)行l(wèi)odash模塊，但是不輸入任何值。

如果多次重復(fù)執(zhí)行同一句import語(yǔ)句，那么只會(huì)執(zhí)行一次，而不會(huì)執(zhí)行多次。

import "lodash";
import "lodash";

上面代碼加載了兩次lodash，但是只會(huì)執(zhí)行一次。

import { foo } from "my_module";
import { bar } from "my_module";

// 等同于
import { foo, bar } from "my_module";

上面代碼中，雖然foo和bar在兩個(gè)語(yǔ)句中加載，但是它們對(duì)應(yīng)的是同一個(gè)my_module實(shí)例。也就是說(shuō)，import語(yǔ)句是 Singleton 模式。

學(xué)習(xí)ES6，這里介紹兩個(gè)比較好的學(xué)習(xí)資料：
阮一峰老師寫的入門書 ECMAScript 6 入門
Zachary_Wang簡(jiǎn)書分享的內(nèi)容：30分鐘掌握ES6/ES2015核心內(nèi)容
前端基礎(chǔ)進(jìn)階（九）：詳解面向?qū)ο?、?gòu)造函數(shù)、原型與原型鏈