最新ES8特性概述

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

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 - 取得值########### # ##

以上是最新ES8特性概述的詳細內容。更多資訊請關注PHP中文網其他相關文章！