配列風オブジェクトから簡単に配列を作成！ JavaScript Array.from の使い方

JavaScript Array.from とは？

従来の配列リテラルやArrayコンストラクタと比較して、Array.fromは以下のような利点があります。

配列風オブジェクトから簡単に配列を作成できる

例えば、NodeListやStringなど、配列ではないオブジェクトでも、Array.fromを使えば簡単に配列に変換できます。

// NodeListから配列を作成
const nodeList = document.querySelectorAll('.target');
const arr = Array.from(nodeList);

// Stringから配列を作成
const str = 'Hello World!';
const arr = Array.from(str);

反復可能オブジェクトから簡単に配列を作成できる

MapやSetなど、反復可能なオブジェクトからも、Array.fromを使って簡単に配列を作成できます。

// Mapから配列を作成
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
const arr = Array.from(map);

// Setから配列を作成
const set = new Set([1, 2, 3, 4, 5]);
const arr = Array.from(set);

マップ関数と組み合わせて、変換処理を簡潔に記述できる

Array.fromは、引数としてマップ関数を渡すことで、要素変換処理を同時に実行できます。

// 数字の配列を作成し、各要素に2を乗算する
const arr = Array.from(Array(5), (_, i) => i * 2);
console.log(arr); // [0, 2, 4, 6, 8]

オプション引数で、配列の初期値を設定できる

Array.fromは、2番目の引数として初期値を設定できます。

// 3つの要素を持つ空の配列を作成
const arr = Array.from(3);
console.log(arr); // [undefined, undefined, undefined]

// 3つの要素を持つ、値が1の配列を作成
const arr = Array.from(3, () => 1);
console.log(arr); // [1, 1, 1]

Array.from の使い方

Array.fromは、以下の構文で使用します。

Array.from(iterable, [mapFunc], [thisArg])

• iterable: 配列風オブジェクトまたは反復可能オブジェクト
• mapFunc: オプション。各要素を変換する関数
• thisArg: オプション。mapFuncのthisオブジェクト

Array.from の注意点

• 配列風オブジェクトや反復可能オブジェクトでない場合は、TypeError例外が発生します。
• mapFuncで返された値は、必ず配列に追加されます。undefinedやnullであっても、空要素にはなりません。

Array.fromは、配列風オブジェクトや反復可能オブジェクトから簡単に配列を作成できる便利な関数です。従来の配列リテラルやArrayコンストラクタよりも簡潔で柔軟な記述が可能なので、ぜひ使いこなしてみましょう。

Array.from サンプルコード

配列風オブジェクトから配列を作成

NodeList

// HTML要素のリストを取得
const nodeList = document.querySelectorAll('.target');

// NodeListから配列を作成
const arr = Array.from(nodeList);

// 配列の内容を出力
console.log(arr);

String

// 文字列を分割
const str = 'Hello World!';

// Stringから配列を作成
const arr = Array.from(str);

// 配列の内容を出力
console.log(arr);

反復可能オブジェクトから配列を作成

Map

// Mapを作成
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

// Mapから配列を作成
const arr = Array.from(map);

// 配列の内容を出力
console.log(arr);

Set

// Setを作成
const set = new Set([1, 2, 3, 4, 5]);

// Setから配列を作成
const arr = Array.from(set);

// 配列の内容を出力
console.log(arr);

マップ関数で要素変換

// 数字の配列を作成し、各要素に2を乗算する
const arr = Array.from(Array(5), (_, i) => i * 2);

// 配列の内容を出力
console.log(arr);

オプション引数で初期値を設定

空の配列

// 3つの要素を持つ空の配列を作成
const arr = Array.from(3);

// 配列の内容を出力
console.log(arr);

値が1の配列

// 3つの要素を持つ、値が1の配列を作成
const arr = Array.from(3, () => 1);

// 配列の内容を出力
console.log(arr);

配列の要素を逆順にする

// 数字の配列を作成
const arr = Array.from(Array(5), (_, i) => i);

// 配列を逆順にする
const reversedArr = arr.reverse();

// 配列の内容を出力
console.log(reversedArr);

配列の重複要素を除く

// 数字の配列を作成
const arr = [1, 2, 3, 1, 2, 4];

// 配列の重複要素を除く
const uniqueArr = Array.from(new Set(arr));

// 配列の内容を出力
console.log(uniqueArr);

Array.from の代替方法

スプレッド構文は、イテレータを展開して配列を作成する簡潔な方法です。

const arr = [...nodeList];
const arr = [...str];

ただし、スプレッド構文は、ES6以降のブラウザでのみ使用可能です。

Array コンストラクタは、配列リテラルよりも柔軟に配列を作成できます。

const arr = new Array(nodeList.length);
for (let i = 0; i < nodeList.length; i++) {
  arr[i] = nodeList[i];
}

const arr = new Array(str.length);
for (let i = 0; i < str.length; i++) {
  arr[i] = str[charAt(i)];
}

ただし、Array コンストラクタは、スプレッド構文や Array.from よりも冗長な記述になります。

forEach ループを使用して、イテレータの各要素を配列に追加することもできます。

const arr = [];
nodeList.forEach((element) => {
  arr.push(element);
});

const arr = [];
str.forEach((char) => {
  arr.push(char);
});

ただし、forEach ループは、スプレッド構文や Array.from よりも処理速度が遅くなる可能性があります。

map 関数を使用して、イテレータの各要素を変換してから配列に追加することもできます。

const arr = nodeList.map((element) => element);
const arr = str.map((char) => char);

ただし、map 関数は、要素変換処理が必要な場合にのみ有効です。

Array.from の代替方法はいくつかありますが、それぞれにメリットとデメリットがあります。状況に応じて最適な方法を選択する必要があります。

一般的には、以下の条件を考慮すると良いでしょう。

• ブラウザの互換性
• コードの簡潔性
• 処理速度