あなたの人生を容易にする2020年から3 JavaScript機能

JavaScriptは毎年良くなっています.2020年には、よく、ES2020 standard .
私にとって、オプションの連鎖?. , 偽の合体演算子?? and string.matchAll 実際にES 2020の3つの最も有用な機能です.このブログ記事の例でそれらを使用する方法を説明します.

オプションの連鎖?
Optional chaining 値がnull or undefined プロパティにアクセスする前に.を返します.undefined .
あなたはより簡潔なコードを書くことができます.? 例に代えてx == null ? undefined : x.b 式.また、他のパターンを置き換えることができますx && x.b そして、彼らは以下のエラーが起こりやすい.これは特に長い鎖がある場合に便利です.
例を見てみましょう.

const test = (example) => {
  console.log(example?.value)
};

test({value: ".?"});       // .?
test(null);                // undefined (optional chaining)
test(undefined);           // undefined (optional chaining)
test(true);                // undefined (true.value is undefined)
test(1);                   // undefined (1.value is undefined)

偽の合体演算子?
The nullish coalescing operator 左側がそうであるならば、評価しますnull or undefined , を返します.左側が返されません.null or undefined .
オプションの連鎖のように、Nullishコアレッシングオペレーターは以下のエラーを起こしやすいコードを書くことに役立ちます.を置き換えることができますa = x || something デフォルト値パターン.このパターンは意図しない結果に導くことができるx 虚偽ではないnull or undefined .
以下に例を示します:

const test = (example) => {
  console.log(example ?? 'default')
};

test("??");                // ??
test(null);                // default (nullish coalescing)
test(undefined);           // default (nullish coalescing)
test(false);               // false - would be "default" with `||`
test(0);                   // 0 - would be "default" with `||`

キャプチャグループを使って正規表現を文字列でマッチングする.マッチオール
string.match は既にグローバルフラグを持つ正規表現からマッチした値をすべて返します.しかし、マッチした値の位置を取得することも重要です.string.matchAll そのユースケースに最適なソリューションです.
string.matchAll グローバルな正規表現のすべてのマッチの上にイテレータを返します.各試合は、一致する値、その位置、および一致するキャプチャが含まれます.
名前付きキャプチャグループと組み合わせて特に有用です.

const text = "Let's match one:1 and let's also match two:2.";
const regexp = /match\s(?<word>\w+):(?<digit>\d)/g;

for (const match of text.matchAll(regexp)) {
    console.log(match);
}

上の例のコードには次の出力があります.

[
  'match one:1',
  'one',
  '1',
  index: 6,
  input: "Let's match one:1 and let's also match two:2.",
  groups: { word: 'one', digit: '1' }
]
[
  'match two:2',
  'two',
  '2',
  index: 33,
  input: "Let's match one:1 and let's also match two:2.",
  groups: { word: 'two', digit: '2' }
]

2021は角を曲がったところです.上記の3つのJavaScript機能を使用すると、今日のコーディングをより楽しくすることができます.そして、より多くのjs Awesomenesは、2021年に来ています🚀