JavaScript には「配列っぽいオブジェクト（Array-like）」というものがあり、見た目は配列に似ているけど本当の配列ではないため、map や filter などの便利な配列メソッドが使えません。
代表例は arguments（関数の引数リスト）や NodeList（document.querySelectorAll の結果）です。
配列っぽいオブジェクトの特徴
- length プロパティを持っている
- インデックス番号でアクセスできる
- でも Array.isArray で調べると false になる
function test() {
console.log(arguments[0]); // 10
console.log(arguments.length); // 3
console.log(Array.isArray(arguments)); // false ←配列じゃない！
}
test(10, 20, 30);
本当の配列に変換する方法
1. Array.from() を使う（おすすめ）
ES6 以降で使えるシンプルな方法。
function test() {
const args = Array.from(arguments);
console.log(Array.isArray(args)); // true
console.log(args.map(x => x * 2)); // [20, 40, 60]
}
test(10, 20, 30);
2. スプレッド構文 ... を使う
短く書けて直感的。
function test() {
const args = [...arguments];
console.log(args); // [10, 20, 30]
}
test(10, 20, 30);
NodeList にも使える：
const divs = document.querySelectorAll('div');
const arr = [...divs]; // 本当の配列に変換
console.log(Array.isArray(arr)); // true
3. Array.prototype.slice.call() を使う（古い書き方）
昔からある方法。今は上の2つの方が推奨。
function test() {
const args = Array.prototype.slice.call(arguments);
console.log(args); // [10, 20, 30]
}
test(10, 20, 30);
まとめ
- Array-like は「配列っぽいけど配列じゃない」オブジェクト
- 変換方法ベスト3
Array.from(obj)[...obj]（スプレッド構文）Array.prototype.slice.call(obj)（古い書き方）
👉 初心者におすすめなのは Array.from と スプレッド構文。
どちらも読みやすく、現代的な書き方です。