2022發佈ECMAScript新特性盤點

Posted on 2022-07-04 by WalkonNet

引言

2022 年 6 月 22 日，第 123 屆 ECMA 大會批準瞭 ECMAScript 2022 語言規范，這意味著它現在正式成為標準。下面就來看看 ECMAScript 2022 新增瞭哪些特性！

總覽：

Top-level Await
Object.hasOwn()
at()
error.cause
正則表達式匹配索引
類的實例成員

1. Top-level Await

在ES2017中，引入瞭 async 函數和 await 關鍵字，以簡化 Promise 的使用，但是 await 關鍵字隻能在 async 函數內部使用。嘗試在異步函數之外使用 await 就會報錯：

SyntaxError – SyntaxError: await is only valid in async function。

頂層 await 允許我們在 async 函數外面使用 await 關鍵字。它允許模塊充當大型異步函數，通過頂層 await，這些 ECMAScript 模塊可以等待資源加載。這樣其他導入這些模塊的模塊在執行代碼之前要等待資源加載完再去執行。

由於 await 僅在 async 函數中可用，因此模塊可以通過將代碼包裝在 async 函數中來在代碼中包含 await：

  // a.js
  import fetch  from "node-fetch";
  let users;
  export const fetchUsers = async () => {
    const resp = await fetch('https://jsonplaceholder.typicode.com/users');
    users =  resp.json();
  }
  fetchUsers();
  export { users };
  // usingAwait.js
  import {users} from './a.js';
  console.log('users: ', users);
  console.log('usingAwait module');

我們還可以立即調用頂層async函數（IIAFE）：

import fetch  from "node-fetch";
  (async () => {
    const resp = await fetch('https://jsonplaceholder.typicode.com/users');
    users = resp.json();
  })();
  export { users };

這樣會有一個缺點，直接導入的 users 是 undefined，需要在異步執行完成之後才能訪問它：

// usingAwait.js
import {users} from './a.js';
console.log('users:', users); // undefined
setTimeout(() => {
  console.log('users:', users);
}, 100);
console.log('usingAwait module');

當然，這種方法並不安全，因為如果異步函數執行花費的時間超過100毫秒，它就不會起作用瞭，users 仍然是 undefined。

另一個方法是導出一個 promise，讓導入模塊知道數據已經準備好瞭：

//a.js
import fetch  from "node-fetch";
export default (async () => {
  const resp = await fetch('https://jsonplaceholder.typicode.com/users');
  users = resp.json();
})();
export { users };
//usingAwait.js
import promise, {users} from './a.js';
promise.then(() => { 
  console.log('usingAwait module');
  setTimeout(() => console.log('users:', users), 100); 
});

雖然這種方法似乎是給出瞭預期的結果，但是有一定的局限性：導入模塊必須瞭解這種模式才能正確使用它。

而頂層await就可以解決這些問題：

  // a.js
  const resp = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = resp.json();
  export { users};
  // usingAwait.js
  import {users} from './a.mjs';
  console.log(users);
  console.log('usingAwait module');

頂級 await 在以下場景中將非常有用：

動態加載模塊：

 const strings = await import(`/i18n/${navigator.language}`);

資源初始化：

const connection = await dbConnector();

依賴回退：

let translations;
try {
  translations = await import('https://app.fr.json');
} catch {
  translations = await import('https://fallback.en.json');
}

該特性的瀏覽器支持如下：

2. Object.hasOwn()

在ES2022之前，可以使用 Object.prototype.hasOwnProperty() 來檢查一個屬性是否屬於對象。

Object.hasOwn 特性是一種更簡潔、更可靠的檢查屬性是否直接設置在對象上的方法：

const example = {
  property: '123'
};
console.log(Object.prototype.hasOwnProperty.call(example, 'property'));
console.log(Object.hasOwn(example, 'property'));

該特性的瀏覽器支持如下：

3. at()

at() 是一個數組方法，用於通過給定索引來獲取數組元素。當給定索引為正時，這種新方法與使用括號表示法訪問具有相同的行為。當給出負整數索引時，就會從數組的最後一項開始檢索：

const array = [0,1,2,3,4,5];
console.log(array[array.length-1]);  // 5
console.log(array.at(-1));  // 5
console.log(array[array.lenght-2]);  // 4
console.log(array.at(-2));  // 4

除瞭數組，字符串也可以使用at()方法進行索引：

const str = "hello world";
console.log(str[str.length - 1]);  // d
console.log(str.at(-1));  // d

4. error.cause

在 ECMAScript 2022 規范中，new Error() 中可以指定導致它的原因：

function readFiles(filePaths) {
  return filePaths.map(
    (filePath) => {
      try {
        // ···
      } catch (error) {
        throw new Error(
          `While processing ${filePath}`,
          {cause: error}
        );
      }
    });
}

5. 正則表達式匹配索引

該特性允許我們利用 d 字符來表示我們想要匹配字符串的開始和結束索引。以前，隻能在字符串匹配操作期間獲得一個包含提取的字符串和索引信息的數組。在某些情況下，這是不夠的。因此，在這個規范中，如果設置標志 /d，將額外獲得一個帶有開始和結束索引的數組。

const matchObj = /(a+)(b+)/d.exec('aaaabb');
console.log(matchObj[1]) // 'aaaa'
console.log(matchObj[2]) // 'bb'

由於 /d 標識的存在，matchObj還有一個屬性.indices，它用來記錄捕獲的每個編號組：

console.log(matchObj.indices[1])  // [0, 4]
console.log(matchObj.indices[2])  // [4, 6]

我們還可以使用命名組：

const matchObj = /(?<as>a+)(?<bs>b+)/d.exec('aaaabb');
console.log(matchObj.groups.as);  // 'aaaa'
console.log(matchObj.groups.bs);  // 'bb'

這裡給兩個字符匹配分別命名為as和bs，然後就可以通過groups來獲取到這兩個命名分別匹配到的字符串。

它們的索引存儲在 matchObj.indices.groups 中：

console.log(matchObj.indices.groups.as);  // [0, 4]
console.log(matchObj.indices.groups.bs);  // [4, 6]

匹配索引的一個重要用途就是指向語法錯誤所在位置的解析器。下面的代碼解決瞭一個相關問題：它指向引用內容的開始和結束位置。

const reQuoted = /“([^”]+)”/dgu;
function pointToQuotedText(str) {
  const startIndices = new Set();
  const endIndices = new Set();
  for (const match of str.matchAll(reQuoted)) {
    const [start, end] = match.indices[1];
    startIndices.add(start);
    endIndices.add(end);
  }
  let result = '';
  for (let index=0; index < str.length; index++) {
    if (startIndices.has(index)) {
      result += '[';
    } else if (endIndices.has(index+1)) {
      result += ']';
    } else {
      result += ' ';
    }
  }
  return result;
}
console.log(pointToQuotedText('They said “hello” and “goodbye”.'));
// '           [   ]       [     ]  '

6. 類的實例成員

（1）公共實例字段

公共類字段允許我們使用賦值運算符 (=) 將實例屬性添加到類定義中。下面是一個計數器的例子：

import React, { Component } from "react";
export class Incrementor extends Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
    this.increment = this.increment.bind(this);
  }
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <button onClick={this.increment}>Increment: {this.state.count}</button>
    );
  }
}

在這個例子中，在構造函數中定義瞭實例字段和綁定方法，通過新的類語法，可以使代碼更加直觀。新的公共類字段語法允許我們直接將實例屬性作為屬性添加到類上，而無需使用構造函數方法。這樣就簡化瞭類的定義，使代碼更加簡潔、可讀：

import React from "react";
export class Incrementor extends React.Component {
  state = { count: 0 };
  increment = () => this.setState({ count: this.state.count + 1 });
  render = () => (
    <button onClick={this.increment}>Increment: {this.state.count}</button>
  );
}

有些小夥伴可能就疑問瞭，這個功能很早就可以使用瞭呀。但是它現在還不是標準的 ECMAScript，默認是不開啟的，如果使用 create-react-app 創建 React 項目，那麼它默認是啟用的，否則我們必須使用正確的babel插件才能正常使用（@babel/preset-env）。

下面來看看關於公共實例字段的註意事項：

公共實例字段存在於每個創建的類實例上。它們要麼是在Object.defineProperty()中添加，要麼是在基類中的構造時添加（構造函數主體執行之前執行），要麼在子類的super()返回之後添加：

class Incrementor {
  count = 0
}
const instance = new Incrementor();
console.log(instance.count); // 0

未初始化的字段會自動設置為 undefined：

class Incrementor {
  count
}
const instance = new Incrementor();
console.assert(instance.hasOwnProperty('count'));
console.log(instance.count);  // undefined

可以進行字段的計算：

const PREFIX = 'main';
class Incrementor {
  [`${PREFIX}Count`] = 0
}
const instance = new Incrementor();
console.log(instance.mainCount);   // 0

（2）私有實例字段、方法和訪問器

默認情況下，ES6 中所有屬性都是公共的，可以在類外檢查或修改。下面來看一個例子：

class TimeTracker {
  name = 'zhangsan';
  project = 'blog';
  hours = 0;
  set addHours(hour) {
    this.hours += hour;
  }
  get timeSheet() {
    return `${this.name} works ${this.hours || 'nothing'} hours on ${this.project}`;
  }
}
let person = new TimeTracker();
person.addHours = 2; // 標準 setter
person.hours = 4;    // 繞過 setter 進行設置
person.timeSheet;

可以看到，在類中沒有任何措施可以防止在不調用 setter 的情況下更改屬性。

而私有類字段將使用哈希#前綴定義，從上面的示例中，可以修改它以包含私有類字段，以防止在類方法之外更改屬性：

class TimeTracker {
  name = 'zhangsan';
  project = 'blog';
  #hours = 0;  // 私有類字段
  set addHours(hour) {
    this.#hours += hour;
  }
  get timeSheet() {
    return `${this.name} works ${this.#hours || 'nothing'} hours on ${this.project}`;
  }
}
let person = new TimeTracker();
person.addHours = 4; // 標準 setter
person.timeSheet     // zhangsan works 4 hours on blog

當嘗試在 setter 方法之外修改私有類字段時，就會報錯：

person.hours = 4 // Error Private field '#hours' must be declared in an enclosing class

還可以將方法或 getter/setter 設為私有，隻需要給這些方法名稱前面加#即可：

class TimeTracker {
  name = 'zhangsan';
  project = 'blog';
  #hours = 0;   // 私有類字段
  set #addHours(hour) {
    this.#hours += hour;
  }
  get #timeSheet() {
    return `${this.name} works ${this.#hours || 'nothing'} hours on ${this.project}`;
  }
  constructor(hours) {
    this.#addHours = hours;
    console.log(this.#timeSheet);
  }
}
let person = new TimeTracker(4); // zhangsan works 4 hours on blog

由於嘗試訪問對象上不存在的私有字段會發生異常，因此需要能夠檢查對象是否具有給定的私有字段。可以使用 in 運算符來檢查對象上是否有私有字段：

class Example {
  #field
  static isExampleInstance(object) {
    return #field in object;
  }
}

（3）靜態公共字段

在ES6中，不能在類的每個實例中訪問靜態字段或方法，隻能在原型中訪問。ES 2022 提供瞭一種在 JavaScript 中使用 static 關鍵字聲明靜態類字段的方法。下面來看一個例子：

class Shape {
  static color = 'blue';
  static getColor() {
    return this.color;
  }
  getMessage() {
    return `color：${this.color}` ;
  }
}

可以從類本身訪問靜態字段和方法：

  console.log(Shape.color); // blue
  console.log(Shape.getColor()); // blue
  console.log('color' in Shape); // true
  console.log('getColor' in Shape); // true
  console.log('getMessage' in Shape); // false

實例不能訪問靜態字段和方法：

  const shapeInstance = new Shape();
  console.log(shapeInstance.color); // undefined
  console.log(shapeInstance.getColor); // undefined
  console.log(shapeInstance.getMessage());// color：undefined

靜態字段隻能通過靜態方法訪問：

console.log(Shape.getColor()); // blue
console.log(Shape.getMessage()); //TypeError: Shape.getMessage is not a function

這裡的 Shape.getMessage() 就報錯瞭，因為 getMessage 不是一個靜態函數，所以它不能通過類名 Shape 訪問。可以通過以下方式來解決這個問題：

getMessage() {
  return `color：${Shape.color}` ;
}

靜態字段和方法是從父類繼承的：

class Rectangle extends Shape { }
console.log(Rectangle.color); // blue
console.log(Rectangle.getColor()); // blue
console.log('color' in Rectangle); // true
console.log('getColor' in Rectangle); // true
console.log('getMessage' in Rectangle); // false

（4）靜態私有字段和方法

與私有實例字段和方法一樣，靜態私有字段和方法也使用哈希 (#) 前綴來定義：

class Shape {
  static #color = 'blue';
  static #getColor() {
    return this.#color;
  }
  getMessage() {
    return `color：${Shape.#getColor()}` ;
  }
}
const shapeInstance = new Shape();
shapeInstance.getMessage(); // color：blue

私有靜態字段有一個限制：隻有定義私有靜態字段的類才能訪問該字段。這可能在使用 this 時導致出乎意料的情況：

class Shape {
  static #color = 'blue';
static #getColor() {
  return this.#color;
}
static getMessage() {
  return `color：${this.#color}` ;
}
getMessageNonStatic() {
  return `color：${this.#getColor()}` ;
}
}
class Rectangle extends Shape {}
console.log(Rectangle.getMessage()); // Uncaught TypeError: Cannot read private member #color from an object whose class did not declare it
const rectangle = new Rectangle();
console.log(rectangle.getMessageNonStatic()); // TypeError: Cannot read private member #getColor from an object whose class did not declare it

在這個例子中，this 指向的是 Rectangle 類，它無權訪問私有字段 #color。當我們嘗試調用 Rectangle.getMessage() 時，它無法讀取 #color 並拋出瞭 TypeError。可以這樣來進行修改：

class Shape {
  static #color = 'blue';
  static #getColor() {
    return this.#color;
  }
  static getMessage() {
    return `${Shape.#color}`;
  }
  getMessageNonStatic() {
    return `color：${Shape.#getColor()} color`;
  }
}
class Rectangle extends Shape {}
console.log(Rectangle.getMessage()); // color：blue
const rectangle = new Rectangle();
console.log(rectangle.getMessageNonStatic()); // color：blue

（5）類靜態初始化塊

靜態私有和公共字段隻能讓我們在類定義期間執行靜態成員的每個字段初始化。如果我們需要在初始化期間像 try…catch 一樣進行異常處理，就不得不在類之外編寫此邏輯。該規范就提供瞭一種在類聲明/定義期間評估靜態初始化代碼塊的優雅方法，可以訪問類的私有字段。

先來看一個例子：

class Person {
    static GENDER = "Male"
    static TOTAL_EMPLOYED;
    static TOTAL_UNEMPLOYED;
    try {
        // ...
    } catch {
        // ...
    }
}

上面的代碼就會引發錯誤，可以使用類靜態塊來重構它，隻需將try...catch包裹在 static 中即可：

class Person {
    static GENDER = "Male"
    static TOTAL_EMPLOYED;
    static TOTAL_UNEMPLOYED;
  static {
  	try {
        // ...
    } catch {
        // ...
    }
  }
}

此外，類靜態塊提供對詞法范圍的私有字段和方法的特權訪問。這裡需要在具有實例私有字段的類和同一范圍內的函數之間共享信息的情況下很有用。

let getData;
class Person {
  #x
  constructor(x) {
    this.#x = { data: x };
  }
  static {
    getData = (obj) => obj.#x;
  }
}
function readPrivateData(obj) {
  return getData(obj).data;
}
const john = new Person([2,4,6,8]);
readPrivateData(john); // [2,4,6,8]

這裡，Person 類與 readPrivateData 函數共享瞭私有實例屬性。

以上就是2022發佈ECMAScript新特性盤點的詳細內容，更多關於ECMAScript新特性的資料請關註WalkonNet其它相關文章！

2022發佈ECMAScript新特性盤點

目錄

引言

1. Top-level Await

2. Object.hasOwn()

3. at()

4. error.cause

5. 正則表達式匹配索引

6. 類的實例成員

（1）公共實例字段

（2）私有實例字段、方法和訪問器

（3）靜態公共字段

（4）靜態私有字段和方法

（5）類靜態初始化塊

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

引言

1. Top-level Await

2. Object.hasOwn()

3. at()

4. error.cause

5. 正則表達式匹配索引

6. 類的實例成員

（1）公共實例字段

（2）私有實例字段、方法和訪問器

（3）靜態公共字段

（4）靜態私有字段和方法

（5）類靜態初始化塊

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆