Javascript ES6學習

ECMAScript 6（如下簡稱ES6）是JavaScript語言的下一代標準。由於當前版本的ES6是在2015年發佈的，因此又稱ECMAScript 2015。

最經常使用的ES6特性

var,let,const區別

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命令

class, extends, super

export、import

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語句放在函數之中，結果報錯。

import 命令

使用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核心內容
前端基礎進階（九）：詳解面向對象、構造函數、原型與原型鏈