sliceとspliceの違いを簡単にまとめる。

はじめに

文字の並びが似ているけれど使い勝手は全く異なる、sliceとspliceの違いについてまとめます。

sliceとspliceの違い

slice

• 元の配列の値を変更しない。
• 取得する値のstartとendの位置を指定するのみで値の挿入などはできない。

splice

• 元の配列の値を変更する。
• 取得する値の範囲を決めて、別の値を追加したり削除したりできる。

sliceが配列を参照のみするのに対して、spliceは積極的に配列の値を変化させたいときに使えます。

sliceの使用例

sliceはカッコ内に1つもしくは2つの数字を取ることができます。
最初の数字はスタート位置を、2つ目の数字は終了位置を示します。
仮に数字が1つの場合は指定したスタート位置から最後の配列まで取得します。

const numArray = [1, 2, 3, 4, 5, 6, 7, 8];

const list = numArray.slice(0, 2);

//出力　[1, 2]
console.log(list);

//出力　[1, 2, 3, 4, 5, 6, 7, 8]
//元の配列は変化していない。
console.log(numArray);

spliceの使用例

spliceの場合は、1つ目がスタート位置、2つ目がスタート位置から何個目までを取り出すかを示します。
そして3つ目以降に値がセットされた場合、スタート位置の後にそれらの値を追加します。
このように元の配列の値を変化させるメソッドを破壊的メソッドと呼びます。

const numArray = [1, 2, 3, 4, 5, 6, 7, 8];

const list = numArray.splice(0, 3, "one", "two", "three");

//出力　[1, 2, 3]
console.log(list);

//出力　["one", "two", "three", 4, 5, 6, 7, 8]
//元の配列が変化している。
console.log(numArray);

さいごに

使い勝手が良いのは元の配列を破壊せずに配列内の任意の値を持ってこれるsliceだと思います。
しかし、前から2つずつ塊として配列から取ってきたい場合などはspliceの方が便利な場合もあります。