JavaScriptで配列から特定の値を削除して、別の値で置き換える方法 (Array.prototype.splice)

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptで配列から特定の値を削除して、別の値で置き換える方法について解説していきます。

1 JavaScriptで配列から特定の値を削除して、別の値で置き換える方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

JavaScriptで配列から特定の値を削除して、別の値で置き換える方法

JavaScriptで配列から特定の値を削除して、別の値で置き換えるには、Array.prototype.splice()を使用します。

SampleCodeは、次のとおりです。

この SampleCodeでは、Array.prototype.findIndex()で特定の値のIndexを取得して、

その情報をもとにArray.prototype.splice()を使用して、値を削除して、別の値で置き換えています。

const dataSetList = [
  { order: 1, val: "Robotama" },
  { order: 2, val: "Saitama" },
  { order: 3, val: "Tama" },
  { order: 4, val: "Hakutou" },
  { order: 5, val: "Momo" },
];
/** 1. Update対象の value */
const targetVal = "Saitama";

/** 2. Updateする・Setする Data */
const updateData = { order: 2, val: "Gunmar" };

console.group("Test");

// 3. findIndex()で条件に、Matchするvalueのindex番号を取得する。
const updateTargetIndex = dataSetList.findIndex(
  (dataSet) => dataSet.val === targetVal
);
console.log("updateTargetIndex", updateTargetIndex);
// 4. 該当の Targetが存在する場合 => oldValue を削除して、newValueで、置き換える
if (updateTargetIndex !== -1) {
  // 5. Array.prototype.splice() で、oldValue を削除して、newValueで、置き換える
  dataSetList.splice(updateTargetIndex, 1, updateData);

  console.log("dataSetList", dataSetList);
}

console.groupEnd();

SampleCodeをコンソールで実行すると、次のとおりです。