JavaScriptでループ処理なしに条件に一致する配列の要素へ新しい値を割り当てる方法

配列内の特定の条件に一致する要素に対して、forループなどの繰り返し処理を使わずに新しい値を割り当てたい場合は、filter()メソッドとmap()メソッドを組み合わせると簡単に実現できます。

基本的な考え方

まずfilter()で条件に一致するオブジェクトだけを抽出し、その結果に対してmap()で目的のプロパティを書き換えます。filter()は元のオブジェクトへの参照を返すため、map()内での変更が元の配列にも反映されるのがポイントです。

対象となる配列の例

const studentDetails = [
    {Name: "John"},
    {Name: "David"},
    {Name: "Bob"},
    {Name: "Mike"}
]

この配列の中から「Bob」を見つけ出し、名前を新しい値に書き換えてみましょう。

サンプルコード

const studentDetails = [
    {Name: "John"},
    {Name: "David"},
    {Name: "Bob"},
    {Name: "Mike"}
]

// 変更したい名前を指定
var changeName = "Bob";

// 条件に一致する要素を抽出して値を書き換える
studentDetails.filter((obj) => obj.Name === changeName).map((obj) =>
  obj.Name = "Carol");

console.log(studentDetails);

コードの解説

・filter((obj) => obj.Name === changeName)：Nameプロパティが「Bob」と一致するオブジェクトのみを新しい配列として返します。
・.map((obj) => obj.Name = "Carol")：抽出されたオブジェクトのNameプロパティを「Carol」に書き換えます。

プログラムの実行方法

上記のプログラムはNode.js環境で、次のコマンドを実行します。

node fileName.js

ここでは、ファイル名を「demo98.js」として保存した場合の実行例を示します。

実行結果

PS C:\Users\Amit\JavaScript-code> node demo98.js
[
    { Name: 'John' },
    { Name: 'David' },
    { Name: 'Carol' },
    { Name: 'Mike' }
]

補足：注意点

この方法では元の配列内のオブジェクト自体が書き換えられます。元のデータを保持したい場合は、スプレッド構文（{ ...obj }）などを使ってオブジェクトのコピーを作成してから変更するようにしましょう。