ECMAScript 6

2015年6月17日，ECMA國際組織發(fā)布了 ECMAScript 的第六版，該版本正式名稱為 ECMAScript 2015，但通常被稱為 ECMAScript 6 或者 ES6。(MDN)

ES6 的發(fā)布讓 JavaScript 的編寫體驗有了里程碑式的飛躍。

各種概念性的特性都被納入標(biāo)準(zhǔn)，如 Promise、模塊化 。

Google Chrome 瀏覽器支持絕大部分的 ES6 特性，可以直接在瀏覽器上體驗。

慕課網(wǎng)針對 ES6 也有對應(yīng)的 Wiki教程，這個課程講解比較全面，使用 ES5 與 ES6 做對比的方式進(jìn)行的講解，想全面掌握的同學(xué)可以參閱。

1. 區(qū)別體驗

很多資料會把 ES6 描述的較難學(xué)習(xí)，實則還是語言相關(guān)的知識，他在之前的基礎(chǔ)上，對語法、全局對象、特性等做了擴(kuò)充。

如：變量可以采用 let 關(guān)鍵字聲明。

1.1 let

let 是 ES6 中提供了可以聲明變量的關(guān)鍵字。

let number = 1;

console.log(number);

使用 let 聲明的變量，對上層作用域的污染更少。

let number = 10;

if (number < 20) {
  var base1 = 1;
  let base2 = 10;

  number = number + base1 + base2;
} else {
  number = 0;
}

console.log(base1); // 輸出：1
console.log(base2); // 輸出：ReferenceError: base2 is not defined

可以發(fā)現(xiàn)在 if 之外，base1 還是能被訪問到的，但是 base2 卻不行。

這是因為 ES6 引入了塊級作用域的概念，let 聲明的變量，只在塊級作用域內(nèi)有效。

1.2 對象簡潔表示法

在 ES6 之前，對象字面量的屬性一定要書寫上屬性值和屬性名。

在 ES6 中，如果對象的屬性名和存放屬性值的變量相同，則只需要寫一次。

// 在 ES5 中
function getInfo() {
  // 通過某種方式拿到的數(shù)據(jù)
  var username = '張三';
  var enemy = '羅老師';
  var gender = '男';
  var age = 12;

  return {
    username: username,
    enemy: enemy,
    gender: gender,
    age: age,
  };
}

// 在 ES6 中
function getInfo() {
  // 通過某種方式拿到的數(shù)據(jù)
  var username = '張三';
  var enemy = '羅老師';
  var gender = '男';
  var age = 12;

  return {
    username,
    enemy,
    gender,
    age,
  };
}

可以看到 ES6 使得代碼更清晰，也可以直接看出對象的屬性名和存放屬性值的變量是同名的。

同樣的，方法也提供了簡寫的方式：

var obj = {
  say() { // ES6
    console.log('說話');
  },
  walk: function() { // ES5
    console.log('走路');
  },
},

2. 兼容性

雖然目前還在維護(hù)的最新版的瀏覽器幾乎都支持了大部分 ES6 特性，但國內(nèi)生態(tài)還不允許直接將 ES6 代碼運(yùn)行于線上，所以就需要一定的解決方案，使開發(fā)者開發(fā)過程中全面使用 ES6，但是線上又是運(yùn)行 ES5、ES3 的代碼。

特性上會采用 shim 的方式，大部分情況下概念會將它與 polyfill 混用，可以理解成給瀏覽器打補(bǔ)丁，讓舊版的瀏覽器支持新版的特性，如 ES6 提供的 Object.assign 方法，舊版的瀏覽器是沒有的。通過 polyfill，使用 ES5 將剛該方法實現(xiàn)后，在放到 Object 對象下，變相的讓瀏覽器支持新特性。

但還有一些特性是 polyfill 很難解決的，特比是語法特性，如 let 關(guān)鍵字。

這些特性就會采用 編譯 的方式來解決，如將 let 替換成 var，這一塊最常用的工具目前是 babel。

所以如果項目是需要上線運(yùn)行，并且目標(biāo)用戶群體范圍非常廣，盡量不要上線 ES6 代碼，上線前也做好各個平臺的瀏覽器測試。

3. 小結(jié)

ES6 的出現(xiàn)，讓 JavaScript 的代碼質(zhì)量有了質(zhì)的飛躍，也解決、優(yōu)化了以前存在的許多問題。

現(xiàn)在找前端崗位的工作，ES6 是必備技能，務(wù)必要掌握。

慕課網(wǎng)針對 ES6 也有對應(yīng)的 Wiki，相關(guān)知識點(diǎn)可以參閱，相信閱讀完會有更多收獲;