ES 2021の新機能

導入

私は個人的には常にどのような新機能ecmascriptそれをもたらす好奇心旺盛なので、私は、私は概要として役立つべき小さな投稿を書くことができると思いました.重要な個々の機能を特に理解することができます特に弱い、個々のリンクの提案を介して動作する必要があります.さらに、MDNウェブドキュメントを見てみるのも良い考えです.

新機能の一覧

Logical Assignment Operators

Numeric Separators

String.prototype.replaceAll

Promise any and AggregateError

Weak refs and FinalizationRegistry

論理代入演算子

https://github.com/tc39/proposal-logical-assignment
より少ないコードとより読みやすくするために、論理代入演算子は、Ruby

a ||= 0
a &&= 1
p a # prints 1

JavaScriptでは基本的に3つの新しい代入演算子を取得します.

&&=

||=

??=

論理OR代入

古い値が誤っている場合、jsは変数に新しい値を割り当てるだけです
( false , 0 , - 0 , null , undefined , ', ...)

例

let x = undefined;
// x is undefined so js will assign foo to it
x ||= 'foo';
// x is truthy js will not assign bla to it
x ||= 'bla';

論理和代入

JSは、古い値が真であるならば、変数に新しい値を割り当てるだけです

例

let x = undefined;

// x is undefined so js will not assign foo to it
x &&= 'foo';

論理的な割り当て

Nullish演算子(??)ES 2020で導入されました.偽の値とは異なり、nullishはNULLまたは未定義を意味します.
それ以外の場合、残りの論理はFalsley値と同じです.
古い値がnullishであるならば、jsは変数に新しい値を割り当てるだけです.

質問

という違いを理解するために.
以下の例ではxとyとなります.

コード

let x = '';
let y = '';

x ??= 'foo';
y ||= 'foo';

アンサー

xはまだ空文字列で、空の文字列は偽の値

重要な短絡回路の評価を認識する

すべての新しい論理代入演算子に対して、JSコンパイラがショート・メソッドを使用することを理解することが重要です.これは、例えば、新しい論理ヌル演算子の場合、左の値がNULLでない場合、右の値は実行されません.これは特に副作用を有する機能に対して利点を有する.
それでX ???yはx = xと同じですか?Y
X?(x = y)は、より同等の記述です

数値セパレータ

https://github.com/tc39/proposal-numeric-separator
数字の区切り文字は、私たち人間のための良い機能をより良い数字を読むことです.アンダースコアを使用すると、より大きな数字で押すことができます.また、バイナリ番号や16進数のために動作します.

例

const decimalValue = 666;
const octalValue  = 0o12_32;
const hexValue    = 0x02_9A;
const binaryValue = 0b0010_1001_1010;

文字列。プロトタイプ。置換

https://github.com/tc39/proposal-string-replaceall
JavaScript文字列の新しいネイティブ関数.ReplaceAllは、正規表現を使用して文字列内のすべての文字を変更する必要がある古いHackyメソッドを置き換えます

例

const string = 'Ring-ding-ding-ding-dingeringeding';
const withSpacesOld = string.replace(/\-/g, ' ');
const withSpacesNew = string.replaceAll('-', ' ')

約束。任意および

https://github.com/tc39/proposal-promise-any
ES 2015で、最初の2つの新しい約束Combinatorが導入されました.約束.レースと約束.すべて.ES 2020は、約束を導入しました.集計.
ES 2021で約束任意の追加されます.単純化された方法では、非同期API呼び出しのブロックでは、喜んでいるし、それらのいずれかが成功した場合に動作し続けることができると想像することができます.ブロック内のAPI呼び出しのいずれも返されない場合、ブロック全体が失敗します.失敗した場合、新しいエラータイプもスローされます.

例

const onlyRejectedPromises = [
  Promise.reject("ERROR everything is a mess"),
  Promise.reject("ERROR bla"),
];

const onlyResolvedPromises = [
  new Promise((resolve) => {
    setTimeout(resolve, 100, "Not to fast");
  }),
  new Promise((resolve) => {
    setTimeout(resolve, 50, "Faster than light");
  }),
];

Promise.any([...onlyResolvedPromises, ...onlyRejectedPromises])
  .then((value) => {
    // faster than light will be printed
    console.log(value);
  })
  .catch((aggregateError) => {
    // will not go into the catch
    // at last one promise was successful
    console.log(aggregateError.errors);
  });

Promise.any([...onlyRejectedPromises])
  .then((value) => {
    // will not go into the then
    console.log(value);
  })
  .catch((aggregateError) => {
    // will go into the catch
    // ['ERROR everything is a mess', 'ERROR bla']
    console.log(aggregateError.errors);
  });

脆弱性とfinlizationregister

https://github.com/tc39/proposal-weakrefs
この新しい機能は非常に複雑であり、JavaScriptでガベージコレクターがどのように機能しているかを正確に理解する必要があるからです.したがって、私は良い概念を理解するのを助けた良いビデオをリンクしました.以下では、この新機能を自分の言葉で説明しようと思います.

弱JavaScript - HTTP 203

ガーベジコレクタ

弱いrefsを理解するために、プログラムがあまりにたくさんのメモリを持つとき、JavaScriptがどのようにスペースを解放するかを最初に理解することは重要です.
Cのような低レベル言語では、開発者はもはや必要とされない変数もメモリから無駄になることを保証しなければなりません.
JavaScriptでは、ガベージコレクターによって自動的に行われます.
JavaScriptのガベージコレクタの大きな問題は、メモリへの参照を持つオブジェクトが本当に必要かどうかを知ることです.
ここでは弱点を助けることができます.

弱点

JavaScriptに関する古典的なユースケースは、実行時にDOM要素の値を新しい変数に格納することはもちろんです.この変数は、DOM要素への強い参照を持ちます.これは、ガベージコレクタがメモリから参照を持つオブジェクトを決して削除しないことを意味します.あなたがちょうど弱refsを使うならば、GCはそれも変数を取り除かなければならないということを知っています.

例

弱参照用ユースケースのコード例を次のコードに示します.source

class Counter {
  constructor(element) {
    // Remember a weak reference to the DOM element
    this.ref = new WeakRef(element);
    this.start();
  }

  start() {
    if (this.timer) {
      return;
    }

    this.count = 0;

    const tick = () => {
      // Get the element from the weak reference, if it still exists
      const element = this.ref.deref();
      if (element) {
        element.textContent = ++this.count;
      } else {
        // The element doesn't exist anymore
        console.log("The element is gone.");
        this.stop();
        this.ref = null;
      }
    };

    tick();
    this.timer = setInterval(tick, 1000);
  }

  stop() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = 0;
    }
  }
}

const counter = new Counter(document.getElementById("counter"));
setTimeout(() => {
  document.getElementById("counter").remove();
}, 5000);

finalizationレジストリ

FinalizationRegistryオブジェクトを使用すると、オブジェクトがガベージコレクションされたときにコールバックを要求できます.

ソースの例

const sleep = (ms) => new Promise(r => setTimeout(r, ms));

let waitingForCleanup = true;
const registry = new FinalizationRegistry((heldValue) => {
  console.log(`cleanup: ${heldValue}`);
  waitingForCleanup = false;
});

let foo = {};
registry.register(foo, 42);
foo = undefined; // Clear strong reference

GCが決定論的でないので、一般的な弱点とfinalizationRegistryの重要性は避けられなければなりません、そして、ガベージコレクタがメモリからオブジェクトを除去するならば、あなたは決して知りません.したがって、あなたのコードが弱いrefsに依存する最適化を必要とするならば、あなたはそれを使用してはいけません.

概要

簡単に新しい機能を要約しましょう.
合計で5つの新機能があり、そのうち3つはシンタックスシュガー(論理代入、String .プロトタイプ、replaceAll ()、数値区切り記号)と呼びます.約束.任意の継続であり、開発者の組み合わせの組み合わせを表示する可能性があります.弱点では、通常の開発者はおそらく彼の毎日の使用で以下の連絡先があります.弱点は確かに最適化問題の良い解決策になるでしょう.一日の終わりに、彼らは開発者より多くの不要なメモリをガベージコレクターを解放するためのツールを与える.