JavaScriptでのidによる要素の変更

変数 arr にオブジェクトの配列が 格納されているとします：

javascriptlet arr = [
  {
    id: 'GYi9GauC4gBF1e2SixDvu',
    prop1: 'value11',
    prop2: 'value12',
    prop3: 'value13',
  },
  {
    id: 'IWSpfBPSV3SXgRF87uO74',
    prop1: 'value21',
    prop2: 'value22',
    prop3: 'value23',
  },
  {
    id: 'JAmjRlfQT8rLTm5tG2m1L',
    prop1: 'value31',
    prop2: 'value32',
    prop3: 'value33',
  },
];

配列のとある要素を変更したいとします。 新しいデータが、例えば次のような変数に 格納されているとします：

javascriptlet data = {
  id: 'IWSpfBPSV3SXgRF87uO74',
  prop1: 'value21 !',
  prop2: 'value22 !',
  prop3: 'value23 !',
};

上記のオブジェクトでは、id が 配列の2番目の要素の id と一致しており、 プロパティの値は異なっています。 言い換えると、data の id プロパティには、 変更したい配列要素の id が 格納されています。

この変更を実行しましょう。 そのためには、ループで配列要素を走査し、 id が検索対象と一致する場合には 要素を置き換え、一致しない場合は 要素を変更せずそのままにします：

javascriptlet res = arr.map(elem => {
  if (elem.id === data.id) {
    return data;
  } else {
    return elem;
  }
});

三項演算子を使用してコードを短縮できます：

javascriptlet res = arr.map(elem => elem.id === data.id ? data : elem);