JavaScript 配列 Array.of()

概要: このチュートリアルでは、ES6 の JavaScript Array.of() メソッドを使用して配列の構造を改善する方法について説明します。

JavaScript 配列メソッド Array.of() の概要

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

let numbers = new Array(2);
console.log(numbers.length); // 2
console.log(numbers[0]); // undefinedCode language: JavaScript (javascript)

しかし、数値以外を Array コンストラクターに渡すと、JavaScript はその値を 1 つ含む配列を作成します。例えば

numbers = new Array("2");
console.log(numbers.length); // 1
console.log(numbers[0]); // "2"
Code language: JavaScript (javascript)

この動作は、Array コンストラクターに渡すデータの型がわからない場合があるため、混乱を招くことがあり、エラーが発生しやすくなります。

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

Array.of() メソッドは Array コンストラクターに似ていますが、Array.of() メソッドは、単一の数字の値を特別に扱うことはありません。

つまり、Array.of() メソッドは、常に、型や引数の数に関係なく、渡された値を含む配列を作成します。

以下に Array.of() メソッドの構文を示します。

Array.of(element0[, element1[, ...[, elementN]]])
Code language: CSS (css)

次の例をご覧ください。

let numbers = Array.of(3);
console.log(numbers.length); // 1
console.log(numbers[0]); // 3Code language: JavaScript (javascript)

この例では、Array.of() メソッドに数値 3 を渡しました。Array.of() メソッドは、1 つの数値の配列を作成します。

次の例を考えてみましょう。

let chars = Array.of('A', 'B', 'C');
console.log(chars.length); // 3
console.log(chars); // ['A','B','C']
Code language: JavaScript (javascript)

この例では、'A'、'B'、'C' を Array.of() メソッドに渡すことで、3 つの文字列の配列を作成しました。配列のサイズは 3 です。

Array.of() メソッドをサポートしていない環境で JavaScript を実行する場合は、次のポリーフィルを使用できます。

if (!Array.of) {
    Array.of = function() {
        return Array.prototype.slice.call(arguments);
    };
}
Code language: JavaScript (javascript)

このチュートリアルでは、ES6 の JavaScript Array.of() メソッドを使用して配列の構造を改善する方法について説明しました。

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