摘要：以下簡稱是語言的下一代標準。因為當前版本的是在年發布的，所以又稱。命令用于規定模塊的對外接口，命令用于輸入其他模塊提供的功能。需要特別注意的是，命令規定的是對外的接口，必須與模塊內部的變量建立一一對應關系。

ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年發布的，所以又稱ECMAScript 2015。

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

let, const

這兩個的用途與var類似，都是用來聲明變量的，但在實際運用中他倆都有各自的特殊用途。
首先來看下面這個例子：

var name = "zach"

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

console.log(name)  //obama

使用var兩次輸出都是obama，這是因為ES5只有全局作用域和函數作用域，沒有塊級作用域，這帶來很多不合理的場景。第一種場景就是你現在看到的內層變量覆蓋外層變量。而let則實際上為JavaScript新增了塊級作用域。用它所聲明的變量，只在let命令所在的代碼塊內有效。

let name = "zach"

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

console.log(name)  //zach

另外一個var帶來的不合理場景就是用來計數的循環變量泄露為全局變量，看下面的例子：

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

上面代碼中，變量i是var聲明的，在全局范圍內都有效。所以每一次循環，新的i值都會覆蓋舊值，導致最后輸出的是最后一輪的i的值。而使用let則不會出現這個問題。

ES6學習筆記--let和const命令

export 命令
模塊功能主要由兩個命令構成：export和import。export命令用于規定模塊的對外接口，import命令用于輸入其他模塊提供的功能。

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

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

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

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

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

export {firstName, lastName, year};

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

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

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

上面代碼對外輸出一個函數multiply。

通常情況下，export輸出的變量就是本來的名字，但是可以使用as關鍵字重命名。

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

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

上面代碼使用as關鍵字，重命名了函數v1和v2的對外接口。重命名后，v2可以用不同的名字輸出兩次。

需要特別注意的是，export命令規定的是對外的接口，必須與模塊內部的變量建立一一對應關系。

// 報錯
export 1;

// 報錯
var m = 1;
export m;

上面兩種寫法都會報錯，因為沒有提供對外的接口。第一種寫法直接輸出1，第二種寫法通過變量m，還是直接輸出1。1只是一個值，不是接口。正確的寫法是下面這樣。

// 寫法一
export var m = 1;

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

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

上面三種寫法都是正確的，規定了對外的接口m。其他腳本可以通過這個接口，取到值1。它們的實質是，在接口名與模塊內部變量之間，建立了一一對應的關系。

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

// 報錯
function f() {}
export f;

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

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

另外，export語句輸出的接口，與其對應的值是動態綁定關系，即通過該接口，可以取到模塊內部實時的值。

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

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

這一點與 CommonJS 規范完全不同。CommonJS 模塊輸出的是值的緩存，不存在動態更新，詳見下文《ES6模塊加載的實質》一節。

最后，export命令可以出現在模塊的任何位置，只要處于模塊頂層就可以。如果處于塊級作用域內，就會報錯，下一節的import命令也是如此。這是因為處于條件代碼塊之中，就沒法做靜態優化了，違背了ES6模塊的設計初衷。

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

上面代碼中，export語句放在函數之中，結果報錯。

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

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

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

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

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

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

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

import {myMethod} from "util";

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

注意，import命令具有提升效果，會提升到整個模塊的頭部，首先執行。

foo();

import { foo } from "my_module";

上面的代碼不會報錯，因為import的執行早于foo的調用。這種行為的本質是，import命令是編譯階段執行的，在代碼運行之前。

由于import是靜態執行，所以不能使用表達式和變量，這些只有在運行時才能得到結果的語法結構。

// 報錯
import { "f" + "oo" } from "my_module";

// 報錯
let module = "my_module";
import { foo } from module;

// 報錯
if (x === 1) {
  import { foo } from "module1";
} else {
  import { foo } from "module2";
}

上面三種寫法都會報錯，因為它們用到了表達式、變量和if結構。在靜態分析階段，這些語法都是沒法得到值的。

最后，import語句會執行所加載的模塊，因此可以有下面的寫法。

import "lodash";

上面代碼僅僅執行lodash模塊，但是不輸入任何值。

如果多次重復執行同一句import語句，那么只會執行一次，而不會執行多次。

import "lodash";
import "lodash";

上面代碼加載了兩次lodash，但是只會執行一次。

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

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

上面代碼中，雖然foo和bar在兩個語句中加載，但是它們對應的是同一個my_module實例。也就是說，import語句是 Singleton 模式。

學習ES6，這里介紹兩個比較好的學習資料：
阮一峰老師寫的入門書 ECMAScript 6 入門
Zachary_Wang簡書分享的內容：30分鐘掌握ES6/ES2015核心內容
前端基礎進階（九）：詳解面向對象、構造函數、原型與原型鏈