すべての開発者が知っておくべき新しい JavaScript 機能-jsチュートリアル-php.cn

New JavaScript Features Every Developer Should Know

JavaScript は常に進化しており、新しいバージョンが登場するたびに、開発者の作業を少し楽にする機能が導入されています。これらの機能の一部はゲームチェンジャーであり、コードの作成方法と管理方法を改善します。日々プログラマーである場合は、これらの新機能の最新情報を常に入手することが重要です。この投稿では、ツールキットに含めるべき非常に便利な最新の JavaScript 機能をいくつか紹介します。

1. オプションのチェーン (?.)

JavaScript の最近のバージョンで追加された最も便利な機能の 1 つは、オプションのチェーンです。これにより、中間プロパティが null か未定義かを気にすることなく、オブジェクト内の深くネストされたプロパティに安全にアクセスできるようになります。

例：

プロファイルを持っている場合と持っていないユーザーオブジェクトがあると想像してください。

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

ログイン後にコピー

オプションのチェーンを使用しないと、各プロパティを手動で確認する必要があり、コードが煩雑になる可能性があります。この小さな演算子は、これらのチェックを回避するのに役立ち、コードがすっきりして読みやすくなります。

2. ヌル合体演算子 (??)

null 合体演算子 (??) は、0 や false などの他の偽の値に影響を与えずに、null または未定義の値を処理するために導入されたもう 1 つの優れた機能です。

例

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

ログイン後にコピー

空の文字列 ("") または 0 を偽の値として扱う論理 OR (||) とは異なり、??左側が null または未定義の場合、右側のオペランドのみを返します。

3. Promise.allSettled()

JavaScript で Promise を使用している場合は、おそらく Promise.all() を使用したことがあるでしょう。しかし、Promise.allSettled() と呼ばれる、より強力なバージョンがあることをご存知ですか?このメソッドは、約束が履行されたか拒否されたかに関係なく、すべての約束が解決されるまで待機します。これは、一部が失敗した場合でも、すべての Promise の結果を知る必要がある場合に非常に便利です。

例：

const p1 = Promise.resolve(3);
const p2 = Promise.reject('Error');
const p3 = Promise.resolve(5);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
  });
Output:

[
  { status: "fulfilled", value: 3 },
  { status: "rejected", reason: "Error" },
  { status: "fulfilled", value: 5 }
]

ログイン後にコピー

これは、1 つの失敗によってプロセス全体が中断されることを望まない場合に、複数の非同期操作を処理する優れた方法です。

4. 大きい数の BigInt

私たちは皆、JavaScript の Number 型の制限を超えるという問題に直面したことがあります。 JavaScript の数値は、-(2^53 - 1) から (2^53 - 1) までの値に制限されます。それより大きな数値を扱う必要がある場合は、BigInt が味方です。

例：

const largeNumber = BigInt(1234567890123456789012345678901234567890);
console.log(largeNumber);

ログイン後にコピー

これにより、精度の誤差を気にせずに任意の大きな整数を操作できるようになります。

5. String.prototype.replaceAll()

文字列内のすべての部分文字列を置換しようとしたことがあるなら、おそらく replace() メソッドで正規表現を使用したことがあるでしょう。 replaceAll() を使用すると、はるかに簡単になります。このメソッドは、出現する部分文字列をすべて置き換えるので、グローバル正規表現フラグについて心配する必要はありません。

例：

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

ログイン後にコピー

シンプルかつクリーンで、正規表現の必要がなくなります。

6. 論理代入演算子 (&&=、||=、??=)

これらの新しい演算子は、論理演算子と代入を組み合わせるショートカットを提供します。これらは、より簡潔なコードを記述するための優れた方法です。

&&=: 左側の値が正しい場合にのみ値を割り当てます。
||=: 左側の値が false の場合にのみ値を割り当てます。
??=: 左側の値が null または未定義の場合にのみ値を割り当てます。

例：

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

ログイン後にコピー

これらのショートカットは、コードの冗長性を軽減するのに役立ちます。

7. Object.fromEntries()

キーと値のペアのリストをオブジェクトに変換する必要がある場合は、Object.fromEntries() を使用すると簡単に変換できます。これは、Map オブジェクトまたはタプルの配列を操作する場合に特に便利です。

例：

const p1 = Promise.resolve(3);
const p2 = Promise.reject('Error');
const p3 = Promise.resolve(5);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
  });
Output:

[
  { status: "fulfilled", value: 3 },
  { status: "rejected", reason: "Error" },
  { status: "fulfilled", value: 5 }
]

ログイン後にコピー

このメソッドは、オブジェクトを手動で構築するよりもクリーンで読みやすい代替手段です。

8. Array.prototype. flatMap()

このメソッドは、map() とその後に flat() を組み合わせたものです。これにより、結果のマッピングとフラット化の両方を 1 つのステップで行うことができ、配列の配列を操作する場合に非常に役立ちます。

例：

const largeNumber = BigInt(1234567890123456789012345678901234567890);
console.log(largeNumber);

ログイン後にコピー

これは、map() に続いて flat() を個別に実行するよりもクリーンです。

9. Array.prototype.at()

この新しいメソッドにより、負のインデックスを使用して配列の末尾から要素に簡単にアクセスできます。最後の項目のインデックスを手動で計算するよりもはるかに直感的です。

例：

let message = 'Hello World, Welcome to the World!';
let updatedMessage = message.replaceAll('World', 'Universe');
console.log(updatedMessage);  // Hello Universe, Welcome to the Universe!

ログイン後にコピー

配列内の最後の項目の操作が簡単になります。

10. トップレベルの待機

JavaScript では、常に async 関数内で await を使用する必要がありました。ただし、トップレベルの await を使用すると、モジュールのトップレベルで直接 await を使用できるようになり、非同期コードがより簡単になります。

例：

let count = 0;
count ||= 10;  // count is now 10, because it was falsy
console.log(count);  // 10
let name = null;
name ??= 'Anonymous';  // name is now 'Anonymous'
console.log(name);  // Anonymous

ログイン後にコピー

これにより、最新の JavaScript での非同期コードの操作がはるかに簡単になります。

11. プライベートクラスフィールド

JavaScript クラスで変数をプライベートにしたいと思ったことがあるなら、プライベートクラスフィールドが可能になりました。 # 記号を使用して、クラスの外部からアクセスできない変数を定義できるようになりました。

例：

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

ログイン後にコピー

12. 安定したソート (Array.prototype.sort())

以前は、JavaScript の sort() メソッドは安定していませんでした。つまり、等しい項目が予期しない方法でシャッフルされる可能性がありました。現在、JavaScript は、同じ値を持つ要素が配列内で元の順序を保持していることを保証します。

例：

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

ログイン後にコピー

これにより、より予測可能で一貫性のある動作が保証されます。

結論

JavaScript は進化し続けており、これらの機能は開発者に利便性とパワーの両方をもたらします。非同期コードを扱う場合でも、大量の数値を処理する場合でも、単にオブジェクトや配列の操作をクリーンアップする場合でも、これらの新機能は、よりクリーンで効率的なコードを作成するのに役立ちます。まだ行っていない場合は、プロジェクトで実験を開始し、ワークフローがどのようにスムーズになるかを確認してください。

コーディングを楽しんでください! ?

より価値のあるコンテンツを入手するには、私をフォローしてください

以上がすべての開発者が知っておくべき新しい JavaScript 機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。