【JavaScript】配列の使い方まとめ｜作成・追加・削除・ループ・スプレッド構文・分割代入・破壊的 / 非破壊的メソッドまで解説

const fruits = ["りんご", "みかん", "ぶどう"];
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, "hello", true, null]; // 異なる型も格納可能
const empty = []; // 空の配列

// NodeList → 配列
const divs = Array.from(document.querySelectorAll("div"));

// 文字列 → 1文字ずつの配列
const chars = Array.from("Hello"); // ["H", "e", "l", "l", "o"]

// 連番の配列を生成
const range = Array.from({ length: 5 }, (_, i) => i + 1);
// [1, 2, 3, 4, 5]

// new Array(5) は「長さ5の空配列」を作ってしまう
console.log(new Array(5));   // [空×5]

// Array.of(5) は「要素が5の配列」を作る
console.log(Array.of(5));    // [5]
console.log(Array.of(1, 2, 3)); // [1, 2, 3]

const arr = [10, 20, 30, 40, 50];

// ブラケット記法（0始まり）
console.log(arr[0]);  // 10（先頭）
console.log(arr[4]);  // 50（末尾）
console.log(arr[10]); // undefined（範囲外）

// at() メソッド（負のインデックス対応・ES2022）
console.log(arr.at(0));  // 10
console.log(arr.at(-1)); // 50（末尾）
console.log(arr.at(-2)); // 40（末尾から2番目）

const arr = [1, 2, 3];

arr.push(4);       // [1, 2, 3, 4]（末尾に追加）
arr.pop();         // [1, 2, 3]（末尾を削除）
arr.unshift(0);    // [0, 1, 2, 3]（先頭に追加）
arr.shift();       // [1, 2, 3]（先頭を削除）

// splice: インデックス1から1個削除し、10を挿入
arr.splice(1, 1, 10); // [1, 10, 3]

const fruits = ["りんご", "みかん", "ぶどう"];

// for ループ
for (let i = 0; i < fruits.length; i++) {
  console.log(i, fruits[i]);
}

// for...of（値だけ取得）
for (const fruit of fruits) {
  console.log(fruit);
}

// forEach（コールバック）
fruits.forEach((fruit, index) => {
  console.log(index, fruit);
});

// map（新しい配列を生成）
const upper = fruits.map(f => f + "ジュース");
console.log(upper); // ["りんごジュース", "みかんジュース", "ぶどうジュース"]

const original = [1, 2, 3];
const copy = [...original];

copy.push(4);
console.log(original); // [1, 2, 3]（元は変わらない）
console.log(copy);     // [1, 2, 3, 4]

const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b]; // [1, 2, 3, 4]

// 途中に要素を挟むことも可能
const withMiddle = [...a, 99, ...b]; // [1, 2, 99, 3, 4]

const scores = [85, 92, 78, 96, 88];
console.log(Math.max(...scores)); // 96
console.log(Math.min(...scores)); // 78

const rgb = [255, 128, 0];

// 各要素を変数に取り出す
const [red, green, blue] = rgb;
console.log(red, green, blue); // 255, 128, 0

// 一部をスキップ
const [first, , third] = [10, 20, 30];
console.log(first, third); // 10, 30

// 残りをまとめて取得（レスト構文）
const [head, ...rest] = [1, 2, 3, 4, 5];
console.log(head); // 1
console.log(rest); // [2, 3, 4, 5]

// デフォルト値
const [a = 0, b = 0, c = 0] = [10];
console.log(a, b, c); // 10, 0, 0

let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y); // 2, 1

const arr = [3, 1, 2];

// toSorted: 元の配列を変更せずにソート
const sorted = arr.toSorted((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(arr);    // [3, 1, 2]（元のまま）

// toReversed: 元の配列を変更せずに反転
const reversed = arr.toReversed();
console.log(reversed); // [2, 1, 3]

// with: 指定インデックスの値を変更した新しい配列
const updated = arr.with(1, 99);
console.log(updated); // [3, 99, 2]

const nums = [10, 2, 30, 4];

// NG: デフォルトは文字列比較
console.log(nums.sort()); // [10, 2, 30, 4]（文字列として比較）

// OK: 比較関数を渡す
console.log(nums.sort((a, b) => a - b)); // [2, 4, 10, 30]（昇順）
console.log(nums.sort((a, b) => b - a)); // [30, 10, 4, 2]（降順）