【JavaScript】配列の最初と最後の要素を取得・判定する方法｜at(-1)・分割代入・forEach 内の判定・空配列チェックまで解説

const fruits = ["りんご", "みかん", "ぶどう", "いちご", "メロン"];

// 最初の要素
console.log(fruits[0]); // "りんご"

// 最後の要素
console.log(fruits[fruits.length - 1]); // "メロン"

// 元の配列は変更されない
console.log(fruits.length); // 5

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

console.log(arr.at(0));  // 10（先頭）
console.log(arr.at(-1)); // 50（末尾）
console.log(arr.at(-2)); // 40（末尾から2番目）

// 空配列
console.log([].at(0));  // undefined
console.log([].at(-1)); // undefined

const scores = [85, 92, 78, 96, 88, 91];

// 90点以上の最後のスコア
const lastHigh = scores.filter(s => s >= 90).at(-1);
console.log(lastHigh); // 91

const arr = [1, 2, 3, 4, 5];

// 先頭を取得
const [first] = arr;
console.log(first); // 1

// 先頭と残りを分離（レスト構文）
const [head, ...rest] = arr;
console.log(head); // 1
console.log(rest); // [2, 3, 4, 5]

// 先頭2つと残り
const [a, b, ...others] = arr;
console.log(a, b);   // 1, 2
console.log(others); // [3, 4, 5]

const arr = [1, 2, 3, 4, 5];

// 末尾を分離（reverse + 分割代入）
const [last, ...init] = [...arr].reverse();
console.log(last); // 5
console.log(init.reverse()); // [1, 2, 3, 4]

// at(-1) の方がシンプル
console.log(arr.at(-1)); // 5

const arr = [1, 2, 3, 4, 5];

// at: 取得のみ（非破壊的）
console.log(arr.at(-1)); // 5
console.log(arr.length); // 5（変わらない）

// pop: 取得 + 削除（破壊的）
console.log(arr.pop());  // 5
console.log(arr.length); // 4（1つ減った）

const items = ["A", "B", "C", "D"];

items.forEach((item, index, array) => {
  const isFirst = index === 0;
  const isLast = index === array.length - 1;

  if (isFirst) console.log(`先頭: ${item}`);
  if (isLast)  console.log(`末尾: ${item}`);
});
// "先頭: A"
// "末尾: D"

const items = ["ホーム", "製品", "会社概要", "お問い合わせ"];

const html = items.map((item, i, arr) => {
  const classes = [];
  if (i === 0) classes.push("first");
  if (i === arr.length - 1) classes.push("last");
  return `<li class="${classes.join(" ")}">${item}</li>`;
}).join("\n");

console.log(html);
// <li class="first">ホーム</li>
// <li class="">製品</li>
// <li class="">会社概要</li>
// <li class="last">お問い合わせ</li>

const arr = [];

// undefined が返る
console.log(arr[0]);    // undefined
console.log(arr.at(-1)); // undefined

// 空チェック
if (arr.length > 0) {
  console.log("先頭:", arr[0]);
  console.log("末尾:", arr.at(-1));
} else {
  console.log("配列が空です");
}

// Nullish coalescing で代替値
console.log(arr.at(0) ?? "デフォルト値");

const nums = [1, 4, 7, 2, 9, 3, 8];

// 先頭から検索: 最初の5以上
console.log(nums.find(n => n >= 5));     // 7

// 末尾から検索: 最後の5以上
console.log(nums.findLast(n => n >= 5)); // 8

// 末尾から検索: 最後の5以上のインデックス
console.log(nums.findLastIndex(n => n >= 5)); // 6

const tags = ["JavaScript", "TypeScript", "React"];

// join で一発（最もシンプル）
console.log(tags.join(", ")); // "JavaScript, TypeScript, React"

// ループ内で判定する場合
let result = "";
tags.forEach((tag, i, arr) => {
  result += tag;
  if (i < arr.length - 1) result += ", "; // 最後以外にカンマ
});
console.log(result); // "JavaScript, TypeScript, React"

const breadcrumbs = [
  { label: "ホーム", url: "/" },
  { label: "ブログ", url: "/blog" },
  { label: "記事タイトル", url: null } // 現在ページ
];

const html = breadcrumbs.map((item, i, arr) => {
  if (i === arr.length - 1) {
    return `<span class="current">${item.label}</span>`;
  }
  return `<a href="${item.url}">${item.label}</a> &gt; `;
}).join("");

console.log(html);
// <a href="/">ホーム</a> &gt; <a href="/blog">ブログ</a> &gt; <span class="current">記事タイトル</span>

const queue = ["タスクA", "タスクB", "タスクC"];

// 先頭を確認（非破壊）
console.log("次のタスク:", queue.at(0)); // "タスクA"

// 先頭を処理して取り出す（破壊的）
const current = queue.shift();
console.log("処理中:", current);  // "タスクA"
console.log("残り:", queue);      // ["タスクB", "タスクC"]