JavaScript | 配列の一部をコピーして、新しい配列を作る(slice メソッド)

JavaScript JavaScript
スポンサーリンク

主な内容の要点

slice() メソッドの基本

  • 役割:配列の一部をコピーして、新しい配列を作る
  • 元の配列は変わらない(非破壊的)

使い方

array.slice()
array.slice(開始位置)
array.slice(開始位置, 終了位置)
JavaScript
  • 開始位置:コピーを始めるインデックス(0から数える)
  • 終了位置:コピーを終えるインデックス(その直前までコピーされる)
  • 省略した場合
    • 開始位置を省略 → 0から
    • 終了位置を省略 → 配列の最後まで

サンプル

let result = [75, 68, 92, 84, 90];

let newResult = result.slice(1, 3);
console.log(newResult); // [68, 92]
JavaScript

👉 インデックス1から2までの要素がコピーされる

let copy = result.slice();
console.log(copy); // [75, 68, 92, 84, 90]
JavaScript

👉 引数なしなら配列全体をコピーできる


注意点

  • slice()1次元の要素だけコピー
    • 配列の中にさらに配列やオブジェクトがある場合、それらは「参照」がコピーされる
    • そのため、コピー後に中の配列やオブジェクトを変更すると、元の配列にも影響する

例:

let result = [['Yamada', 75], ['Suzuki', 68]];
let newResult = result.slice(0, 1);

newResult[0][1] = 84;
console.log(result[0]); // ["Yamada", 84] ← 元の配列も変わる!
JavaScript

いつ使うか?使いどころ

  • 配列から「一部を切り取って」別の配列として扱いたい時。例えば「途中から後半だけ」「数件だけ先頭から」など。
  • 配列を丸ごとコピーして「元の配列には影響させずに別操作をしたい時」。
  • 注意しつつ、参照型データを含む配列に対して「安全に独立した配列を作る」には向いていない(深いコピーが必要な場合あり)という理解も大切。

まとめ

  • slice() は配列の一部を取り出して新しい配列を作る便利なメソッド
  • 元の配列は壊さない
  • 引数を省略すれば配列全体をコピーできる
  • ただし「浅いコピー」なので、ネストした配列やオブジェクトには注意

初心者向けに一言で言うと:
「配列の一部を切り出して新しい配列を作れるハサミ✂️」 みたいなイメージです。

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