本記事では、配列のようなオブジェクトや反復可能なオブジェクトから新しい配列を作成するJavaScriptのArray.from()メソッドについて解説します。
JavaScriptのArray.from()とは
ES5で配列のようなオブジェクトから配列を作るには、以下のように配列の全要素を繰り返し、それぞれを中間配列に追加します。
function createArray() {
var results = [];
for (var i = 0; i < arguments.length; i++) {
results.push(arguments[i]);
}
return results;
}
var names = createArray('tanaka', 'suzuki', 'takahashi');
console.log(names); // ['tanaka', 'suzuki', 'takahashi']また、上記をより簡潔にするために、Array.prototypeのslice()メソッドを次のように使用します。
function createArray() {
return Array.prototype.slice.call(arguments);
}
var names = createArray('tanaka', 'suzuki', 'takahashi');
console.log(names); // ['tanaka', 'suzuki', 'takahashi']ES6では、配列のようなオブジェクトや反復可能なオブジェクトから新しいArrayのインスタンスを作成するためのArray.from()メソッドが導入されています。
Array.from()は以下のように使用します。
Array.from(target [, map関数[, thisArg]])- target は、配列に変換するための配列のようなオブジェクト、または反復可能なオブジェクトです。
- map関数 は、配列の各要素に対して呼び出すマップ関数です。
- thisValueは、map関数実行時のthisの値です。
これだけ見てもよく分からないので、具体的なコード例を用いて解説します。
Array.from()を使用したコード例
配列のようなオブジェクトから配列を作成する方法
Array.from() メソッドを使用して、関数の引数オブジェクトから新しい配列を作成しています。
function createArray() {
return Array.from(arguments);
}
console.log(createArray(1, 'A')); // [1, 'A']この例では、createArray()関数の引数から配列を作成し、その配列を返しています。
Array.from()の最も簡単な使い方ですね。
Array.from()にmap関数を渡す場合
Array.from()メソッドはコールバック関数を受け付け、作成中の配列の各要素に対してmap関数を実行することができます。
function addTen() {
return Array.from(arguments, x => x + 10);
}
console.log(addOne(1, 2, 3)); // [11, 12, 13]上記の例では、addTen()関数の各引数を10つずつ増やし、その結果を新しい配列に追加しています。
JavaScriptの配列 Array.from()でthisの値を指定する
map関数がオブジェクトに属する場合、オプションで第3引数をArray.from()メソッドに渡すことができます。
このオブジェクトは、map関数の内部でthisの部分を表現することになります。
let calc = {
factor: 10,
addTen(x) {
return x + this.factor;
}
}
let scores = [6, 7, 8];
let newScores = Array.from(scores, calc.addTen, calc);
console.log(newScores); // [16, 17, 18]イテレート可能なオブジェクトから配列を作成する
Array.from()メソッドは反復可能なオブジェクトに対しても機能するので、[Symbol.iterator]プロパティを持つ任意のオブジェクトから配列を作成する場合にも使用することができます。
let even = {
*[Symbol.iterator]() {
for (let i = 0; i < 10; i += 2) {
yield i;
}
}
};
let evenCounts = Array.from(even);
console.log(evenCounts); // [0, 2, 4, 6, 8]コードの解説は以下の通りです。
- まず、0から10までの偶数を返す[System.iterator]で偶数オブジェクトを定義する
- 次に、Array.from() メソッドを用いて、even オブジェクトから偶数の新しい配列を作成する
