ECMAScript 6

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

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

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

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

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

1. 區(qū)別體驗(yàn)

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

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

1.1 let

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

let number = 1;

console.log(number);

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

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 還是能被訪問(wèn)到的，但是 base2 卻不行。

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

1.2 對(duì)象簡(jiǎn)潔表示法

在 ES6 之前，對(duì)象字面量的屬性一定要書(shū)寫(xiě)上屬性值和屬性名。

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

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

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

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

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

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

同樣的，方法也提供了簡(jiǎn)寫(xiě)的方式：

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

2. 兼容性

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

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

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

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

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

3. 小結(jié)

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

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

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