背景
Array.fromとSpread構文は、配列やオブジェクトを新しい配列へ変換する際によく使用される機能である。
かつてはInternet ExplorerがArray.fromやSpread構文をサポートしておらず、Babelなどでトランスパイルが必要だった。しかし、モダンブラウザはこれらをネイティブでサポートしており、実装方法を簡略化できる。
これらの機能は使用場面が重複することも多く、どちらを選択すべきか判断が難しい場合もある。まずはパフォーマンスの観点から両者を比較することで、データ量や処理内容に応じた使い分けの基準を得ることができる。
Array.from とは
Array.from()は、以下のものからArrayを生成します。
- 反復可能オブジェクト（
MapやSetのような要素を取得するオブジェクト）- オブジェクトが反復可能でない場合は、配列風オブジェクト（
lengthプロパティおよび添字の付いた要素を持つオブジェクト）
コード例
// 1. 文字列から配列を作成
const str = 'hello';
Array.from(str); // ['h', 'e', 'l', 'l', 'o']
// 2. DOM NodeListを配列に変換
const divs = document.querySelectorAll('div');
const divsArray = Array.from(divs); // DOMノードの配列に変換
// 3. 連番の数値配列を生成
Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]
// 4. Mapオブジェクトのキーまたは値を配列に変換
const map = new Map([
['a', 1],
['b', 2],
['c', 3],
]);
Array.from(map.keys()); // ['a', 'b', 'c']
Array.from(map.values()); // [1, 2, 3]
// 5. 関数の引数（arguments）を配列に変換
function example() {
return Array.from(arguments);
}
example(1, 2, 3); // [1, 2, 3]
// 6. 重複を除去しつつ配列化
Array.from(new Set([1, 2, 2, 3, 3, 4])); // [1, 2, 3, 4]
Spread構文とは
スプレッド構文は、オブジェクトまたは配列の要素をすべて新しい配列またはオブジェクトに含める必要がある場合、または関数呼び出しの引数リストに1つずつ適用する必要がある場合に使用することができます。
コード例
// 1. 配列の結合
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
// 2. 配列の途中に要素を挿入
const numbers = [1, 2, 5, 6];
const withInserted = [1, 2, ...['3', '4'], 5, 6]; // [1, 2, '3', '4', 5, 6]
// 3. 関数の引数として展開
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
sum(...numbers); // 6
// 4. 文字列を文字の配列に分割
const chars = [...'hello']; // ['h', 'e', 'l', 'l', 'o']
// 5. オブジェクトのプロパティを展開
const defaults = { theme: 'dark', lang: 'en' };
const userConfig = { lang: 'ja' };
const merged = { ...defaults, ...userConfig }; // { theme: 'dark', lang: 'ja' }
// 6. 配列の複製と要素の追加
const original = [1, 2, 3];
const copy = [...original, 4]; // [1, 2, 3, 4]
// 7. Rest parametersとの組み合わせ
function example(first, ...rest) {
return [first, rest];
}
const numbers = [1, 2, 3, 4];
example(...numbers); // [1, [2, 3, 4]]