知っておくべきES2020の10の新しいJavaScript機能

朗報–ES2020の新機能が完成しました。これは、JavaScriptの新しく改善された仕様であるES2020で発生する変更について完全に理解したことを意味します。それでは、それらの変更が何であるかを見てみましょう。

#1:BigInt

JavaScriptで最も期待されている機能の1つであるBigIntがついに登場しました。実際、開発者は、データ処理のためのデータ処理のために、JSコードではるかに大きな整数表現を持つことができます。

現時点では、JavaScriptで整数として保存できる最大数はpow(2, 53) - 1です。しかし、BigIntを使用すると、実際にはそれを超えることができます。  

ただし、n上記のように、番号の最後に追加する必要があります。これnは、これがBigIntであり、JavaScriptエンジン(v8エンジンまたは使用しているエンジン)によって異なる方法で処理される必要があることを示しています。

従来の記数法はIEEE754(このサイズの記数をサポートできない)であるため、この改善には下位互換性がありません。

#2:動的インポート

JavaScriptでの動的インポートには、JSファイルをアプリケーションのモジュールとしてネイティブに動的にインポートするオプションがあります。これは、現時点でWebpackとBabelを使用する方法と同じです。

この機能は、webpackや他のモジュールバンドラーのオーバーヘッドなしで、コード分割としてよく知られているオンデマンドリクエストコードを出荷するのに役立ちます。必要に応じて、if-elseブロックに条件付きでコードをロードすることもできます。

モジュールを実際にインポートするので、グローバル名前空間を汚染することはありません。

#3:ヌルの合体

ヌルの合体により、nullish値ではなく値を実際にチェックする機能が追加されfalseyます。nullishfalsey値の違いは何ですか?

JavaScriptでは、値の多くはfalsey、空の文字列のように、番号0、 、undefinednullfalseNaNなど。

ただし、多くの場合、変数がnullであるかどうかを確認する必要があります。undefinedつまりnull、変数に空の文字列が含まれていても問題がない場合や、誤った値であっても、またはのいずれかであるかどうかを確認する必要があります。

その場合、新しいnullish合体演算子を使用します。 ??

OR演算子が常に真の値を返すのに対し、nullish演算子はnullish以外の値を返す方法を明確に確認できます。

#4:オプションのチェーン

オプションの連鎖構文を使用すると、プロパティが存在するかどうかを気にすることなく、深くネストされたオブジェクトプロパティにアクセスできます。それが存在する場合、素晴らしいです!そうでない場合は、undefined返されます。

これは、オブジェクトのプロパティだけでなく、関数呼び出しや配列でも機能します。超便利!次に例を示します。

#5:Promise.allSettled

このPromise.allSettledメソッドは、Promiseの配列を受け入れ、それらすべてが解決された場合にのみ解決されます–解決または拒否されます。

これは、のようないくつかの近くに実装しても、以前にネイティブに利用できなかったraceとはall利用可能でした。これにより、JavaScriptにネイティブに「すべての約束を実行するだけです。結果は気にしません」がもたらされます。

#6:String#matchAll

matchAllは、String正規表現に関連するプロトタイプに追加された新しいメソッドです。これは、一致したすべてのグループを次々に返すイテレータを返します。簡単な例を見てみましょう。

#7:globalThis

Node、ブラウザー環境、およびWebワーカー内で実行できるクロスプラットフォームのJSコードを作成した場合、グローバルオブジェクトを取得するのに苦労するでしょう。

これはwindow、ブラウザー、globalノード、およびselfWebワーカー用であるためです。より多くのランタイムがある場合、グローバルオブジェクトもそれらに対して異なります。

したがって、ランタイムを検出してから正しいグローバルを使用する独自の実装が必要でした。つまり、これまでです。

ES2020はglobalThis、コードを実行している場所に関係なく、常にグローバルオブジェクトを参照するものを提供します。

#8:モジュールの名前空間のエクスポート

JavaScriptモジュールでは、次の構文を使用することがすでに可能でした。

import * as utils from './utils.mjs'

ただし、これexportまで対称構文は存在しませんでした。

export * as utils from './utils.mjs'

これは、次と同等です。

import * as utils from './utils.mjs' export { utils }

#9:明確に定義された-順番に

ECMA仕様では、for (x in y)  実行する順序が指定されていませんでした。これまでブラウザは独自に一貫した順序を実装していましたが、これはES2020で正式に標準化されています。

#10:import.meta

import.metaオブジェクトがで、ECMAScriptの実装によって作成されたnullプロトタイプ。

モジュールを考えてみましょうmodule.js

import.metaオブジェクトを使用して、モジュールに関するメタ情報にアクセスできます。

console.log(import.meta); // { url: "file:///home/user/module.js" }

urlモジュールのベースURLを示すプロパティを持つオブジェクトを返します。これは、スクリプトの取得元のURL(外部スクリプトの場合)、または含まれているドキュメントのドキュメントベースURL(インラインスクリプトの場合)のいずれかになります。

結論

JavaScriptコミュニティが進化し、進化している一貫性と速度が大好きです。JavaScriptが、10年前にブーイングされた言語から、今日の史上最強で最も柔軟で用途の広い言語の1つにどのように生まれたのかを見るのは、驚くべきことであり、本当に素晴らしいことです。

JavaScriptやその他のプログラミング言語をまったく新しい方法で学びたいですか?今日試してみるために取り組んでいる開発者向けの新しいプラットフォームに向かいましょう!

ES2020のお気に入りの機能は何ですか?TwitterやInstagramでツイートして私とつながることでそれについて教えてください!

これは、同じトピックに関する私のビデオから構成されたブログ投稿です。あなたがそれに愛を示すことができれば、それは私にとって世界を意味するでしょう!