ECMASCRIPT 2021新功能程式碼演示案例

banq發表於2021-07-20

在這篇文章中，我們將透過程式碼示例探索一些最近釋出的 ECMAScript 2021 功能的用例。
ECMAScript 是構成 JavaScript 基礎的指令碼語言。
新功能：
  1. String.prototype.ReplaceAll()
  2. 弱引用
  3. Finalization註冊
  4. Promise.any()
  5. AggregateError 
  6. 邏輯賦值運算子
  7. 數字文字的分隔符

 

String.prototype.ReplaceAll()
用例：
這個新功能可以替換字串中子字串的每個例項。這與舊的 String.prototype.Replace() 不同，後者僅替換子字串的第一次出現。

//with replace()

const replaceMethodEg = "I felt happy because I saw the others were happy and because I knew I should feel happy";

console.log(replaceMethodEg.replace("happy", "sad"));
// Output: I felt sad because I saw the others were happy and because I knew I should feel happy.


//with replaceAll()

const replaceAllMethodEg = "I felt happy because I saw the others were happy and because I knew I should feel happy";

console.log(replaceAllMethodEg.replaceAll("happy", "sad"));
// Output: I felt sad because I saw the others were sad and because I knew I should feel sad.


 

弱引用
WeakRef 允許您建立對物件的弱引用，而不會阻止 JavaScript 引擎的垃圾收集器回收該物件。對物件的正常（強）引用將物件儲存在記憶體中並防止物件被垃圾收集器銷燬。當一個物件不再有任何強引用時，JavaScript 引擎的垃圾收集器可能會銷燬該物件並回收其記憶體。如果發生這種情況，您將無法再從弱引用中獲取物件。
用例：
弱引用的主要用途是實現儲存大物件的快取或對映，在這種情況下，希望大物件不會僅僅因為它出現在快取或對映中而保持活動狀態

// An object to reference weakly

const objToRef = { name: "Queen", age: 23, favColor: 'purple' };

// creating a WeakRef of this object

const weakRefObj = new WeakRef(objToRef);


讀取WeakRefs的值，使用deref()方法返回例項

// create an Instance

const weakRefInstance = weakRefObj.deref();

console.log(weakRefInstance.age)

// Output: 23


警告：由於垃圾收集器的複雜/不可預測性，不建議建立 WeakRef。垃圾收集何時、如何以及是否發生取決於任何給定 JavaScript 引擎的實現。在一個引擎中觀察到的任何行為都可能與另一個引擎不同。
 

Finalization Registry
Finalization 是在程式執行無法訪問的物件之後執行程式碼以進行清理。
用例：
與 WeakRef 一起引入的 Finalization Registry 用於管理在目標物件被垃圾收集時執行的清理操作的註冊和登出。清理回撥有時稱為終結器。

// create a registry

const registry = new FinalizationRegistry(heldValue => {
    // Do something here

});

//您可以透過呼叫該register()方法、傳入物件和為其保留的值來註冊您想要清除回撥的任何物件：


registry.register(theObject, "some value");

傳遞給register()方法的物件將是弱引用，因此當該值被垃圾收集時，第二個引數（“某個值”）將傳遞給終結器。
警告：就像 WeakRefs 一樣，FinalizationRegistry 應該避免使用，並且只有在仔細考慮後才能使用，原因與上述相同。
  

Promise.any()
Promise.any() 接受一個可迭代的承諾物件，並在可迭代物件中的一個承諾滿足時進行解析。這與舊的 promise.all() 不同，它在解決之前等待所有承諾解決。它在一個承諾完成後短路，所以一旦找到一個承諾，它就不會等待其他承諾完成。如果我們只需要兌現一個承諾，但我們不關心哪一個兌現，這可能是有益的。

// demonstrating promise.any()

const firstPromise = new Promise((resolve) => setTimeout(resolve, 700, 'I am the first promise'));

const secondPromise = new Promise((resolve) => setTimeout(resolve, 300, 'I am the second promise'));

const thirdPromise = new Promise((resolve) => setTimeout(resolve, 1000, 'I am the third promise'));

const allPromises = [firstPromise, secondPromise, thirdPromise];

Promise.any(allPromises)
    .then((value) => console.log(value)) 

// Output: "I am the second promise"


 

AggregateError  
AggregateError 物件表示將單個錯誤組合在一起的錯誤。當一個操作需要報告多個錯誤時丟擲。
用例：
以上面的promise.any()方法程式碼為例，如果所有的promise都拒絕了，就會丟擲一個聚合錯誤。

// demonstrating AggregateError

const rejectedPromise = Promise.reject(new Error("an error"));

Promise.any([rejectedPromise])
    .catch(e => {
        console.log(e instanceof AggregateError); // Output: true
        console.log(e);  // Output: AggregateError: All promises were rejected
    });


 

邏輯賦值運算子
這是邏輯運算(&&, || or ??)與賦值運算子(=)的組合。即||=, &&=, ??=。

用例：
邏輯 OR 賦值運算子x ||= y僅在 x 為假時賦值

// Logical OR assignment operator (||=)

let myName = '';
let myGrade = 5;

myName ||= 'Obi';

console.log(myName); // Output: "Obi"

myGrade ||= 2;

console.log(myGrade); // Output: 5

// Logical AND assignment (&&=)

let a = 1;

a &&= 3 // Output: a = 3



// Logical nullish assignment (??=)

let a;

let b = 50;

a ??= b;

console.log(a); //Output: 50


 

數字文字的分隔符
用例：
引入這些分隔符是為了使開發人員能夠透過在數字組之間建立視覺分隔來使數字文字更具可讀性。大數字文字很難在視覺上解析，特別是當有很長的數字重複時。

1000000000 // Is this a billion? a hundred million? Ten millions? 101475938.38 // what scale is this? what power of 10?

常規數字文字：

let budget = 1_000_000_000_000;
// What is the value of `budget`? It's 1 trillion!
// 
// Let's confirm:
console.log(budget === 10 ** 12); // true

二進位制文字

let nibbles = 0b1010_0001_1000_0101;

// Is bit 7 on? It sure is!
// 0b1010_0001_1000_0101
//           ^
//
// We can double check: 
console.log(!!(nibbles & (1 << 7))); // true

十六進位制文字：

// Messages are sent as 24 bit values, but should be 
// treated as 3 distinct bytes:
let message = 0xA0_B0_C0;

// What's the value of the upper most byte? It's A0, or 160.
// We can confirm that:
let a = (message >> 16) & 0xFF;
console.log(a.toString(16), a); // a0, 160

// What's the value of the middle byte? It's B0, or 176.
// Let's just make sure...
let b = (message >> 8) & 0xFF;
console.log(b.toString(16), b); // b0, 176

// What's the value of the lower most byte? It's C0, or 192.
// Again, let's prove that:
let c = message & 0xFF;
console.log(c.toString(16), b); // c0, 192





 

相關文章