配列から要素をコピーする方法(slice、splice)

投稿日:2022/06/27 最終更新日:2022/06/27

配列から要素をコピーする方法(slice、splice)

配列から要素をコピーする方法でsliceとspliceがあります。

今回はsliceとspliceの違いを踏まえて配列から要素をコピーする方法を解説します。

sliceでコピーする

const fruits = ['banana', 'apple', 'orange', 'kiwi', 'grape'];
const select = fruits.slice(1, 3); // 'apple'と'orange'をコピーする
console.log(fruits); // ['banana', 'apple', 'orange', 'kiwi', 'grape'] :変化なし
console.log(select); // ['apple', 'orange'] :'apple', 'orange'のみコピー

sliceは元の配列を変えることなく別の配列としてコピーすることが出来ます。

slice(スタート地点, ゴール地点);

第1引数はコピーする範囲のスタート地点を選択します。配列の数え方は0からなので、配列の最初の要素をスタート地点にしたい場合は0、2番目の位置は1と、n-1番目になりますので注意しましょう。

第2引数はコピーする範囲のゴール地点を選択します。こちらはn番目なので、3番目の位置は3、4番目の位置は4となりますので、第1引数とは数え方が異なります。

spliceでコピーする

const fruits = ['banana', 'apple', 'orange', 'kiwi', 'grape'];
const select = fruits.slice(1, 2); // 'apple'と'orange'をコピーする
console.log(fruits); // ['banana', 'kiwi', 'grape'] :'apple', 'orange'は削除
console.log(select); // ['apple', 'orange'] :'apple', 'orange'のみコピー

sliceは元の配列を変更し、かつ別の配列としてコピーすることが出来ます。

slice(スタート地点, スタートからコピーする数);

第1引数はコピーする範囲のスタート地点を選択します。sliceと同様に配列の数え方は0からなので、配列の最初の要素をスタート地点にしたい場合は0、2番目の位置は1と、n-1番目になりますので注意しましょう。

第2引数はスタート地点からコピーする数を選択します。例のように’apple’から’kiwi’をコピーしたいので、第1引数は’apple’の1番目(n-1)、第2引数は’apple’から’kiwi’まで3つの要素がありますので、第2引数に3を入れるということです。

まとめ

sliceとspliceは両方配列のコピーを行うことが出来ます。しかし、元の配列を変化する or しないの違いがありますので、使いどころは異なってきますので、注意が必要です。