JavaScriptでは「配列っぽいオブジェクト（Array-likeオブジェクト）」を本物の配列に変換する方法があります。初心者向けにかみ砕いて説明します。
1. 配列っぽいオブジェクトとは？
Array-likeオブジェクトとは、配列みたいに数字のインデックスと length プロパティを持っているけど、本当は配列じゃないオブジェクトです。
例
let arrayLike = {
0: "りんご",
1: "みかん",
2: "バナナ",
length: 3
};
console.log(Array.isArray(arrayLike)); // false
- 見た目は配列みたいだけど、
Array.isArrayでは false になります。 - 配列の便利なメソッド（
push、mapなど）は使えません。
2. 配列に変換する方法
方法1：Array.from() を使う（おすすめ）
let arr = Array.from(arrayLike);
console.log(arr); // ["りんご", "みかん", "バナナ"]
console.log(Array.isArray(arr)); // true
- Array-likeオブジェクトを簡単に本物の配列に変換できます。
map関数を同時に使うこともできます。
let numbers = {0: 1, 1: 2, 2: 3, length: 3};
let doubled = Array.from(numbers, x => x * 2);
console.log(doubled); // [2, 4, 6]
方法2：スプレッド演算子 ... を使う
let arr2 = [...arrayLike];
console.log(arr2); // ["りんご", "みかん", "バナナ"]
...は「展開演算子」と呼ばれ、配列の中身を展開して新しい配列にできます。- 配列っぽいオブジェクトも変換可能です。
方法3：Array.prototype.slice.call() を使う（古い方法）
let arr3 = Array.prototype.slice.call(arrayLike);
console.log(arr3); // ["りんご", "みかん", "バナナ"]
- 古いブラウザ対応で使われる方法。
- 最近は
Array.from()やスプレッド演算子の方が読みやすくおすすめです。
3. 実践例：NodeList（よくある配列っぽいオブジェクト）
// HTMLの要素を取得（NodeListは配列っぽいオブジェクト）
let divs = document.querySelectorAll("div");
// 本物の配列に変換
let divArray = Array.from(divs);
divArray.forEach(div => {
div.style.color = "red";
});
- NodeList は配列っぽいけど、
mapやforEachが使えるかブラウザによって違うことがあります。 - 配列に変換すれば安心して配列メソッドを使えます。
まとめ
- Array-likeオブジェクト：配列っぽいけど本当は配列じゃない
- 変換方法：
Array.from()→ 一番おすすめ[...arrayLike]→ モダンで簡単Array.prototype.slice.call()→ 古い方法
- 配列に変換すると
map、filter、pushなどが使える
💡 ポイント
「数字のキーと length を持っているけど配列じゃないものは、Array.from() で本物の配列に変換する」というのが基本の考え方です。