【JavaScript】spliceとは何か？使い方を実例で解説｜配列の指定した場所に要素を追加する方法（破壊的）

JavaScript

2023/8/262024/1/25

記事内に広告が含まれていることがあります。

spliceとは何か？

spliceとは「指定した位置に追加や、その追加位置以降の要素を削除する」といった処理ができるJavaScriptのメソッドです。

破壊的な処理なので、対象となる元の要素自体を直接変更します。

spliceメソッドの基本形は以下のようになります。

array.splice(挿入番号, 削除する要素数, 挿入する要素)

第２引数の指定方法により以下の３つのパターンの処理を行うことができます。

spliceメソッドでできること

破壊的処理になるため、対象となる配列自体が置き換わります。

データを壊したくない（破壊処理にしたくない）場合は、spliceではなく、sliceとスプレッド構文など別の方法を使う必要があります。

合わせて読みたい

非破壊で要素の追加や削除を行うために必要となる、sliceメソッドとスプレッド構文の使い方については下記をご参考ください。

指定した要素を追加するには、第1引数に挿入したい配列番号を記述し、第2引数を「0」にし、第3引数で追加したい要素を指定します。

arr.splice(挿入番号, 0, 挿入する要素)

削除する要素を0とすることで、要素追加のみにします。

a = [1,2,3,4]

a.splice(2,0,"aaa")
console.log(a)

//出力
[1, 2, "aaa", 3, 4]

a.splice(2,0,"aaa")
配列aの配列番号2に、aaaという要素を追加。

上記の処理を非破壊で行う場合は、スプレッド構文とsliceメソッドを使います。

a = [1,2,3,4]

a = [
  ...a.slice(0,2),
  ...["aaa"],
  ...a.slice(2)
]

console.log(a)

//出力
[1, 2, "aaa", 3, 4]

指定した要素で置き換えるには、第1引数に挿入したい配列番号を記述し、第2引数を「1」にし、第3引数で追加したい要素を指定します。

arr.splice(挿入番号, 1, 挿入する要素)

削除する要素を1とすることで、指定した場所の要素を削除します。

a = [1,2,3,4]

a.splice(2,1,"aaa")
console.log(a)

//出力
[1, 2, "aaa", 4]

a.splice(2,1,”aaa”)
配列番号２にaaaを挿入し、後ろの要素を一つ削除。

上記の処理を非破壊で行う場合は、スプレッド構文とsuliceメソッドを使います。

a = [1,2,3,4]

a = [
  ...a.slice(0,2),
  ...["aaa"],
  ...a.slice(3)
]

console.log(a)

//出力
[1, 2, "aaa", 4]

指定した要素と複数の要素を置き換えるには、第1引数に挿入したい配列番号を記述し、第2引数で「置き換えたい要素の数」を指定し、第3引数で追加したい要素を指定します。

arr.splice(挿入番号, 置き換えたい要素の数, 挿入する要素)

第2引数で指定した数だけ、元々の要素を削除します。

a = [1,2,3,4,5,6]

a.splice(1,4,"aaa")
console.log(a)

//出力
[1, "aaa", 6]

a.splice(1,4,"aaa")

配列番号１にaaaを挿入して、後ろの要素を４つ削除する。

上記の処理を非破壊で行う場合は、スプレッド構文とsuliceメソッドを使います。

a = [1,2,3,4,5,6]

a = [
  ...a.slice(0,1),
  ...["aaa"],
  ...a.slice(5)
]

console.log(a)

//出力
[1, "aaa", 6]