はじめに
この実験では、比較関数に基づいて配列内の値を置き換えるか追加する JavaScript のプログラミング演習を行います。この演習を通じて、スプレッド演算子、Array.prototype.findIndex()、Array.prototype.push()、およびArray.prototype.splice()を使って JavaScript の配列を操作する方法を学びます。この実験は、JavaScript における配列と関数の操作技術を向上させるのに役立ちます。
配列の値を置き換えるか追加する方法
配列内の項目を置き換えるか、存在しない場合は追加するには、次の手順に従います。
- スプレッド演算子 (
...) を使って配列の浅いコピーを作成します。 Array.prototype.findIndex()を使って、提供された比較関数compFnを満たす最初の要素のインデックスを見つけます。- そのような要素が見つからない場合は、
Array.prototype.push()を使って新しい値を配列に追加します。 - それ以外の場合は、
Array.prototype.splice()を使って見つかったインデックスの値を新しい値で置き換えます。
この機能を実装する方法の例を以下に示します。
const replaceOrAppend = (arr, val, compFn) => {
const res = [...arr];
const i = arr.findIndex((v) => compFn(v, val));
if (i === -1) res.push(val);
else res.splice(i, 1, val);
return res;
};
この関数をオブジェクトの配列でこのように使うことができます。
const people = [
{ name: "John", age: 30 },
{ name: "Jane", age: 28 }
];
const jane = { name: "Jane", age: 29 };
const jack = { name: "Jack", age: 28 };
replaceOrAppend(people, jane, (a, b) => a.name === b.name);
// [ { name: 'John', age: 30 }, { name: 'Jane', age: 29 } ]
replaceOrAppend(people, jack, (a, b) => a.name === b.name);
// [
// { name: 'John', age: 30 },
// { name: 'Jane', age: 28 },
// { name: 'Jack', age: 28 }
// ]
まとめ
おめでとうございます！「配列の値を置き換えるか追加する」実験を完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。