ECMAScript7/8/9/Next

ES7

• Array.prototype.includes

//es5使用indexOf檢查數組中是否存在某個元素
let a = [1,2,3,4,5,NaN];
a.indexOf(6);//-1,返回數值類型

// includes
console.log(a.includes(1));//true，布爾類型，對if語句更友好
console.log(a.includes(1,2));//false

//能查找數組中的NaN
console.log(ary1.indexOf(NaN))//-1
console.log(ary1.includes(NaN))//true

//能查找數組中的undefined
var ary1 = new Array(3);
console.log(ary1.indexOf(undefined));//-1
console.log(ary1.includes(undefined))//true複製代碼

• 求冪運算符

Math.pow(4,2)===4**2;//true   函數中的中綴形式複製代碼

ES8

• String.prototype.padStart()

//從字符串的開頭開始填充
//第一個參數，表示填充的目標長度；
//第二個參數可選，表示填充用的字符串
'abc'.padStart(10);         // " abc"
'abc'.padStart(10, "foo");  // "foofoofabc"複製代碼

• String.prototype.padEnd()

//從字符串的末尾開始填充
//第一個參數，表示填充的目標長度；
//第二個參數可選，表示填充用的字符串
'abc'.padEnd(10);          // "abc "
'abc'.padEnd(10, "foo");   // "abcfoofoof"複製代碼

• Object.values()

//返回對象自身屬性值的數組
const person = { name: 'Fred', age: 87 }
Object.values(person) // ['Fred', 87]複製代碼

• Object.entries()

//將對象的每一個屬性和屬性值轉換成數組
 const person = { name: 'Fred', age: 87 }
 Object.entries(person) // [['name', 'Fred'], ['age', 87]]

 const people = ['Fred', 'Tony']
 Object.entries(people) // [['0', 'Fred'], ['1', 'Tony']]複製代碼

• Object.getOwnPropertyDescriptors()

//全部自身屬性的描述對象如：configurable, enumerable, writable, get, set and value
var obj1 = { x: 'xxx', y: 1 };
Object.getOwnPropertyDescriptors(obj1);複製代碼

• 結尾逗號

// 參數定義時function foo(
    param1,
    param2,) {}

// 函數調用時foo(
    'abc',
    'def',);

// 對象中let obj = {
    first: 'Jane',
    last: 'Doe',};

// 數組中let arr = [
    'red',
    'green',
    'blue',];複製代碼

• Async/Await

//當編譯器遇到標定的函數中的await關鍵字時，要暫時中止運行，帶到await標定的函數處理完畢後，再進行相應操
做
async function asyncFunc() {
    const result = await otherAsyncFunc();
    console.log(result);
}複製代碼

• SharedArrayBuffer

  • 容許在多個 workers 和主線程之間共享 SharedArrayBuffer 對象的字節

  • 能夠更快地在 workers 之間共享數據

  • workers 之間的協調變得更簡單和更快（與 postMessage() 相比）

  • 請注意，因爲可以輕易地利用《邊信道（side-channel）讀取未受權內存的攻擊技術》中提到的Spectre漏洞——一種利用現代 CPU 使用的執行優化功能的新攻擊技術， SharedArrayBuffer 功能將在 Chrome 和 FireFox 的新版本中禁用，並將逐漸被全部瀏覽器禁用

// main.jsconst worker = new Worker('worker.js');
// 要分享的bufferconst sharedBuffer = new SharedArrayBuffer( // (A)
    10 * Int32Array.BYTES_PER_ELEMENT); // 10 elements
// 使用Worker共用sharedBuffer
worker.postMessage({sharedBuffer}); // clone
// 僅限本地使用const sharedArray = new Int32Array(sharedBuffer); // (B)

// worker.js
self.addEventListener('message', function (event) {
    const {sharedBuffer} = event.data;
    const sharedArray = new Int32Array(sharedBuffer); // (A)
    // ···});複製代碼

• Atomics: 安全訪問共享數據

• 正則表達式Named group

let re1 = /(\d{4})-(\d{2})-(\d{2})/;
let result1 = re1.exec('2015-01-02');
console.log(result1);
// [ '2015-01-02', '2015', '01', '02', index: 0, input: '2015-01-02' ]

// ECMAScript 2018
let re2 = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
let result2 = re2.exec('2015-01-02');
console.log(result2);

// ["2015-01-02", "2015", "01", "02", index: 0, input: "2015-01-02",
//    groups: {year: "2015", month: "01", day: "02"}
// ]

console.log(result2.groups.year); // 2015複製代碼

ES9

• 異步迭代器

  • 異步迭代器和常規迭代器的工做方式很是類似，異步迭代器對象的next()方法返回了一個Promise

async function example() {
  // 普通迭代器:
  const iterator = createNumberIterator();
  iterator.next(); // Object {value: 1, done: false}
  iterator.next(); // Object {value: 2, done: false}
  iterator.next(); // Object {value: 3, done: false}
  iterator.next(); // Object {value: undefined, done: true}

  // 異步迭代器:
  const asyncIterator = createAsyncNumberIterator();
  const p = asyncIterator.next(); // Promise
  await p;// Object {value: 1, done: false}
  await asyncIterator.next(); // Object {value: 2, done: false}
  await asyncIterator.next(); // Object {value: 3, done: false}
  await asyncIterator.next(); // Object {value: undefined, done: true}}複製代碼

• Rest（...）/Spread

  • 在ES9中，爲對象提供了像數組同樣的rest參數和擴展運算符

  • 展開運算符，剩餘運算符

const obj = {
  a: 1,
  b: 2,
  c: 3}
  const { a, ...param } = obj;
  console.log(a)     //1
  console.log(param) //{b: 2, c: 3}


function foo({a, ...param}) {
  console.log(a);    //1
  console.log(param) //{b: 2, c: 3}}複製代碼

• Promise.prototype.finally()

//finally的回調總會被執行。
promise
  .then(result => {···})
  .catch(error => {···})
  .finally(() => {···});複製代碼

• 模板字符串修改

  • 移除對 ECMAScript 在帶標籤的模版字符串中轉義序列的語法限制。以前，\u開始一個 unicode 轉義，\x開始一個十六進制轉義，\後跟一個數字開始一個八進制轉義。這使得建立特定的字符串變得不可能，例如Windows文件路徑 C:\uuu\xxx\111。

  • 要取消轉義序列的語法限制，可在模板字符串以前使用標記函數String.raw。

console.log(`\\uuu\\xx\\11`);

`\u{54}`// "T"
String.raw`\u{54}`// "\u{54}"複製代碼

• Array.prototype.flat()

  • 按照一個可指定的深度遞歸遍歷數組，並將全部元素與遍歷到的子數組中的元素合併爲一個新數組返回

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity，可展開任意深度的嵌套數組
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]複製代碼

• Array.prototype.flatMap()

  • 方法首先使用映射函數映射每一個元素，而後將結果壓縮成一個新數組

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只會將 flatMap 中的函數返回的數組 「壓平」 一層
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]複製代碼

• Symbol.description

  • 一個只讀屬性，它會返回 Symbol 對象的可選描述的字符串

console.log(Symbol('desc').description);
// expected output: "desc"複製代碼

• Function.prototype.toString()

  • toString() 方法返回一個表示當前函數源代碼的字符串

function sum(a, b) {
  return a + b;
}

console.log(sum.toString());
// expected output: "function sum(a, b) { // return a + b; // }"

console.log(Math.abs.toString());
// expected output: "function abs() { [native code] }"複製代碼

• String.trimStart() & String.trimEnd()

  • trimStart() 方法從字符串的開頭刪除空格，trimLeft()是此方法的別名。

  • trimEnd() 方法從一個字符串的末端移除空白字符。trimRight() 是這個方法的別名

  • 以前有String.trim()

var greeting = ' Hello world! ';
console.log(greeting.trimEnd());
// expected output: " Hello world!";複製代碼

• Object.fromEntries()

  • 把鍵值對列表轉換爲一個對象

const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);

const obj = Object.fromEntries(entries);

console.log(obj);
// expected output: Object { foo: "bar", baz: 42 }複製代碼

• JSON Superset

  • 在 ES2019 以前不支持轉義行分隔符 (\u2028) 和段落分隔符 (\u2029) 字符，而且在解析過程當中會報錯: SyntaxError: Invalid or unexpected token

  • JSON 語法由 ECMA-404 定義並由 RFC 7159 永久修復，容許行分隔符 (\u2028) 和段落分隔符 (\u2029) 字符，直接出如今字符串中

const LS = "";
const PS = eval("'\u2029'");// SyntaxError: Invalid or unexpected token複製代碼

• Optional chaining(暫時不支持)

  • JavaScript 的 Optional chaining 在須要深度訪問嵌套對象屬性時就特別有用。

  • 當咱們在訪問對象的屬性前，咱們須要用 ?. 操做符來肯定該屬性是否存在

const theAddress = secondUser.address && secondUser.address.office;
console.log(theAddress); // undefined

const theAddress = secondUser?.address?.office; 
console.log(theAddress); // undefined

//肯定方法是否存在
const firstUser = users[0]; 
console.log(firstUser.sayName?.()); // 個人名字是 Olagunju Gbolahan
//若是方法名不存在的話，它會簡單的返回 undefined
console.log(firstUser.sayOccupation?.()); // undefined複製代碼