JavaScriptの7新機能は、2022年に試す必要があります🔥!

JavaScriptは、2015年以降、すべての更新プログラムは、他よりも素晴らしい更新を得ている.毎回、これらのアップデートが出ている、世界中のプログラマはそれをテストする熱心になる.
だから、すべてのせっかちなプログラマにそこに、今日、私は今年チェックアウトするためのクールな機能の提案の束を持ってきた.これらはステージ4に向かう途中で作られていて、Standard EcmaScript おそらく2022年6月まで.

ソースhttps://medium.com/geekculture/typescript-vs-javascript-e5af7ab5a331

1️⃣ プライベートメソッドとクラスのアクセサー
OHPの(オブジェクト指向プログラミング)データ隠蔽概念を完全に活用するために、この提案はクラス内の任意の要素をプライベートであり、フィールド、メソッド、アクセサー(ゲッター/セッター)とします.したがって、我々は簡単にデータセキュリティに焦点を当てることができます🔒.

class ButtonToggle extends HTMLElement {
    color = 'green';
    #value = true;
    toggle(){
        this.#value = !this.#value;
    }
}
const button = new ButtonToggle();
console.log(button.color);
// green - public fields are accessible from outside classes
// SyntaxError: can't be accessed or modified from outside the class
console.log(button.#value); 
button.#value = false;

We have used # before the field to signify it as a private field.

2️⃣ トップレベルawait今まで、我々は使用されているawait 演算子のみasync (非同期)関数.私があなたにあなたが使うことができると言うならばawait without the async この機能を持つ機能.
はい、我々はそれを使用することができます!Aの宣言なしでモジュールの最上位レベルでasync .
クールじゃない?

const params = new URLSearchParams(location.search);
const language = params.get('lang');
const messages = await import(`./messages-${language}.mjs`); // (A)

console.log(messages.welcome);

The dynamic import in line (A) is almost as convenient as using a normal, static import since we’re using top-level await.

今問題が発生

なぜ我々は必要await モジュールのトップレベルで🤔?

✅ いくつかのモジュールには非同期にロードされたデータが含まれているので、モジュールが完全に初期化される前に非同期インポートにアクセスしないようにします.

✅ さらに、非同期モジュールはシステムによって透過的に扱われます.

ただし、トップレベルでは、モジュールのインポートの初期化が遅くなります.

3️⃣ プライベートスロットチェック
ご存知ですか.プライベートフィールドには"brand check" , つまり、インストールされていないオブジェクト内のプライベートフィールドにアクセスしようとすると、例外がスローされます.
そこで、オブジェクトがプライベートスロットを持っているかどうかを確認します.in 演算子を使用します.

class Color {
  #name;
  constructor(name) {
    this.#name = name;
  }
  static check(obj) {
    return #name in obj; // (A)
  }
}

*上記のコードで、オブジェクトかどうかチェックしますobj プライベートスロット#name かどうか.

We can use in operator to check private fields and methods as well as static fields and methods.

4️⃣ new Error() 方法
エラーは、実行時異常を診断する素晴らしい方法です.この提案は、これらの実行時不規則性を診断するのにさらに役立つ原因による連鎖エラーの前方の概念をもたらします.
では、現在のエラーを使用して正確なエラーを指定することができますnew Error とサブクラス.

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

The property cause in used to get additional information on the error.

5️⃣ .at() 機能
これは少し面白い!今まで、我々は角ブラケットを使っていました[] JavaScriptのインデキシング目的のために.
しかし、このテクニックではなく、負のインデックスを使用する場合はどうですか?

arr = [1,2,3,4,5]
arr[3] // 4

arr[-1] // (A)
// the code breaks here!

*The code just breaks at line (A)

対照的に、配列メソッド.at ()は同じタスクを行いますが、正と負の両方のインデックスをサポートします.したがって、負のインデックスを使用すると、同じ順序で逆の順序でアクセスできます.

arr.at(-1) // 5
arr.at(-3) // 3

## 6️⃣ regexpマッチインデックス
これは非常に便利な追加のマッチングオブジェクトです.マッチインデックスはマッチオブジェクトの特徴です.正規表現フラグを使用して有効にする場合/d , それぞれのグループが捕捉された場所の開始と終了のインデックスを提供します.

const fruits = 'Fruits: mango, mangosteen, orange'
const regex = /(mango)/g;

// matchAll
const matches = [...fruits.matchAll(regex)];
matches[0];

 [
   "mango",
   "mango",
   index: 8,
   input: 'Fruits: mango, mangosteen, orange',
   groups: undefined
 ]

我々が次に何をするつもりであるかについて詳しく見てください.the /mango/g に変換されます/mango/gd .

// /gd instead of the previous /g
const regex = /(mango)/gd;
const matches = [...fruits.matchAll(regex)];
matches[0];

 [
 "mango",
 "mango",
 groups: undefined,
 index: 8,
 indices:[]
  [8, 13],
  [8, 13]
 ]

Just with the addition of a /d in the Regex, our match object will provide us with a additional property indices.

7️⃣ オブジェクト.hasown関数
この提案はObject.hasOwnProperty , プログラマが直面する不要なハッセルを単純化する
その作業は簡単です!指定したオブジェクトが指定したプロパティを所有している場合、オブジェクト.hasown () staticメソッドはtrueを返します.指定したプロパティが継承されている場合、またはfalseが返されます.

let hasOwnProperty = Object.prototype.hasOwnProperty

if (hasOwnProperty.call(object, "foo")) {
  console.log("has property foo")
}

これは私たちが今まで書いていたコードです!🔝

if (Object.hasOwn(object, "foo")) {
  console.log("has property foo")
}

見て、どのくらいコードを簡略化🔝 !!

Thus, Object.hasOwn() will replace Object.hasOwnProperty is year💡!

次は何ですか️
さらにいくつかの機能が追加される可能性がありますEcmaScript 2022 . だから、私の上に従ってください.
Twitter
リンケディン
ギタブhttps://github.com/tanmayVaish
hashnode :https://hashnode.com/@tanmayVaish

謝辞

TC39 Page for Finished Proposals

exploringjs.com

InspiredWebDev で.

Codedamn そば

v8.dev

Top-level 'await' is a footgun そば