前回までのブログで、配列についてお話していますが、配列を勉強するうちに疑問が出てきました。
配列同士を結合できるの？配列は分割できるの？
どちらもできるんです！
今日は配列同士の結合と配列の分割についてお話します。
配列同士を結合する方法
配列の結合は、例えばAPIから取得したデータと、すでに持っている配列をまとめたいときに使えます。
① concat() を使う方法
let a = [1, 2];
let b = [3, 4];
let result = a.concat(b);
console.log(result); // [1, 2, 3, 4]
※ 元の配列は変更されません。
② スプレッド構文（よく使われる）
※スプレッド構文とは
配列中身を展開して使うための構文
let a = [1, 2];
let b = [3, 4];
let result = […a, …b];
console.log(result); // [1, 2, 3, 4]
👉 複数配列の結合や途中に値を入れる場合に便利です。
let result = […a, 99, …b];
// [1, 2, 99, 3, 4]
配列を分割する方法
表示用に一部だけ取り出したいときや、ページネーション処理※などで使われます。
※ページネーション処理とは
大量のデータをそのまま全部表示せず、いくつかの単位に分けて表示する仕組みのことです。
例えば、以下のようなものです。
・検索結果で「1 2 3 次へ」 とページが分かれている
・ECサイトで1ページに10商品ずつ表示
・ブログ一覧で1ページに5記事ずつ表示
① slice()（おすすめ・安全）
slice() は元の配列を変更しないため、意図しないバグを防ぎやすく、初心者にも安心です。
let arr = [10, 20, 30, 40, 50];
let part = arr.slice(1, 4);
console.log(part); // [20, 30, 40]
・slice(開始, 終了)
・元の配列は変更されません
② splice()（注意：元の配列が変わる）
let arr = [10, 20, 30, 40, 50];
let part = arr.splice(1, 2);
console.log(part); // [20, 30]
console.log(arr); // [10, 40, 50]
⚠️ 元配列を変更するので、意図しない副作用に注意です。
slice と splice の違い
・slice：元の配列を変更しない（安全）
・splice：元の配列を変更する（注意が必要）
| メソッド | 元の配列 | 用途 |
| slice | 変更しない | 一部を取り出す |
| splice | 変更する | 削除・置換 |
まとめ
・配列は concat や スプレッド構文で結合できる
・配列の分割には slice と splice がある
・元の配列を変更したくない場合は slice を使う
配列一つとっても色々なことができて奥が深いですね。