ECMAScript 2017（ES8）特性概述

Kyxy 發(fā)布于2019-08-21 11:46 / 580人閱讀

摘要：特性概述整理自，歸納于筆者的現(xiàn)代開發(fā)語法基礎(chǔ)與實踐技巧系列文章中也歡迎關(guān)注前端每周清單系列獲得一手資訊。本部分則介紹了新的構(gòu)造器與包含靜態(tài)方法的命名空間對象。

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

ECMAScript 2017（ES8）Features

ECMAScript 2017 或 ES8 與 2017 年六月底由 TC39 正式發(fā)布，可以在這里瀏覽完整的版本；而 ES8 中代表性的特征包括了字符串填充、對象值遍歷、對象的屬性描述符獲取、函數(shù)參數(shù)列表與調(diào)用中的尾部逗號、異步函數(shù)、共享內(nèi)存與原子操作等。

字符串填充

ES8 中添加了內(nèi)置的字符串填充函數(shù)，分別為 padStart 與 padEnd，該函數(shù)能夠通過填充字符串的首部或者尾部來保證字符串達到固定的長度；開發(fā)者可以指定填充的字符串或者使用默認的空格，函數(shù)的聲明如下：

str.padStart(targetLength [, padString])

str.padEnd(targetLength [, padString])

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

"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 函數(shù)會返回指定對象的可枚舉的屬性值數(shù)組，數(shù)組中值順序與 for-in 循環(huán)保持一致，函數(shù)的聲明為：

Object.values(obj)

首個參數(shù) obj 即為需要遍歷的目標對象，它可以為某個對象或者數(shù)組（數(shù)組可以看做鍵為下標的對象）：

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 方法則會將某個對象的可枚舉屬性與值按照二維數(shù)組的方式返回，數(shù)組中順序與 Object.values 保持一致，該函數(shù)的聲明與使用為：

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 函數(shù)會返回指定對象的某個指定屬性的描述符；該屬性必須是對象自己定義而不是繼承自原型鏈，函數(shù)的聲明為：

Object.getOwnPropertyDescriptor(obj, prop)

obj 即為源對象，而 prop 即為需要查看的屬性名；結(jié)果中包含的鍵可能有 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
// }

函數(shù)參數(shù)列表與調(diào)用中的尾部逗號

該特性允許我們在定義或者調(diào)用函數(shù)時添加尾部逗號而不報錯：

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

異步函數(shù)

ES8 中允許使用 async/await 語法來定義與執(zhí)行異步函數(shù)，async 關(guān)鍵字會返回某個 AsyncFunction 對象；在內(nèi)部實現(xiàn)中雖然異步函數(shù)與迭代器的實現(xiàn)原理類似，但是其并不會被轉(zhuǎn)化為迭代器函數(shù)：

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);

// 調(diào)用結(jié)果
1 // immediately
2 // immediately
Hello, es8 // after 2 seconds

共享內(nèi)存與原子操作

共享內(nèi)存允許多個線程并發(fā)讀寫數(shù)據(jù)，而原子操作則能夠進行并發(fā)控制，確保多個存在競爭關(guān)系的線程順序執(zhí)行。本部分則介紹了新的構(gòu)造器 SharedArrayBuffer 與包含靜態(tài)方法的命名空間對象 Atomics。Atomic 對象類似于 Math，我們無法直接創(chuàng)建其實例，而只能使用其提供的靜態(tài)方法：

add /sub - 增加或者減去某個位置的某個值

and / or /xor - 進行位操作

load - 獲取值