【JavaScript】配列の要素を操作するsplice()メソッドを解説

こんにちは！Kです！

今回はJavaScriptで配列の要素を操作するメソッド、「splice()」について解説したいと思います。

前回の記事ではpush()とunshift()について解説しましたが、追加するという点でsplice()メソッドもあるということを言いました。

splice()メソッドは配列に要素を追加することができますが、実は配列の「要素の削除」も「要素の置換」もすることができるメソッドなんです。

今回もコード例を見ながら解説します。

splice()

splice()メソッドは、配列において要素を操作するメソッドです。
ここでいう要素の操作とは以下のことになります。
・要素の追加
・要素の削除
・要素の置換

配列の内容を変更したいときに使えますね。

基本構文を見てみましょう。

let items = array.splice(start[, count[, item1[, item2[, ...]]]])

引数の意味は以下の通りです。

start
　配列を変更する開始位置を表すインデックス。
　この引数（第一引数）は必須です。
　※補足
　・値が配列の長さより大きい場合は、startは配列の長さに設定されます。
　　この場合、削除される要素はありませんが、このメソッドは追加関数として動作し、提供された item[n*] の数だけ要素を追加します。

　・値が負数の場合は、配列の末尾から要素数を戻ったところから始まります。
　　（-1が原点で、-n は最後の要素から n 番目であることを意味します。
したがってインデックスが「array.length - n」であるのと同等です)。

　・startの絶対値が配列の長さよりも大きい場合は、インデックス 0 から始まります。

count
　配列の start から取り除く古い要素の数を示す整数。
　この引数（第二引数）はオプションなので省略可能です。
　※補足
　・conut 引数が省略された場合、または array.length - start 以上（要は、start から始まり、配列に残る要素の数以上）の場合、start 以降の全ての要素が取り除かれます。

　・conut が 0 か負数の場合、どの要素も取り除かれません。
　　この場合、少なくとも一つの新しい要素を指定する必要があります。

item1, item2, ...
　配列に追加する要素。
　start から始まります。
　この引数（第三引数）はオプションなので省略可能です。
　※補足
　要素を指定しなかった場合、splice() は単に配列から要素を取り除きます。

返値
削除された要素を含む配列です。
要素が一つのみ削除された場合は、要素数 1 の配列が返されます。
要素が削除されなかった場合は、空の配列が返されます。

堅苦しく書いていますが、ものすごく簡単に書くと、

削除された要素 = splice(index, 削除する数, 追加する要素)

で覚えておけばいいと思います！

それではコード例です。

コード例：要素の追加

// 配列
const moji = ['A', 'B', 'C'];

// 要素を追加
const items = moji.splice(0, 0, 'D');

// 結果出力
console.log('削除した要素：' + items);
console.log('配列の要素：' + moji);

■実行結果

削除した要素：
配列の要素：D,A,B,C

上の例では、splice()メソッドの第一引数に追加する要素の位置を指定しています。
第二引数には要素を追加するので 0 となります。
そして、第三引数に追加する要素を指定することで配列に要素を指定しています。

push()、unshift()と違って要素を追加する位置を指定することができますね！

コード例：要素の削除

// 配列
const moji = ['A', 'B', 'C'];

// 要素を削除
const items = moji.splice(1, 2);

// 結果出力
console.log('削除した要素：' + items);
console.log('配列の要素：' + moji);

■実行結果

削除した要素：B,C
配列の要素：A

上の例では、splice()メソッドの第一引数で削除する要素の開始位置を指定しています。
そして、第二引数で削除する要素の数を指定しています。

仮に第一引数のみ「moji.splice(2)」とすれば、実行結果の「配列の要素」は、「A,B」となります。

ちなみに配列の要素を削除するメソッドには、pop()メソッド、shift()メソッドなどもあります。

コード例：要素の置換

// 配列
const moji = ['A', 'B', 'C'];

// 要素を置換
const items = moji.splice(1, 1, 'D');

// 結果出力
console.log('削除した要素：' + items);
console.log('配列の要素：' + moji);

■実行結果

削除した要素：B
配列の要素：A,D,C

上の例では、配列の要素「B」を「D」に置換している例です。
このように置換したい位置を第一引数で指定し、第二引数で置換（削除）する要素の数を指定しています。
第三引数は置換する要素ですね。

置換というより交換といった方が分かりやすいかもしれないですね！

最後に

今回はsplice()メソッドについて解説しました。

配列の要素を追加したり、削除したり、置換したりといろいろな使い方ができましたね！
少しトリッキーなメソッドですが、使い所はありますので必要に応じて使いましょう！

それでは、また！

Follow me!