完美世界小说txt下载,择天记

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

該來(lái)的還是來(lái)了，盤(pán)點(diǎn)ES12中有新特性！

今天主要介紹一下 ECMAScript 2021(ES12)的一部分的 JS 功能。

“專(zhuān)業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶(hù)的事當(dāng)成自己的事”是我們每一個(gè)人一直以來(lái)堅(jiān)持追求的企業(yè)文化。成都創(chuàng)新互聯(lián)是您可以信賴(lài)的網(wǎng)站建設(shè)服務(wù)商、專(zhuān)業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專(zhuān)注于做網(wǎng)站、成都做網(wǎng)站、軟件開(kāi)發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶(hù)需求為導(dǎo)向，結(jié)合用戶(hù)體驗(yàn)與視覺(jué)傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專(zhuān)業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場(chǎng)，引領(lǐng)市場(chǎng)！

邏輯賦值操作符
數(shù)字分隔符(1_000)
Promise.any 與 AggregateError
String.prototype.replaceAll
WeakRefs 與 FinalizationRegistry 對(duì)象

邏輯賦值操作符

邏輯賦值操作符將邏輯操作(&&、||或??)與賦值表達(dá)式組合在一起。

 
 
 
 
  
  
  
  x ||= y;   
  
  
  x || (x = y);   
  
  
     
  
  
  x &&= y;   
  
  
  x && (x = y);   
  
  
     
  
  
     
  
  
  x ??= y;   
  
  
  x ?? (x = y);

帶有&&的邏輯賦值操作符

 
 
 
 
  
  
  
  let x = 1;   
  
  
  let y = 2;   
  
  
  x &&= y;   
  
  
  console.log(x); // 2

x &&= y 等價(jià)于 x && (x = y)。

或者等價(jià)于

因?yàn)閤是一個(gè)真值，所以它被賦值為y，即2。

帶有||的邏輯賦值操作符

 
 
 
 
  
  
  
  let x = 1;   
  
  
  let y = 2;   
  
  
  x ||= y;   
  
  
  console.log(x); // 1

x ||= y 等價(jià)于 x || (x = y)。

這意味著賦值操作只在x為虛值時(shí)才會(huì)發(fā)生。在我們的代碼中，x包含1，這是一個(gè)真值，因此，賦值不會(huì)發(fā)生。這就是我們的代碼在控制臺(tái)中打印1的原因。

簡(jiǎn)單地說(shuō)

 
 
 
 
  
  
  
  const updateID = user => {   
  
  
     
  
  
    // 我們可以這樣做   
  
  
    if (!user.id) user.id = 1   
  
  
     
  
  
    // 或者這樣   
  
  
    user.id = user.id || 1   
  
  
     
  
  
    // 或者這樣   
  
  
    user.id ||= 1   
  
  
  }

帶有??的邏輯賦值操作符

?? 在 JS 中專(zhuān)門(mén)檢查一個(gè)值是否為 null 或undefined。

 
 
 
 
  
  
  
  let a;   
  
  
  let b = a ?? 5;   
  
  
  console.log(b); // 5

在第二行，let b = a ?? 5，如果a的值為null 或undefined，??求值并賦值給b。

現(xiàn)在考慮?? 和==。

 
 
 
 
  
  
  
  let x;   
  
  
  let y = 2;   
  
  
  x ??= y;   
  
  
  console.log(x); // 2

x ??= y 等價(jià)于 x = x ?? (x=y)

數(shù)字分隔符

它允許我們?cè)跀?shù)字之間添加下劃線(xiàn)(_)字符，使數(shù)字更具可讀性。

例如

 
 
 
 
  
  
  
  const num = 100000000

被0的數(shù)量所迷惑

分隔符解決這個(gè)問(wèn)題：

 
 
 
 
  
  
  
  const num = 100_000_000

分隔符可以用于數(shù)字的整數(shù)部分和小數(shù)部分。

 
 
 
 
  
  
  
  const num = 1_000_000.123_456

分隔符不僅可以用在整數(shù)和浮點(diǎn)數(shù)中，也可以用在二進(jìn)制、十六進(jìn)制、八進(jìn)制字面量中。

分隔符也適用于BigInt數(shù)字。

 
 
 
 
  
  
  
  const trillion = 1000_000_000_000n;   
  
  
  console.log(trillion.toString()); // "1000000000000"

分隔符只是為了可讀性。所以，它可以放在數(shù)字內(nèi)的任何地方。

 
 
 
 
  
  
  
  const amount = 178_00; // 00 after _ for cents.

Promise.any 與 AggregateError

Promise.any()返回第一個(gè)完成的promise的值。如果所有傳遞給Promise.any()作為參數(shù)(作為數(shù)組)的Promise都被拒絕，則拋出一個(gè)"AggregateError"異常。

AggregateError`是一個(gè)新的Error子類(lèi)，它對(duì)單個(gè)錯(cuò)誤進(jìn)行分組。每個(gè)AggregateError實(shí)例都包含一個(gè)對(duì)異常數(shù)組的引用。

考慮下面例子：

下面我們有3個(gè) promise，它們是隨機(jī)的。

 
 
 
 
  
  
  
  const p1 = new Promise((resolve, reject) => {   
  
  
    setTimeout(() => resolve("A"), Math.floor(Math.random() * 1000));   
  
  
  });   
  
  
  const p2 = new Promise((resolve, reject) => {   
  
  
    setTimeout(() => resolve("B"), Math.floor(Math.random() * 1000));   
  
  
  });   
  
  
  const p3 = new Promise((resolve, reject) => {   
  
  
    setTimeout(() => resolve("C"), Math.floor(Math.random() * 1000));   
  
  
  });

在p1, p2和p3中，最先的完成的的由Promise.any()執(zhí)行。

 
 
 
 
  
  
  
  (async function() {   
  
  
    const result = await Promise.any([p1, p2, p3]);   
  
  
    console.log(result); // 打印 "A", "B" 或者 "C"   
  
  
  })();

如果所有的 promise 都失敗了?在這種情況下，Promise.any()拋出AggregateError異常。我們需要捕獲它：

 
 
 
 
  
  
  
  const p = new Promise((resolve, reject) => reject());   
  
  
     
  
  
  try {   
  
  
    (async function() {   
  
  
      const result = await Promise.any([p]);   
  
  
      console.log(result);   
  
  
    })();   
  
  
  } catch(error) {   
  
  
    console.log(error.errors);

為了演示的目的，在Promise.any()中我們只能它一個(gè) promise。而這個(gè) promise 是失敗的。上述代碼在控制臺(tái)中記錄了以下錯(cuò)誤。

String.prototype.replaceAll 方法

String.prototype.replaceAll()允許我們用一個(gè)不同的值替換字符串中的所有子串實(shí)例，而不需要使用全局正則表達(dá)式。

目前，JavaScript字符串有一個(gè)replace()方法。它可以用來(lái)用另一個(gè)字符串替換一個(gè)字符串。

 
 
 
 
  
  
  
  const str = "Backbencher sits at the Back";   
  
  
  const newStr = str.replace("Back", "Front");   
  
  
  console.log(newStr); // "Frontbencher sits at the Back"

如果輸入模式是一個(gè)字符串，replace()方法只替換第一次出現(xiàn)的內(nèi)容。這就是為什么在代碼中，"Back"的第二次出現(xiàn)沒(méi)有被替換。

只有將模式作為正則表達(dá)式提供時(shí)，才能進(jìn)行完全替換。

 
 
 
 
  
  
  
  const str = "Backbencher sits at the Back";   
  
  
  const newStr = str.replace(/Back/g, "Front");   
  
  
  console.log(newStr); // "Frontbencher sits at the Front"

我們來(lái)看另一個(gè)例子

 
 
 
 
  
  
  
  const strWithPlus = '++'   
  
  
  const strWithComma = strWithPlus.replace(/+/g, ', ')   
  
  
  // , ,

這種方法需要使用正則表達(dá)式。然而，復(fù)雜的正則表達(dá)式往往是錯(cuò)誤的來(lái)源。(沒(méi)有人喜歡RegEx )

還有另一種方法是使用String.prototype.split()和Array.prototype.join()方法

 
 
 
 
  
  
  
  const strWithPlus = '++'   
  
  
  const strWithComma = strWithPlus.split('+').join(', ')   
  
  
  // , ,

這種方法避免使用正則表達(dá)式，但是必須將字符串拆分為單獨(dú)的部分(單詞)，將其轉(zhuǎn)換為一個(gè)數(shù)組，然后將數(shù)組元素連接為一個(gè)新字符串。

string.prototype.replaceAll()解決了這些問(wèn)題，并為全局替換子串提供了簡(jiǎn)單而方便的方式：

 
 
 
 
  
  
  
  const strWithPlus = '++'   
  
  
  const strWithComma = strWithPlus.replaceAll('+', ', ')   
  
  
  // , ,

注意：如果使用全局正則表達(dá)式作為查找值，那么replace和replaceAll的行為是一樣的。

WeakRefs 與 FinalizationRegistry 對(duì)象

WeakRef 是弱引用的意思。弱引用的主要用途是實(shí)現(xiàn)大型對(duì)象的緩存或映射。在這種情況下，我們不希望長(zhǎng)期保留大量的內(nèi)存來(lái)保存這種很少使用的緩存或映射。我們可以讓內(nèi)存很快被垃圾回收，以后如果我們?cè)俅涡枰覀兛梢陨梢粋€(gè)新的緩存。

JS 是會(huì)自動(dòng)垃圾收集。如果一個(gè)變量不再可達(dá)，JS 垃圾收集器將自動(dòng)刪除它。你可以在MDN中閱讀更多關(guān)于 JS 垃圾收集的內(nèi)容。

WeaseRefs(弱引用)提供了兩個(gè)新功能：

使用WeakRef類(lèi)創(chuàng)建對(duì)對(duì)象的弱引用
使用FinalizationRegistry類(lèi)在垃圾收集之后運(yùn)行自定義收集器

簡(jiǎn)而言之，WeakRef允許我們創(chuàng)建對(duì)象的弱引用，這些對(duì)象是另一個(gè)對(duì)象的屬性值，而finalizers可以用來(lái)，除其他外，移除對(duì)被垃圾收集器 "清理"過(guò)的對(duì)象的引用。

在創(chuàng)建使用內(nèi)置緩存的記憶化(memoization)函數(shù)時(shí)，如果緩存中存在傳遞給函數(shù)的參數(shù)的計(jì)算值，這種技術(shù)可能很有用(前提是對(duì)象被用作緩存對(duì)象的屬性值，以及它們隨后被刪除的風(fēng)險(xiǎn))，以防止重復(fù)執(zhí)行函數(shù)。

在構(gòu)建內(nèi)聯(lián)緩存時(shí)

如果沒(méi)有內(nèi)存泄漏的風(fēng)險(xiǎn)，那么使用 Map
當(dāng)使用可以隨后刪除對(duì)象的鍵時(shí)，使用 WeakMap
當(dāng)使用可以隨后刪除的值對(duì)象時(shí)，請(qǐng)將Map與WeakRef結(jié)合使用

提案中最后一個(gè)例子：

 
 
 
 
  
  
  
  function makeWeakCached(f) {   
  
  
    const cache = new Map()   
  
  
    return key => {   
  
  
      const ref = cache.get(key)   
  
  
      if (ref) {   
  
  
        //        
  
  
        const cached = ref.deref()   
  
  
        if (cached !== undefined) return cached;   
  
  
      }   
  
  
     
  
  
      const fresh = f(key)   
  
  
      //    ( )   
  
  
      cache.set(key, new WeakRef(fresh))   
  
  
      return fresh   
  
  
    };   
  
  
  }   
  
  
     
  
  
  const getImageCached = makeWeakCached(getImage);

WeakRef構(gòu)造函數(shù)接受一個(gè)參數(shù)，該參數(shù)必須是一個(gè)對(duì)象，并返回對(duì)該對(duì)象的弱引用
WeakRef 實(shí)例的deref方法返回兩個(gè)值中的一個(gè)。

在內(nèi)置緩存的情況下，finalizer被設(shè)計(jì)為在一個(gè)值對(duì)象被垃圾收集器銷(xiāo)毀后完成清理過(guò)程，或者更簡(jiǎn)單地說(shuō)，刪除對(duì)這樣一個(gè)對(duì)象的弱引用。

 
 
 
 
  
  
  
  function makeWeakCached(f) {   
  
  
    const cache = new Map()   
  
  
    //    -      
  
  
    const cleanup = new FinalizationRegistry(key => {   
  
  
      const ref = cache.get(key)   
  
  
      if (ref && !ref.deref()) cache.delete(key)   
  
  
    })   
  
  
     
  
  
    return key => {   
  
  
      const ref = cache.get(key)   
  
  
      if (ref) {   
  
  
        const cached = ref.deref()   
  
  
        if (cached !== undefined) return cached   
  
  
      }   
  
  
     
  
  
      const fresh = f(key)   
  
  
      cache.set(key, new WeakRef(fresh))   
  
  
      //      ( )   
  
  
      cleanup.register(fresh, key)   
  
  
      return fresh   
  
  
    }   
  
  
  }   
  
  
     
  
  
  const getImageCached = makeWeakCached(getImage);

作者：KUMAR HARSH

譯者：前端小智來(lái)源：blog 原文：https://dev.to/cenacr007_harsh/es2021-features-3pa

網(wǎng)頁(yè)名稱(chēng)：該來(lái)的還是來(lái)了，盤(pán)點(diǎn)ES12中有新特性！
文章地址：http://m.fisionsoft.com.cn/article/dhseded.html