JavaScript で配列のオブジェクトを更新する

1. JavaScript で map() を使用してオブジェクトを更新する
2. JavaScript で findIndex() を使用してオブジェクトを更新する

配列は、固定のテンキーと動的な値を持つ JavaScript のオブジェクトであり、単一の変数に任意の量のデータを含めることができます。配列は 1 次元または多次元にすることができます。JavaScript 配列は、値を直接格納することも、JavaScript オブジェクトを格納することもできます。他の言語とは異なり、JS 配列には、同じ配列の異なるインデックスに異なるデータ型を含めることができます。

今日の記事では、JavaScript で配列のオブジェクトを更新する方法を説明します。

JavaScript には、map() と findIndex() を使用してオブジェクトを更新する 2つの方法があります。

JavaScript で map() を使用してオブジェクトを更新する

JavaScript によって提供されるこの組み込み配列メソッドは、元の配列を反復処理して新しい配列を作成し、指定された条件に基づいて要素を完成させます。矢印関数の代わりに、コールバック関数を渡すこともできます。map() と forEach() の唯一の違いは、map() が新しい配列を作成し、forEach() が元の配列を変更することです。

JavaScript での map() の構文

Array.prototype.map(element => $updateCondition);
Array.prototype.map($callbackFn);

パラメータ

$updateCondition：この必須パラメーターは、各要素に対して実行するアクションを指定します。

$callbackFn：呼び出される配列の各要素の関数を指定する必須パラメーターです。関数が呼び出されるたびに、結果が新しい配列に返されます。

戻り値

要素がコールバック関数の結果である新しい配列を返します。

コード例：

const osArray = [
  {id: 0, name: 'Windows'},
  {id: 1, name: 'Linux'},
  {id: 2, name: 'MacOS'},
];

const updatedOSArray =
    osArray.map(p => p.id === 1 ? {...p, name: 'Ubuntu'} : p);

console.log('After update: ', updatedOSArray);

出力：

After update:  [
    {id: 0, name: "Windows"},
    {id: 1, name: "Ubuntu"},
    {id: 2, name: "MacOS"}
]

JavaScript で findIndex() を使用してオブジェクトを更新する

この組み込み配列メソッドは JavaScript によって提供され、指定された条件に値が一致する要素のインデックスを検索します。矢印関数の代わりに、コールバック関数を渡すこともできます。2つのメソッド findIndex() と indexOf() には 1つの違いがあります。findIndex() は複雑なマッチング条件またはオブジェクトデータ型に使用され、indexOf() は単純な条件またはプリミティブデータ型に使用されます。

JavaScript での findIndex() の構文

Array.prototype.findIndex(element => $condition);
Array.prototype.findIndex($callbackFn);

パラメータ

$condition：これは必須パラメータです。ユーザーは、配列要素に関連する任意の条件を渡し、条件に一致する最初の一致する要素を見つけることができます。

戻り値

指定された条件を満たす数値インデックスを返します。指定された条件を満たす要素がない場合は、-1 が返されます。

コード例：

const osArray = [
  {id: 0, name: 'Windows'},
  {id: 1, name: 'Linux'},
  {id: 2, name: 'MacOS'},
];

elementIndex = osArray.findIndex((obj => obj.id == 1));
console.log('Before update: ', osArray[elementIndex]);
osArray[elementIndex].name = 'Ubuntu';
console.log('After update: ', osArray[elementIndex]);

出力：

Before update: {id: 1, name: 'Linux'}
After update: {id: 1, name: 'Ubuntu'}