ECMAScript 6

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

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

各種概念性的特性都被納入標準，如 Promise、模塊化 。

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

慕課網針對 ES6 也有對應的 Wiki教程，這個課程講解比較全面，使用 ES5 與 ES6 做對比的方式進行的講解，想全面掌握的同學可以參閱。

1. 區(qū)別體驗

很多資料會把 ES6 描述的較難學習，實則還是語言相關的知識，他在之前的基礎上，對語法、全局對象、特性等做了擴充。

如：變量可以采用 let 關鍵字聲明。

1.1 let

let 是 ES6 中提供了可以聲明變量的關鍵字。

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ā)現在 if 之外，base1 還是能被訪問到的，但是 base2 卻不行。

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

1.2 對象簡潔表示法

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

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

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

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

// 在 ES6 中
function getInfo() {
  // 通過某種方式拿到的數據
  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. 兼容性

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

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

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

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

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

3. 小結

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

現在找前端崗位的工作，ES6 是必備技能，務必要掌握。

慕課網針對 ES6 也有對應的 Wiki，相關知識點可以參閱，相信閱讀完會有更多收獲;