はじめに
プログラミング学習中の@kat_logと申します。
JSのslice関数の引数の動きが若干ややこしやなので共有です
slice関数とは
→配列をシャローコピーする関数。
引数により配列内のどこからどこまでをコピーするか指定もできます。
正確には文字列もコピーできます。
引数無し
→配列全体をコピー
slice()
let array = [1, 2, 3, 4, 5];
let result = array.slice();
console.log(result); // [1, 2, 3, 4, 5]
引数を省略すると、元の配列や文字列の全てをコピーします。
第1引数のみ
→引数で指定したインデックスから最後までの部分を抽出します
slice(2)
let array = [1, 2, 3, 4, 5];
let result = array.slice(2);
console.log(result); // [3, 4, 5]
（↑例）2を指定すると、添字（インデックス）は0から数えるので上記の例ではインデックス2から開始し、最後までの要素（3, 4, 5）が戻り値として返されます。
（便利テクニック）第1引数にマイナスの指定
→マイナスのインデックスを指定すると、配列の後ろから指定した数の要素を抽出します
slice(-2)
const srcArray = [1, 2, 3, 4, 5];
const resArray = srcArray.slice(-2);
console.log(resArray); // [4, 5]
（コメントにて@ffgogfb454 さんにご教示いただきました。ありがとうございます🙇）
第1引数&第2引数
→開始インデックスから終了インデックスの手前までの部分が抽出されます
slice(1, 4)
let array = [1, 2, 3, 4, 5];
let result = array.slice(1, 4);
console.log(result); // [2, 3, 4]
上記の例ではインデックス1からインデックス4の手前が戻り値として返されます。
つまり
第1引数：含む
第2引数：含まない
です！
補足 オリジナルへの反映
配列内の要素が参照型（配列やオブジェクト）の場合は、コピー後を書き換えるとオリジナルにも反映されます
参照型はオリジナルにも影響します
// 元の配列（オブジェクトを含む）
let originalArray = [1, 2, {a: 3}, 4, 5];
// 配列をコピー
let copiedArray = originalArray.slice();
// コピーした配列のオブジェクトを変更
copiedArray[2].a = 100;
console.log('Original Array:', originalArray); // [1, 2, {a: 100}, 4, 5]
console.log('Copied Array:', copiedArray); // [1, 2, {a: 100}, 4, 5]
配列の中身が文字列などプリミティブ値（数値、文字列、真偽値など）の場合影響なしです
プリミティブ型はオリジナルに影響なしです
// 元の配列
let originalArray = [1, 2, 3, 4, 5];
// 配列をコピー
let copiedArray = originalArray.slice();
// コピーした配列に要素を追加
copiedArray[0] = 99;
copiedArray.push(6);
console.log('Original Array:', originalArray); // [1, 2, 3, 4, 5]
console.log('Copied Array:', copiedArray); // [99, 2, 3, 4, 5, 6]
お読みいただきありがとうございました。
ここもややこしポイントでしたね…
おわりに
以上sliceについて共有でした！
どなたかの参考になれば嬉しいです。