JavaScripではsliceメソッドを使うともとの配列はそのままで、要素を削除した配列を新たに作ることができる非破壊の処理です。
ここではsliceメソッドの使い方をまとめています。
sliceメソッドの使い方
sliceメソッドは配列に対して実行するもので、配列の指定した要素だけを抜き出すことができます。
第１引数で開始番号、第2引数で終了番号を指定することで、指定したところ要素だけを抜き出した配列を新たに作ります。
arr.slice(開始番号,終了番号)- 開始番号から、終了番号の手前までの要素を抜き出す。
- 終了番号の要素は含まない。
- 終了番号がない場合は、配列の最後の用をまでを表示
sliceは非破壊的なため、元の配列はそのまま残っています。
sliceメソッドの実例｜開始番号と終了番号を指定した場合
例えば以下のように[“aaa”,”bbb”,”ccc”,”ddd”,”eee”]が入った変数「arrs」があるとします。
ここから、0番目から、1番目の要素までを抜き出したい場合は、sliceの第一引数で「0」を、第二引数で「2」を指定します。
（※終了番号で指定した一つ前までの要素を抜き出す）
arrs=["aaa","bbb","ccc","ddd","eee"]
arrs.slice(0, 2)
//処理結果
//["aaa", "bbb"]非破壊処理となるため、元の変数「arrs」を参照すると、データは元のままです。
arrs
//出力
//["aaa","bbb","ccc","ddd","eee"]終了番号を指定しない場合
第2引数で終了番号を記載しない場合は、指定した番号以降の要素を全て抜き出します。
arrs=["aaa","bbb","ccc","ddd","eee"]
arrs.slice(2)
//処理結果
//["ccc", "ddd", "eee"]元の変数を置き換える（破壊的処理）
元の変数を置き換える、破壊的な処理がしたい場合は、元の変数にsliceしたものを代入します。
arrs=["aaa","bbb","ccc","ddd","eee"]
arrs = arrs.slice(3)
arrs
//処理結果
//["ddd", "eee"]指定した要素だけを削除する方法
「slice」と「スプレッド構文」を組み合わせると、指定した要素だけを非破壊で削除することができます。
以下の「n」の部分に削除したい配列の番号を入れます。
処理後の変数 = [
...元の変数.slice(0, n),
...元の変数.slice(n)
]実例
例えば、arrs=["000", 111, 222, 333, 444]がある場合に、配列番号２の「222」のみを非破壊で削除したい場合は以下のようにします。
arrs=["000", 111, 222, 333, 444]
brr = [
...arrs.slice(0, 2),
...arrs.slice(3)
]
//処理結果
// ['000', 111, 333, 444]
指定した「222」が削除されていることがわかります。
なお、元の変数「arrs」はそのままです。
arrs
//中身
["000", 111, 222, 333, 444]以下でスプレッド構文などでどのような処理をしているかを解説します。
スプレッド構造とは何か？使い方
スプレッド構文とは、配列の前に「…」をつけることで、配列のカッコ [ ]を外す処理です。
配列同士を結合する場合に使います。
[ ...配列 ]スプレッド構文を使った場合、[ ]で囲む必要があります。
console.logで出力する場合は[ ]がなくてもエラーになりませんが、変数に代入したり、処理として実行しようとすると、「Uncaught SyntaxError: Unexpected token ‘…’」というエラーが発生します。
実例
スプレッド構文を使うと、カッコを外します。
a = [1,2]
console.log(...a)
//1 2カッコを外した配列の要素同士を、カッコで囲むと新たな配列を作ることができます。
a = [1,2]
b = [3,4]
console.log( [ ...a, ...b ] )
//[1,2,3,4]
なお、スプレッド構文を使用せずに配列どうしをつなげても、要素はくっつきません。
a = [1,2]
b = [3,4]
console.log(a+b)
//1,23,4スプレッド構文は配列どうしを結合して、新たな配列を作る時に多用します。
注意点：Uncaught SyntaxError: Unexpected token ‘…’
console.logで出力する以外で、[ ]で囲むことなくスプレッド構文を実行しようとすると「Uncaught SyntaxError: Unexpected token ‘…’」というエラーが発生します。
a = [1,2]
...a
//Uncaught SyntaxError: Unexpected token '...'arrs=["000", 111, 222, 333, 444]
...arrs.slice(0, 2)
//Uncaught SyntaxError: Unexpected token '...'スプレッド構文とsliceをつなげた処理
「…arrs.slice(0, 2)」のようにスプレッド構文とsliceをつなげた処理では、sliceメソッドを実行した後の配列に対してスプレッド構文を実行します。
arrs=["000", 111, 222, 333, 444]
bar = [ ...arrs.slice(0, 2) ]
//処理結果
//['000', 111]
（ただし、1つの配列に対してsliceを実行するだけであればスプレッド構文は不要です）
スプレッド構文とsliceをつなげる処理は、指定した要素を非破壊で削除する場合に威力を発揮します。
考え方としてはsliceメソッドを使って、以下の２つの配列を作成します。
- 指定した要素より前の要素を含む配列
- 指定した要素よりも後ろの値を含む配列
この配列をそれぞれスプレッド構文で展開して、[ ]で囲めば、指定した要素を削除した配列ができあがります。
削除する配列を変数で指定する方法
以下のように配列の中で削除したい要素を変数として渡すこともできます。
//削除する配列番号（nには数値が入る）
rmIndex = n
bar = [
...arr.slice(0,rmIndex),
...arr.slice(rmIndex+1)
]実例
arrs = [ "aaa", "bbb", "ccc", "ddd", "eee" ]
//削除する配列番号
rmIndex = 2
//sliceを使った削除
arrs = [
...arrs.slice(0,rmIndex),
...arrs.slice(rmIndex+1)
]
console.log(arrs)
//出力
//["aaa", "bbb", "ddd", "eee"]変数rmIndexで指定した番号、arrs[2]の要素を削除します。
削除する番号を動的に指定すれば、より柔軟に使うことができます。
指定した要素を追加する方法
sliceメソッドとスプレッド構文を使うと、非破壊で配列の中に指定した要素を追加することができます。
//元の配列
a = [1,2,3,4]
//要素を追加する配列番号と要素
addId = 2
addItem = "aaa"
//指定した場所に挿入
a =[
...a.slice(0, addId),
...[addItem],
...a.slice(addId)
]
console.log(a)
//出力
[1, 2, "aaa", 3, 4]ポイント
sliceするときに、slice(0, n)とすると、n番目より前の要素を抜き出します。slice(n)とすると、n番目以降の要素を抜き出します。
a = [1,2,3,4]
a.slice(0, 2)
//処理結果
//[1, 2]a = [1,2,3,4]
a.slice(2)
//処理結果
//[3, 4]この２つをスプレッド構文で展開して、その間に追加したい要素を挟めば、指定した場所に要素を追加することができます。
a = [1,2,3,4]
b = "aaa"
c = [
...a.slice(0, 2),
b,
...a.slice(2)
]
//処理結果
//[1, 2, 'aaa', 3, 4]指定した配列の要素を追加する方法
配列の指定した場所に、別の配列の要素を追加することもできます。
a = [1,2,3,4]
b = [ "aaa", "bbb", "ccc"]
c = [
...a.slice(0, 2),
...b,
...a.slice(2)
]
//処理結果
//[1, 2, 'aaa', 'bbb', 'ccc', 3, 4]
