Array.from() / Array.isArray()

// 配列風オブジェクトやイテラブルから配列を作成
var arr = Array.from(配列風オブジェクト, マッピング関数);

// 値が配列かどうかを判定
var result = Array.isArray(値);

// 引数を要素として配列を作成
var arr = Array.of(要素1, 要素2, ...);

// 文字列から配列を作成
var chars = Array.from("Hello");
console.log(chars);

// NodeListを配列に変換
var items = document.querySelectorAll("li");
var arr = Array.from(items);
console.log(Array.isArray(arr));

// マッピング関数で変換しながら配列を作成
var numbers = Array.from([1, 2, 3], function(n) {
	return n * 10;
});
console.log(numbers);

// 連番の配列を作成
var range = Array.from({ length: 5 }, function(_, i) {
	return i + 1;
});
console.log(range);

// Array.isArrayで型を判定
console.log(Array.isArray([1, 2, 3]));
console.log(Array.isArray("abc"));
console.log(Array.isArray({ length: 3 }));

// Array.of()で配列を作成
console.log(Array.of(3));
console.log(new Array(3));

[ 'H', 'e', 'l', 'l', 'o' ]
true
[ 10, 20, 30 ]
[ 1, 2, 3, 4, 5 ]
true
false
false
[ 3 ]
[ <3 empty items> ]

ミス1: Array.fromとArray.ofの違いを混同する

Array.from()は配列風オブジェクトやイテラブルを本物の配列に変換するメソッドです。Array.of()は引数をそのまま要素として配列を作るメソッドです。特に数値1つを渡したときの挙動が大きく異なります。

// NG: Array.fromで数値を渡すと長さ3の空配列になる
var wrong = Array.from(3); // 配列風オブジェクトでないためTypeError

修正後は次の通りです。

// OK: 要素として3を持つ配列を作るにはArray.of()を使う
var correct = Array.of(3); // [3]
// OK: 長さ3の連番配列を作るにはArray.from({ length: 3 })を使う
var range = Array.from({ length: 3 }, function(_, i) { return i + 1; }); // [1, 2, 3]

ミス2: マッピング関数を使わずにmapを別途呼ぶ

Array.from()の第2引数にマッピング関数を渡すと、変換と配列生成を1回の処理で行えます。一度配列に変換してからmapを呼ぶより簡潔に書けます。

// NG: 変換してからmapで処理するのは冗長
var items = document.querySelectorAll("li");
var texts = Array.from(items).map(function(el) { return el.textContent; });

修正後は次の通りです。

// OK: Array.fromの第2引数でまとめて処理できる
var items = document.querySelectorAll("li");
var texts = Array.from(items, function(el) { return el.textContent; });

『Array.from()』『Array.isArray()』『Array.of()』はいずれも『Array』コンストラクタの静的メソッドです。インスタンスではなく『Array』に直接呼び出す点が、『配列.push()』や『配列.map()』のようなインスタンスメソッドとは異なります。

『Array.from()』は『document.querySelectorAll()』が返す『NodeList』のように、配列に似ているが配列のメソッドが使えないオブジェクトを本物の配列に変換する際に特に便利です。変換後は『配列.forEach()』や『配列.filter()』などすべての配列メソッドが使用可能になります。『{ length: n }』を渡して連番の配列を作るテクニックも実務でよく使われます。

『Array.isArray()』は値が配列かどうかを確実に判定できる唯一の方法です。『typeof []』は『"object"』を返すため、typeofでは配列とオブジェクトを区別できません。配列かどうかの判定には必ず『Array.isArray()』を使用してください。