JavaScriptのArray.of()関数とは？構文と使い方を実例付きで解説
JavaScript の Array.of() メソッドは、引数として渡された値を要素とする新しい配列インスタンスを作成するためのメソッドです。この記事では、Array.of() の基本構文と、実際に動作するサンプルコードを使った使い方をわかりやすく解説します。
Array.of() メソッドの特徴
Array.of() は、0 個以上の任意の値を引数として受け取り、それらをそのまま要素に含んだ配列を返します。Array() コンストラクタとの大きな違いは、数値を 1 つだけ渡した場合の挙動です。
Array(5)→ 長さ 5 の空の配列を作成するArray.of(5)→ 要素として 5 を 1 つ持つ配列 [5] を作成する
このように Array.of() は引数の数に関係なく常に一貫した挙動を示すため、意図しない結果を防ぎたい場面で特に役立ちます。
基本構文
Array.of(elements....)
elements には、新しい配列の要素となる値を指定します。カンマ区切りで複数の値を渡すこともできます。
例1：数値から配列を作成する
まずは、複数の数値を引数に渡して配列を作成する基本的な例を見てみましょう。
<!DOCTYPE html>
<html>
<body>
<h2>デモ見出し</h2>
<p>ボタンをクリックすると、コンソールに値が表示されます</p>
<button onclick="display()">結果</button>
<p id="test"></p>
<script>
function display() {
console.log(Array.of(10, 20, 30, 40 ,50));
}
</script>
</body>
</html>
実行結果
「結果」ボタンをクリックし、ブラウザの開発者ツールでコンソールを確認すると、次のように出力されます。
このように、引数として渡した 10 ～ 50 の数値がそのまま要素となった配列 [10, 20, 30, 40, 50] が生成されているのが確認できます。
例2：文字列から配列を作成する
次に、文字列を引数として渡す例です。ここでは、上位 5 位までの生徒の名前を取得するケースを想定しています。
<!DOCTYPE html>
<html>
<body>
<h2>デモ見出し</h2>
<p>上位5位までの生徒の名前を取得します...</p>
<button onclick="display()">結果</button>
<p id="test"></p>
<script>
function display() {
console.log(Array.of("Kevin", "Tom", "Ryan", "Jacob", "Jack"));
}
</script>
</body>
</html>
実行結果
「結果」ボタンをクリックしてコンソールを確認すると、名前が要素となった配列が出力されます。
まとめ
Array.of() メソッドを使うことで、引数として渡した値から簡単かつ直感的に新しい配列を作成できます。特に new Array() の挙動に起因するトラブルを避けたい場合や、可変長の引数をまとめて配列化したい場合に便利なメソッドなので、ぜひ活用してみてください。
-
JavaScriptの配列some()メソッドの使い方をわかりやすく解説
JavaScriptのArray.some()メソッドは、配列の要素の中に、指定されたテスト（条件）を満たすものが「1つでも存在するかどうか」を判定するためのメソッドです。ここでいうテストとは、配列の各要素に対して順番に実行されるコールバック関数のことを指します。コールバック関数が1つでもtrueを返した時点でsome()はtrueを返し、すべての要素が条件を満たさなかった場合はfalseを返します。なお、空の配列に対して呼び出した場合は常にfalseを返すという仕様になっている点にも注意しましょう。some()メソッドのサンプルコード以下は、配列のsome()メソッドを使った具体的な実装例で
-
【JavaScript】関数から返された配列にアクセスする方法
JavaScriptでは、関数の戻り値として配列を返し、呼び出し元でその配列を受け取って自由に操作することができます。本記事では、関数から返された配列へアクセスする具体的な方法を、実際に動作するサンプルコードとともに解説します。 実装例：関数から配列を返してアクセスする 以下のサンプルでは、引数に渡された数値の1倍〜10倍の値を要素とする配列を生成して返すretTable()関数を定義しています。ボタンをクリックすると、この関数が返した配列を変数で受け取り、画面に表示します。 <!DOCTYPE html> <html lang=ja> <head> &l