配列の要素の一部を置き換える

配列の要素を置き換える

spliceメソッドを使うと、配列の指定した位置にある要素を他の要素に置き換えることができます。

以下の例は配列の2番目の要素を、spliceメソッドの第3パラメータに指定した「fox」に置き換えます。

JS コード例

let animals = [ 'cat', 'dog', 'mouse'];

let remove_animals = animals.splice( 1, 1, 'fox');

console.log(animals);
// (3) ["cat", "fox", "mouse"]

console.log(remove_animals);
// ["dog"]

spliceメソッドは元の配列を直接編集し、取り除いた要素は別の配列として戻り値にします。

上記の例では変数animalsに入っている配列の2番目の要素を1つだけ取り出すために、spliceメソッドの第1パラメータに位置である「1」（配列の先頭は0から開始するので、2つ目の要素は「1」になります）」と、第2パラメータに取り出す要素の数である「1」を指定し、第3パラメータに指定した「fox」で置き換えます。
元々あった2番目の要素である「dog」は別の変数remove_animalsへ配列形式で入ります。

spliceメソッドは置き換える要素が一致する必要はありません。
以下の例は配列にある3つ目の要素「mouse」を、3つの要素に置き換えます。

JS コード例

let animals = [ 'cat', 'dog', 'mouse'];

let remove_animals = animals.splice( 2, 1, 'lion', 'fox', 'bear');

console.log(animals);
// (5) ["cat", "dog", "lion", "fox", "bear"]

console.log(remove_animals);
// ["mouse"]

もしspliceメソッドの第2パラメータを「0」にすると、置き換えではなく要素の挿入を行うことができます。
以下の例では配列の2番目に「fox」を追加します。

JS コード例

let animals = [ 'cat', 'dog', 'mouse'];
animals.splice( 1, 0, 'fox');

console.log(animals);
// (4) ["cat", "fox", "dog", "mouse"]

ちなみに負の値にしても0と同じ結果になります。

オブジェクトを含む配列の要素を置き換える

配列の要素にオブジェクトを含む場合についても、上記と同じように置き換えることができます。

JS コード例

let animals = [
	{
		name: "cat",
		id: 150001,
		voice: "にゃん"
	},
	{
		name: "dog",
		id: 150002,
		voice: "ワン"
	},
	{
		name: "mouse",
		id: 150003,
		voice: "チュウ"
	}
];

let lion = {
	name: "lion",
	id: 15004,
	voicde: "ガオ"
};
let remove_animals = animals.splice( 2, 1, lion);

console.log(animals);
// 0: {name: "cat", id: 150001, voice: "にゃん"}
// 1: {name: "dog", id: 150002, voice: "ワン"}
// 2: {name: "lion", id: 15004, voicde: "ガオ"}

console.log(remove_animals);
// 0: {name: "mouse", id: 150003, voice: "チュウ"}

要素の順番を末尾から数えて指定する

spliceメソッドの第1パラメータで置き換える位置を指定しますが、ここに負の値を指定することで末尾から数えた要素を指定することができます。
以下の例では配列の末尾の要素を、別の要素に置き換えます。

JS コード例

let animals = [ 'cat', 'dog', 'mouse'];

let remove_animals = animals.splice( -1, 1, 'fish', 'rhinos');

console.log(animals);
// (4) ["cat", "dog", "fish", "rhinos"]

console.log(remove_animals);
// ["mouse"]

配列の末尾の要素を指定する方法としては、配列の長さをlengthプロパティで取得して-1した値を指定することでも同じことができますが、負の値を指定した方が簡単です。
負の値を「-2」とすると末尾から2番目の要素、「-3」は末尾から3番目のように指定していくことができます。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。