最新の JavaScript 機能: ES3 の新機能

JavaScript は常に進化しており、開発者の作業を容易にするために設計された新しい機能セットが毎年提供されています。最新のアップデートである ES2023 には、コードの記述、読み取り、保守の方法を強化する新しいツールが満載されています。プロジェクトで使い始めたい傑出した機能のいくつかを見てみましょう。

1. 配列 findLast および findLastIndex

配列内の項目を末尾から検索する必要があったことがありますか? ES2023 では、まさにそれを行う findLast と findLastIndex が導入されました。

• findLast: このメソッドは、指定された条件を満たす配列内の最後の要素を検索します。

  const numbers = [1, 2, 3, 4, 5];
  const lastEven = numbers.findLast(num => num % 2 === 0); // 4

  // Find last user who is 18 years old in large array
  const users = [/* array with 10000 users */]; 
  users.findLast(user => user.age === 18);

• findLastIndex: このメソッドは、最後の要素のインデックスを返します。

  const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0); // 3

これらのメソッドは、検索ロジックを逆にする必要がある状況に最適で、コードがより明確になり、より効率的になる可能性があります。

2. JavaScript ファイル内のハッシュバング (#!)

JavaScript でコマンドライン ツールを作成している場合は、ハッシュバンの新しいサポートに感謝するでしょう。 #! を追加すると、ファイルの先頭でインタープリタを直接指定すると、外部コマンドを必要とせずにスクリプトを実行できるようになります。

#!/usr/bin/env node

console.log("Hello, world!");

これは、特に Node.js で CLI ツールを構築する人にとって、小さいながらも便利な機能です。

3. WeakMap キーとしてのシンボル

以前は、WeakMap でキーとして使用できるのはオブジェクトのみでしたが、ES2023 ではシンボルも使用できるように変更されました。

const wm = new WeakMap();
const sym = Symbol('key');
wm.set(sym, 'value');

console.log(wm.get(sym)); // 'value'

// Storing hidden game data that players can't easily access, such as secret unlock codes:
const secretCode = Symbol('vc-cheat-code');
const gameData = new WeakMap();
gameData.set(secretCode, 'PANZER-ASPIRINE-BIGBANG-PRECIOUSPROTECTION'); 

この機能強化により、特にシンボルが提供する衝突のない固有のキーが必要な場合に、WeakMap の汎用性がさらに高まります。

4. メソッドによる配列のグループ化

新しいグループ メソッドを使用すると、配列要素のグループ化が非常に簡単になりました。

• group: このメソッドは、配列をオブジェクトに編成します。キーは指定した関数によって決定され、値は各キーに一致する要素の配列となります。

  const animals = [
    { type: 'mammal', name: 'dog' },
    { type: 'bird', name: 'sparrow' },
    { type: 'mammal', name: 'cat' },
  ];

  const grouped = animals.group(({ type }) => type);
  console.log(grouped);
  // {
  //   mammal: [{ type: 'mammal', name: 'dog' }, { type: 'mammal', name: 'cat' }],
  //   bird: [{ type: 'bird', name: 'sparrow' }]
  // }

この機能は、データを迅速かつ効率的に分類する必要があるシナリオに最適です。

5. Array.prototype.toSorted および Array.prototype.toReversed()

toSorted を使用すると、配列の並べ替えがより簡単になります。元の配列を変更する sort とは異なり、toSorted は新しい並べ替えられた配列を返し、toReversed は元の配列を変更せずに新しい反転された配列を返します。

const arr = [3, 1, 4, 1, 5];
const sortedArr = arr.toSorted();
console.log(sortedArr); // [1, 1, 3, 4, 5]
console.log(arr); // [3, 1, 4, 1, 5]

let data = [/* important data that shouldn't be modified */];
let reversedData = data.toReversed(); // Safely reverse

この方法は、並べ替えられたバージョンを操作しながら元の配列を保持する必要がある場合に最適です。

6. Array.prototype.with

with メソッドは、特定のインデックスの要素を置き換えることによって、新しい配列を作成する簡単な方法を提供します。

const numbers = [10, 20, 30, 40];
const newNumbers = numbers.with(2, 25); // [10, 20, 25, 40]

このメソッドは、配列を不変に更新する場合に最適で、関数型プログラミング パターンでの状態の管理が容易になります。

7. Promise.withResolvers

Promise.withResolvers のおかげで、Promise の管理がかつてないほど簡単になりました。この新しいメソッドを使用すると、Promise とその解決および拒否機能を一度に作成できます。

const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => resolve("done"), 1000);

promise.then(console.log); // "done"

これは、特にコンストラクターの外部から Promise の結果を制御する必要がある場合に、非同期操作を処理するためのすっきりとした簡潔な方法です。

ES2023のブラウザサポート

JavaScript の最新バージョンである ES2023 は、2023 年に完成したばかりなので非常に新しいものです。つまり、すべての Web ブラウザがまだその新機能を使用できるわけではありませんが、次のことが可能になり始めています。

• Firefox、Chrome、Edge は一部の機能 Array.prototype.findLast() および Array.prototype.findLastIndex() をサポートしています。
• Safari はこれらの機能をまだサポートしていません。

• Node.js

  • Node.js バージョン 19.0 以降では、以下を使用できます。
    • Array.prototype.findLast()
    • Array.prototype.findLastIndex() 今後のアップデートでさらに ES2023 機能が追加される予定です。

トランスパイラー:
新しい ES2023 機能を使用するには、開発者は、Babel などのトランスパイラーと呼ばれるツールを使用して、ES2023 コードをより多くのブラウザーが理解できる古いバージョンに変換できます。こうすることで、ブラウザの準備がまだ整っていない場合でも、新しい機能を使い始めることができます。

現在、ES2023 のサポートはまだ拡大中です。 Firefox や Chrome などの大きなブラウザには、その機能の一部が組み込まれ始めています。何がどこでサポートされているかの詳細については、「使用できますか」を確認してください。トランスパイラーを使用すると、これらの新機能を今日から使用できるようになりますが、今後数年間でブラウザーが追いつくのを待ちます。

結論

ES2023 は、JavaScript をより強力にし、扱いやすくするさまざまな新機能をもたらします。配列メソッドの強化から Promise 処理の改善まで、これらの更新はすべて、コードをよりクリーンかつ効率的にすることを目的としています。 JavaScript は成長と進化を続けるため、これらの変更を常に最新の状態に保つことで、言語を常に最大限に活用することができます。

参考文献:

1. TC39 提案
2. ECMA-262 ドラフト
3. MDN

以上が最新の JavaScript 機能: ES3 の新機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。