【JavaScript】配列から偶数番目・奇数番目の要素を取得する方法｜filter・for ループ・reduce・n 番おき・テーブル交互行まで解説

const arr = ["A", "B", "C", "D", "E", "F"];

// 偶数インデックス: 0, 2, 4 → A, C, E
const evens = arr.filter((_, i) => i % 2 === 0);
console.log(evens); // ["A", "C", "E"]

// 奇数インデックス: 1, 3, 5 → B, D, F
const odds = arr.filter((_, i) => i % 2 !== 0);
console.log(odds);  // ["B", "D", "F"]

const arr = ["A", "B", "C", "D", "E", "F"];
const evens = [];
const odds = [];

for (let i = 0; i < arr.length; i++) {
  if (i % 2 === 0) {
    evens.push(arr[i]);
  } else {
    odds.push(arr[i]);
  }
}

console.log(evens); // ["A", "C", "E"]
console.log(odds);  // ["B", "D", "F"]

const arr = ["A", "B", "C", "D", "E", "F"];
const evens = [];

// i += 2 で2つ飛ばし
for (let i = 0; i < arr.length; i += 2) {
  evens.push(arr[i]);
}

console.log(evens); // ["A", "C", "E"]

const arr = ["A", "B", "C", "D", "E", "F"];

const { evens, odds } = arr.reduce(
  (acc, val, i) => {
    if (i % 2 === 0) {
      acc.evens.push(val);
    } else {
      acc.odds.push(val);
    }
    return acc;
  },
  { evens: [], odds: [] }
);

console.log(evens); // ["A", "C", "E"]
console.log(odds);  // ["B", "D", "F"]

function everyNth(arr, n, offset = 0) {
  return arr.filter((_, i) => (i - offset) % n === 0);
}

const arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];

// 3番おき（インデックス 0, 3, 6）
console.log(everyNth(arr, 3));    // ["A", "D", "G"]

// 3番おき（インデックス 1, 4, 7 から開始）
console.log(everyNth(arr, 3, 1)); // ["B", "E", "H"]

// 2番おき = 偶数インデックス
console.log(everyNth(arr, 2));    // ["A", "C", "E", "G", "I"]

function chunk(arr, size) {
  const result = [];
  for (let i = 0; i < arr.length; i += size) {
    result.push(arr.slice(i, i + size));
  }
  return result;
}

console.log(chunk(["A", "B", "C", "D", "E"], 2));
// [["A", "B"], ["C", "D"], ["E"]]

/* CSS の :nth-child で交互行を設定 */
table tr:nth-child(even) {
  background-color: #f8fafc;
}
table tr:nth-child(odd) {
  background-color: #fff;
}

const rows = document.querySelectorAll("#myTable tbody tr");

rows.forEach((row, i) => {
  row.style.backgroundColor = i % 2 === 0 ? "#fff" : "#f8fafc";
});

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

// 偶数インデックス → 左列、奇数インデックス → 右列
const leftColumn = items.filter((_, i) => i % 2 === 0);
const rightColumn = items.filter((_, i) => i % 2 !== 0);

console.log(leftColumn);  // ["商品A", "商品C", "商品E"]
console.log(rightColumn); // ["商品B", "商品D"]

function pairwise(arr) {
  const pairs = [];
  for (let i = 0; i < arr.length; i += 2) {
    pairs.push([arr[i], arr[i + 1]]);
  }
  return pairs;
}

// [キー, 値] のペアに変換
const flat = ["name", "田中", "age", "30", "city", "東京"];
const pairs = pairwise(flat);
console.log(pairs);
// [["name", "田中"], ["age", "30"], ["city", "東京"]]

// オブジェクトに変換
const obj = Object.fromEntries(pairs);
console.log(obj);
// { name: "田中", age: "30", city: "東京" }

// センサーデータなど大量のデータを n 番おきに間引く
const sensorData = Array.from({ length: 1000 }, (_, i) => ({
  time: i,
  value: Math.random() * 100
}));

// 10番おきにサンプリング（1000件 → 100件）
const sampled = sensorData.filter((_, i) => i % 10 === 0);
console.log(sampled.length); // 100