配列の指定範囲の要素を別の要素に置き換える

Array オブジェクトの splice メソッドを使って配列に含まれる指定した範囲の要素を別の要素に置き換える方法を解説します。置き換える要素を指定しないことで指定範囲の要素を削除したり、置き換える指定範囲を 0 にすることで指定して位置に要素を挿入する方法としても利用できます。

(Last modified: 2023年02月03日)

配列の要素を別の要素に置き換える

Array オブジェクトの splice メソッドを使うと配列の指定した範囲の要素を別の要素に置き換えることができます。書式は次の通りです。

配列名.splice(開始インデックス)
配列名.splice(開始インデックス, 削除する要素数)
配列名.splice(開始インデックス, 削除する要素数, 追加要素1, 追加要素2, ...)

配列の開始インデックスから削除する要素数の分だけ要素を削除し、同じ位置に引数で指定した要素を追加します。戻り値として削除された要素が含まれる配列を返します。引数の削除する要素数、および追加要素は省略可能です。

次のサンプルをみてください。

let alpha = ['A', 'B', 'C', 'D', 'E'];

この配列のインデックス 1 の要素から 2 つ分の要素を、 'X' 、 'Y' 、 'Z' の 3 つの要素に置き換えてみます。

let alpha = ['A', 'B', 'C', 'D', 'E'];
alpha.splice(1, 2, 'X', 'Y', 'Z');

console.log(alpha);
>> ["A", "X", "Y", "Z", "D", "E"]

インデクス 1 の要素から 2 つ分の要素というのは 'B' 、 'C' です。この部分を 'X' 、 'Y' 、 'Z' に置き換えているので結果として上記のようになります。

splice メソッドで追加する要素を指定しない場合、指定の範囲の要素が単に削除されます。次の例を見てください。

let alpha = ['A', 'B', 'C', 'D', 'E'];
alpha.splice(1, 2);

console.log(alpha);
>> ["A", "D", "E"]

配列のインデックス 1 の要素から 2 つ分の要素を置き換えるのですが、置き換える要素を一つも指定していないので単にインデックス 1 から 2 つ分の要素が削除されています。

このように splice メソッドを使用することで、配列の任意の範囲の要素を削除することができます。

splice メソッドで削除する要素数を 0 に指定すると、削除される要素が 0 となり開始インデックスで指定した要素の前に引数に指定した要素が追加されます。次の例を見てください。

let alpha = ['A', 'B', 'C', 'D', 'E'];
alpha.splice(1, 0, 'X', 'Y');

console.log(alpha);
>> ["A", "X", "Y", "B", "C", "D", "E"]

配列のインデックス 1 の要素から 0 つ分の要素を置き換えるのですが、削除する要素数が 0 なので引数に指定した要素がインデックス 1 の前に追加されています。

このように splice メソッドを使用することで、配列の任意の位置に要素を追加することができます。

-- --

Arrayオブジェクトの splice メソッドを使って配列に含まれる指定した範囲の要素を別の要素に置き換える方法を解説しました。

( Written by Tatsuo Ikura )

Profile

プログラミングや開発環境構築の解説サイトを運営しています。