JavaScript マップとオブジェクト スプレッドを使用してオブジェクト配列に追加のプロパティを追加する方法

追加プロパティによるオブジェクト配列の強化: 各要素に「アクティブ」を追加

実際のプログラミング シナリオでは、既存のオブジェクト配列を拡張する必要が生じる場合があります。追加のプロパティを使用します。たとえば、ユーザー データを表すオブジェクトの配列を考えてみましょう。各オブジェクトには「id」と「name」が含まれています。アクティビティのステータスを追跡するには、各オブジェクトに「Active」プロパティを追加します。

Array.prototype.map() を使用してオブジェクトを拡張する

この問題に対する 1 つのエレガントなアプローチは、 Array.prototype.map() メソッド。このメソッドは、元の配列の各要素に変換関数を適用することにより、新しい配列を作成します。この例では、オブジェクトを受け取り、追加の「Active」プロパティを「false」に設定して新しいオブジェクトを返す関数を定義します。

<code class="javascript">const updatedResults = Results.map(obj => ({
  ...obj, // Copy existing properties
  Active: 'false' // Add new "Active" property
}));</code>

map() メソッドを適用すると、新しい配列「updatedResults」。各オブジェクトには必要な「Active」プロパティがあります。元の "Results" 配列は変更されません。

オブジェクト スプレッド構文を理解する

関数内の "..." 構文は、オブジェクト スプレッド構文として知られています。すべての列挙可能なプロパティをあるオブジェクトから別のオブジェクトにコピーします。この場合、新しい「Active」プロパティを追加しながら、既存のプロパティ (「id」と「name」) を保持するためにこれを使用します。

出力検証

上記のコードを実行した後、 「updatedResults」配列をチェックして、各オブジェクトの「Active」プロパティが「false」に設定されていることを確認できます。

<code class="javascript">console.log(updatedResults);
// Output:
// [
//   { id: 1, name: 'Rick', Active: 'false' },
//   { id: 2, name: 'david', Active: 'false' }
// ]</code>

結論

Array.prototype.map( ) とオブジェクト スプレッド構文を使用すると、追加のプロパティを使用してオブジェクトの配列を簡単に拡張できます。この手法は、データ構造を動的に拡張および操作する必要があるさまざまなプログラミング シナリオに広く適用できます。

以上がJavaScript マップとオブジェクト スプレッドを使用してオブジェクト配列に追加のプロパティを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。