JavaScriptで配列を生成する際に便利な`Array.of()`メソッドについて、基本的な使い方から実践的な例まで詳しく解説します。

Array.of()メソッドとは

`Array.of()`は、引数として渡された要素から新しい配列インスタンスを生成するメソッドです。ES6で導入された比較的新しいメソッドで、通常の配列生成時の混乱を防ぐために設計されました。

基本的な使い方

const numbers = Array.of(1, 2, 3);
console.log(numbers); // [1, 2, 3]

const mixed = Array.of('apple', 42, true);
console.log(mixed); // ['apple', 42, true]

Array.of()とArray()コンストラクタの違い

従来の`Array()`コンストラクタには、意図しない動作が発生する可能性がありました：

// Array()コンストラクタの場合
const arr1 = new Array(3);
console.log(arr1); // [empty × 3]

// Array.of()の場合
const arr2 = Array.of(3);
console.log(arr2); // [3]

実践的な使用例

1. 複数の値から配列を作成

const coordinates = Array.of(x, y, z);
const userInfo = Array.of(name, age, email);

2. イテレータから配列を生成

const set = new Set([1, 2, 3]);
const array = Array.of(...set);

3. 関数の引数を配列化

function collectArgs() {
    return Array.of(...arguments);
}

ブラウザ互換性

`Array.of()`は、モダンブラウザで広くサポートされています：

  • Chrome 45以降
  • Firefox 25以降
  • Safari 9以降
  • Edge 12以降

ポリフィル

古いブラウザをサポートする必要がある場合は、以下のポリフィルを使用できます：

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

まとめ

`Array.of()`は、JavaScriptで配列を生成する際の安全で直感的な方法を提供します。特に：

  • 引数の数に関係なく、常に新しい配列を生成
  • 従来の`Array()`コンストラクタの混乱を解消
  • 可読性の高いコードを実現

モダンなJavaScript開発において、`Array.of()`は配列生成の標準的な方法の一つとして位置づけられています。