JavaScript Array.from()メソッド

概要: このチュートリアルでは、配列のようなオブジェクトやイテラブルオブジェクトから新しい配列を作成するJavaScriptのArray.from()メソッドについて学習します。

JavaScript Array.from()メソッド入門

ES5で配列のようなオブジェクトから配列を作成するには、すべての配列要素を反復処理し、それぞれを中間配列に追加します。

function arrayFromArgs() {
    var results = [];
    for (var i = 0; i < arguments.length; i++) {
        results.push(arguments[i]);
    }
    return results;
}
var fruits = arrayFromArgs('Apple', 'Orange', 'Banana');
console.log(fruits);Code language: JavaScript (javascript)

出力

[ 'Apple', 'Orange', 'Banana' ]Code language: JSON / JSON with Comments (json)

より簡潔にするために、Array.prototypeのslice()メソッドを次のように使用できます。

function arrayFromArgs() {
    return Array.prototype.slice.call(arguments);
}
var fruits = arrayFromArgs('Apple', 'Orange', 'Banana');
console.log(fruits);Code language: JavaScript (javascript)

ES6では、配列のようなオブジェクトやイテラブルオブジェクトからArrayの新しいインスタンスを作成するArray.from()メソッドが導入されました。以下にArray.from()メソッドの構文を示します。

Array.from(target [, mapFn[, thisArg]])Code language: CSS (css)

この構文では

targetは、配列に変換する配列のようなオブジェクトまたはイテラブルオブジェクトです。
mapFnは、配列の各要素に対して呼び出すマップ関数です。
thisArgは、mapFn関数を実行するときのthis値です。

Array.from()は、targetオブジェクトのすべての要素を含むArrayの新しいインスタンスを返します。

JavaScript Array.from()メソッドの例

Array.from()メソッドの使用例をいくつか見てみましょう。

1) 配列のようなオブジェクトから配列を作成する

次の例では、関数のargumentsオブジェクトから新しい配列を作成するためにArray.from()メソッドを使用しています。

function arrayFromArgs() {
    return Array.from(arguments);
}

console.log(arrayFromArgs(1, 'A'));Code language: JavaScript (javascript)

出力

[ 1, 'A' ]Code language: JSON / JSON with Comments (json)

この例では、arrayFromArgs()関数の引数から配列を作成し、それを返します。

2) マッピング関数を使用したJavaScript Array Array.from()

Array.from()メソッドは、作成される配列の各要素に対してマッピング関数を実行できるコールバック関数を受け入れます。次の例を参照してください。

function addOne() {
    return Array.from(arguments, x => x + 1);
}
console.log(addOne(1, 2, 3));Code language: JavaScript (javascript)

出力

[ 2, 3, 4 ]Code language: JSON / JSON with Comments (json)

この例では、addOne()関数の各引数を1つずつ増やし、その結果を新しい配列に追加します。

3) this値を使用したJavaScript Array.from()

マッピング関数がオブジェクトに属している場合、オプションで3番目の引数をArray.from()メソッドに渡すことができます。オブジェクトは、マッピング関数内のthis値を表します。この例を考えてみてください。

let doubler = {
    factor: 2,
    double(x) {
        return x * this.factor;
    }
}
let scores = [5, 6, 7];
let newScores = Array.from(scores, doubler.double, doubler);
console.log(newScores);Code language: JavaScript (javascript)

出力

[ 10, 12, 14 ]Code language: JSON / JSON with Comments (json)

4) イテラブルオブジェクトから配列を作成する

Array.from()メソッドはイテラブルオブジェクトでも機能するため、[symbol.iterator]プロパティを持つ任意のオブジェクトから配列を作成するために使用できます。例えば

let even = {
    *[Symbol.iterator]() {
        for (let i = 0; i < 10; i += 2) {
            yield i;
        }
    }
};
let evenNumbers = Array.from(even);
console.log(evenNumbers);
Code language: JavaScript (javascript)

出力

[0, 2, 4, 6, 8]Code language: JSON / JSON with Comments (json)

この例では

まず、0から10までの偶数を返す[System.iterator]を持つevenオブジェクトを定義します。
次に、Array.from()メソッドを使用して、evenオブジェクトから偶数の新しい配列を作成します。

このチュートリアルでは、JavaScriptのArray.from()メソッドを使用して、配列のようなオブジェクトまたはイテラブルオブジェクトから配列を作成する方法を学習しました。

このチュートリアルは役に立ちましたか？