ECMAScript 2017（ES8）特性概述 以及ES8和ES7 ES6的區別

ECMAScript 2017（ES8）特性概述 整理自 ES8 was Released and here are its Main New Features，概括於筆者的 現代 JavaScript 開發：語法基礎與實踐技巧系列文章中；也歡迎關注 前端每週清單系列得到一手資訊。

ECMAScript 2017（ES8）Features

ECMAScript 2017 或 ES8 與 2017 年六月底由 TC39 正式發佈，能夠在這裏瀏覽完整的版本；而 ES8 中表明性的特徵包括了字符串填充、對象值遍歷、對象的屬性描述符獲取、 函數參數列表與調用中的尾部逗號、異步函數、共享內存與原子操做等。

字符串填充

ES8 中添加了內置的字符串填充函數，分別爲 padStart 與 padEnd，該函數可以經過填充字符串的首部或者尾部來保證字符串達到固定的長度；開發者能夠指定填充的字符串或者使用默認的空格，函數的聲明以下：

str.padStart(targetLength [, padString])

str.padEnd(targetLength [, padString])
複製代碼

如上所示，函數的首個參數爲目標長度，即最終生成的字符串長度；第二個參數便是指定的填充字符串：

'es8'.padStart(2);          // 'es8'
'es8'.padStart(5);          // ' es8'
'es8'.padStart(6, 'woof');  // 'wooes8'
'es8'.padStart(14, 'wow');  // 'wowwowwowwoes8'
'es8'.padStart(7, '0');     // '0000es8'
'es8'.padEnd(2);          // 'es8'
'es8'.padEnd(5);          // 'es8 '
'es8'.padEnd(6, 'woof');  // 'es8woo'
'es8'.padEnd(14, 'wow');  // 'es8wowwowwowwo'
'es8'.padEnd(7, '6');     // 'es86666'
複製代碼

對象值遍歷

Object.values 函數會返回指定對象的可枚舉的屬性值數組，數組中值順序與 for-in 循環保持一致，函數的聲明爲：

Object.values(obj)
複製代碼

首個參數 obj 即爲須要遍歷的目標對象，它能夠爲某個對象或者數組（數組能夠看作鍵爲下標的對象）：

const obj = { x: 'xxx', y: 1 };
Object.values(obj); // ['xxx', 1]

const obj = ['e', 's', '8']; // same as { 0: 'e', 1: 's', 2: '8' };
Object.values(obj); // ['e', 's', '8']

// when we use numeric keys, the values returned in a numerical 
// order according to the keys
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.values(obj); // ['yyy', 'zzz', 'xxx']
Object.values('es8'); // ['e', 's', '8']
複製代碼

而 Object.entries 方法則會將某個對象的可枚舉屬性與值按照二維數組的方式返回，數組中順序與 Object.values 保持一致，該函數的聲明與使用爲：

const obj = { x: 'xxx', y: 1 };
Object.entries(obj); // [['x', 'xxx'], ['y', 1]]

const obj = ['e', 's', '8'];
Object.entries(obj); // [['0', 'e'], ['1', 's'], ['2', '8']]

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]
Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]
複製代碼

對象的屬性描述符獲取

getOwnPropertyDescriptors 函數會返回指定對象的某個指定屬性的描述符；該屬性必須是對象本身定義而不是繼承自原型鏈，函數的聲明爲：

Object.getOwnPropertyDescriptor(obj, prop)
複製代碼

obj 即爲源對象，而 prop 即爲須要查看的屬性名；結果中包含的鍵可能有 configurable、enumerable、writable、get、set 以及 value。

const obj = { get es8() { return 888; } };
Object.getOwnPropertyDescriptor(obj, 'es8');
// {
//   configurable: true,
//   enumerable: true,
//   get: function es8(){}, //the getter function
//   set: undefined
// }
複製代碼

函數參數列表與調用中的尾部逗號

該特性容許咱們在定義或者調用函數時添加尾部逗號而不報錯：

function es8(var1, var2, var3,) {
  // ...
}
es8(10, 20, 30,);
複製代碼

異步函數

ES8 中容許使用 async/await 語法來定義與執行異步函數，async 關鍵字會返回某個 AsyncFunction 對象；在內部實現中雖然異步函數與迭代器的實現原理相似，可是其並不會被轉化爲迭代器函數：

function fetchTextByPromise() {
  return new Promise(resolve => { 
    setTimeout(() => { 
      resolve("es8");
    }, 2000);
  });
}
async function sayHello() { 
  const externalFetchedText = await fetchTextByPromise();
  console.log(`Hello, ${externalFetchedText}`); // Hello, es8
}
sayHello();

console.log(1);
sayHello();
console.log(2);

// 調用結果
1 // immediately
2 // immediately
Hello, es8 // after 2 seconds
複製代碼

共享內存與原子操做

共享內存容許多個線程併發讀寫數據，而原子操做則可以進行併發控制，確保多個存在競爭關係的線程順序執行。本部分則介紹了新的構造器 SharedArrayBuffer 與包含靜態方法的命名空間對象 Atomics。Atomic 對象相似於 Math，咱們沒法直接建立其實例，而只能使用其提供的靜態方法：

• add /sub - 增長或者減去某個位置的某個值
• and / or /xor - 進行位操做
• load - 獲取值

相關學習資料移步：