【JavaScript】Array.of()の使い方を分かりやすく解説します！

本記事では、JavaScriptのES6から導入されたArray.of()メソッドを使って、配列の構築方法を改善する方法について解説します。

JavaScriptのArray.of()メソッドとは

ES5では、Arrayコンストラクタに数値を渡すと、JavaScriptはその数値と同じ長さの配列を作成します。

let counts = new Array(2);

console.log(counts.length); // 2
console.log(counts[0]);     // undefined

しかし、Arrayコンストラクタに数値以外の値を渡すと、JavaScriptはその値を1要素とする配列を作成する。

counts = new Array("2");

console.log(counts.length); // 1
console.log(counts[0]); // "2"

上記の動作は、Arrayコンストラクタに渡すデータの型がわからない場合があり、混乱を招いたり、エラーを起こしやすいです。

ES6では、この問題を解決するためにArray.of()メソッドを導入しています。

Array.of()メソッドは、単一の数値を特別扱いしない点を除き、Arrayコンストラクタと類似しています。つまり、Array.of()メソッドは、引数の型や数に関係なく、常に渡した値を含む配列を作成するということです。

以下は、Array.of()の構文です。

Array.of(要素0[, 要素1[, ...[, 要素n]]])

以下のコードをご覧ください。

let counts = Array.of(3);

console.log(counts.length); // 1
console.log(counts[0]); // 3

上記のコードでは、Array.of()メソッドに数字の「3」を渡しています。よって、Array.of()メソッドは、1つの数値の配列を作成します。

それでは別の例を考えてみましょう。

let letters = Array.of('A', 'B', 'C');

console.log(letters.length); // 3
console.log(letters); // ['A','B','C']

上記の例では、Array.of() メソッドに ‘A’, ‘B’, ‘C’ を渡して、3つの文字列からなる配列を作成しました。

Array.of()メソッドに対応していない環境でJavaScriptを実行する場合は、以下のポリフィルを使用することができます。

if (!Array.of) {
    Array.of = function() {
        return Array.prototype.slice.call(arguments);
    };
}