ECMAScript 2017(ES8)特性概述

segmentfault發表於2017-07-24

 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 - 獲取值

相關文章