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

javascript-prograshi(プロぐらし)-kv JavaScript
記事内に広告が含まれていることがあります。

spliceとは何か?

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

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


spliceメソッドの使い方

基本形

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

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

spliceメソッドでできること

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

spliceメソッドでできること
  1. 指定した要素を追加する。
  2. 指定した要素で置き換える。
  3. 指定した要素と複数の要素を置き換える。
  1. 指定した要素を追加する。
     ┗ arr.splice(挿入番号, 0, 挿入する要素)
     ┗ 削除する要素を0とすることで、要素追加のみに止める。
  2. 指定した要素で置き換える。
     ┗ arr.splice(挿入番号, 1, 挿入する要素)
     ┗ 元々挿入した場所にあったセルを削除する
  3. 指定した要素と複数の要素を置き換える
     ┗ arr.splice(挿入番号, 置き換えたい要素の数, 挿入する要素)


spliceメソッドの注意点

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

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

合わせて読みたい

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

【JavaScript】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”)
配列番号2に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")

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


非破壊で処理する場合

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

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

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

console.log(a)

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


タイトルとURLをコピーしました