では「配列っぽいオブジェクトを本当の配列に変換したあと、どんな便利なことができるのか」を例題で見ていきましょう。
配列に変換するとできること
1. map でデータを変換できる
// NodeList（配列っぽいオブジェクト）
const divs = document.querySelectorAll('div');
// 配列に変換
const arr = Array.from(divs);
// 各要素のテキストを取り出す
const texts = arr.map(div => div.textContent);
console.log(texts); // ['見出し', '本文', 'フッター'] など
👉 NodeList のままでは map が使えませんが、配列にすると一発で処理できます。
2. filter で条件に合うものだけ残せる
function test() {
const args = [...arguments]; // 配列に変換
const even = args.filter(n => n % 2 === 0);
console.log(even);
}
test(1, 2, 3, 4, 5, 6); // [2, 4, 6]
👉 受け取った引数の中から「偶数だけ」を抽出できる。
3. reduce で合計や集計ができる
function sumAll() {
const args = Array.from(arguments);
const total = args.reduce((acc, n) => acc + n, 0);
console.log(total);
}
sumAll(10, 20, 30, 40); // 100
👉 配列に変換することで、reduce を使って合計や平均などの計算が可能に。
4. forEach で一括処理
const buttons = document.querySelectorAll('button');
// 配列に変換してイベントをまとめて登録
[...buttons].forEach(btn => {
btn.addEventListener('click', () => alert(btn.textContent));
});
👉 NodeList を配列に変換すれば、複数の要素に一気に処理を適用できる。
まとめ
- Array-like → 配列に変換すると、
map/filter/reduce/forEachなどの便利なメソッドが使える - 変換方法は
Array.from(obj)や[...obj]がシンプルでおすすめ - 実務では DOM操作 や 関数の引数処理 でよく登場する