ES2020の新しいJavaScript機能について学ぶ

getdocs

2年前

序章

この記事では、最新のアップグレードであるES2020でリリースされた新しいJavaScript機能について学習します。 NullishCoalescingやOptionalChainOperatorsなどの機能は、JavaScript構文の定義に役立ちますが、DynamicImportはコードをモジュール化したままにします。

プライベートクラス変数

クラスには、再利用可能なモジュールに使用できるプロパティが含まれています。これらのプロパティをさまざまなファイルで再利用する場合、すべてをグローバルに利用できるようにしたくない場合があります。

これを解決するために、プライベートクラス変数はクラス内で使用するためのプロパティとメソッドを予約します。プロパティとメソッドの前にあるハッシュ記号は、プライベートクラス変数を示します。

class Message {
  #message = "Howdy";

  greet() { 
    console.log(this.#message); 
  };
}; 

const greeting = new Message()

greeting.greet() // Howdy
console.log(greeting.#message) // #message is not defined

を呼び出すことに注意してください greet クラス外のメソッドは値を返します。 A console.log プライベートにされたプロパティでエラーを返します。

`Promise.allSettled()`

複数のPromiseを操作する場合、特にそれらが相互に依存している場合は、各プロセスをログに記録してエラーをデバッグすると便利な場合があります。

と Promise.allSettled()、引数が解決されたときに渡されたpromiseが返される新しいpromiseを作成できます。

const p1 = new Promise((res, rej) => setTimeout(res, 1000));

const p2 = new Promise((res, rej) => setTimeout(rej, 1000));

Promise.allSettled([p1, p2]).then(data => console.log(data));

これにより、各promiseのステータスと値を持つオブジェクトの配列が出力されます。

Output[
   Object { status: "fulfilled", value: undefined},
   Object { status: "rejected", reason: undefined}
]

ここ、 Promise.allSettled() のステータスと値を配列に提供します p1 と p2 約束します。

ヌル合体演算子

JavaScriptは大まかに型付けされているため、変数を割り当てるときは、真偽の値に注意してください。データを含むオブジェクトがある場合は、空の文字列や数値0などの偽の値を許可することをお勧めします。

ヌル合体演算子（??）左のオペランドがそうでない場合、偽の値を識別して返します null また undefined.

let person = {
  profile: {
    name: "",
    age: 0
  }
};

console.log(person.profile.name || "Anonymous"); // Anonymous
console.log(person.profile.age || 18); // 18

対照的に、OR演算子（||）左が偽の場合、右のオペランドを返します。

console.log(person.profile.name ?? "Anonymous"); // ""
console.log(person.profile.age ?? 18); // 0

代わりに、Nullish Coalescing Operatorは、偽の値をどちらも返さないため、 name と age プロパティは null また undefined.

オプションの連鎖演算子

偽の値を操作する別の方法は、オプションの連鎖演算子（?.). 参照がnullの場合、オペレーターはオブジェクト内の未定義のプロパティにアクセスする方法を提供します。

let person = {};

console.log(person.profile.name ?? "Anonymous"); // person.profile is not defined
console.log(person?.profile?.name ?? "Anonymous"); // no error 
console.log(person?.profile?.age ?? 18); // no error

エラーをスローする代わりに、オプションの連鎖演算子を使用すると、次のように評価されるプロパティを操作できます。 undefined.

注：オプションの連鎖とヌルの合体の詳細については、この投稿を参照してください。

`BigInt`

JavaScriptが処理できる最大数は2^53であり、これはプロパティで確認できます MAX_SAFE_INTEGER.

const max = Number.MAX_SAFE_INTEGER;

console.log(max); // 9007199254740991

の値を超える任意の数値 max 変数の信頼性が維持されない可能性があります。

console.log(max + 1); // 9007199254740992
console.log(max + 2); // 9007199254740992
console.log(max + 3); // 9007199254740994
console.log(Math.pow(2, 53) == Math.pow(2, 53) + 1); // true

内蔵で BigInt オブジェクト、追加 n 計算用の各大きな整数の最後まで。 BigInt 数値は他の数値でのみ計算できます BigInt 数字。

const bigNum = 100000000000000000000000000000n;

console.log(bigNum * 2n); // 200000000000000000000000000000n

The BigInt の値 bigNum と乗算されます 2n 生産する 200000000000000000000000000000n.

動的インポート

ユーティリティ関数のファイルがある場合、それらのすべてを使用できない可能性があり、それらの依存関係をインポートするとリソースが無駄になる可能性があります。現在、 async / await には、必要に応じて依存関係をインポートするための追加機能が付属しています。

これは、のユーティリティ関数の例です。 math.js ファイル：

math.js

const add = (num1, num2) => num1 + num2;

export { add };

これが例です index.js ユーティリティ関数を使用したファイル：

index.js

const doMath = async (num1, num2) => {
  if (num1 && num2) {
    const math = await import('./math.js');
    console.log(math.add(5, 10));
  };
};

doMath(4, 2);