JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】JavaScriptのArray.from()メソッドの使い方を実例で解説

JavaScript の Array.from() メソッドは、length プロパティを持つオブジェクト（配列風オブジェクト）や、文字列・Map・Set などの反復可能（イテラブル）なオブジェクトから、新しい Array オブジェクトを生成して返すためのメソッドです。
元のオブジェクトは変更されず、常に新しい配列インスタンスが返されます。

基本構文

Array.from(obj, mapFunction, val)

パラメータの説明

  • obj：配列へ変換したい対象のオブジェクト。配列風オブジェクト（length プロパティを持つもの）や反復可能なオブジェクトを指定します。
  • mapFunction：（省略可）配列の各要素に対して呼び出されるマップ関数です。指定すると、変換処理を行いながら配列を生成できます。
  • val：（省略可）mapFunction を実行する際に、内部で this として使用される値です。

戻り値

引数として渡したオブジェクトから新しく生成された Array インスタンスが返されます。

サンプルコード①：文字列から配列を生成する

<!DOCTYPE html>
<html>
<body>
   <h2>デモ見出し</h2>
   <p id="test"></p>
   <script>
      var arr1 = Array.from("PQRS");
      var arr2 = Array.from("12345");
      document.getElementById("test").innerHTML = arr1 +" and "+arr2;
   </script>
</body>
</html>

このコードでは、文字列「PQRS」と「12345」をそれぞれ Array.from() に渡しています。文字列は反復可能なオブジェクトであるため、1文字ずつ分解された新しい配列が作成されます。

実行結果

【初心者向け】JavaScriptのArray.from()メソッドの使い方を実例で解説

画面には「P,Q,R,S and 1,2,3,4,5」と表示されます。innerHTML に出力する際、配列は自動的にカンマ区切りの文字列へ変換される点に注意してください。

サンプルコード②：記号を含む文字列から配列を生成する

<!DOCTYPE html>
<html>
<body>
   <h2>デモ見出し</h2>
   <p id="test"></p>
   <script>
      var arr1 = Array.from("PQRS");
      var arr2 = Array.from("%$%#$$#$");
      var arr3 = Array.from("12345");
      document.getElementById("test").innerHTML = arr1 +", "+arr2+" and "+arr3;
   </script>
</body>
</html>

実行結果

【初心者向け】JavaScriptのArray.from()メソッドの使い方を実例で解説

英字・数字だけでなく、記号を含む文字列でも同じように動作します。各文字がそのまま配列の要素として格納されていることが確認できます。

応用：mapFunction を使った変換付きの生成

第2引数のマップ関数を指定すると、要素を変換しながら配列を生成できます。

const doubled = Array.from([1, 2, 3], x => x * 2);
console.log(doubled); // [2, 4, 6]

// length プロパティを利用して連番の配列を作る例
const seq = Array.from({ length: 5 }, (_, i) => i);
console.log(seq); // [0, 1, 2, 3, 4]

このように Array.from() は、文字列の分解だけでなく、配列風オブジェクト（NodeList など）の本物の配列化や、連番データの生成など、実務でも幅広く活用できる便利なメソッドです。

  1. JavaScriptのArray.flat()メソッドとは？使い方をわかりやすく解説

    Array.flat()メソッドの基本JavaScriptのArray.flat()メソッドは、ネストされた（入れ子になった）配列を、指定した深さまで再帰的に平坦化（フラット化）するためのメソッドです。元の配列は変更されず、新しい平坦化された配列が生成される点が特徴です。引数には平坦化の深さ（depth）を数値で指定します。深さを指定しない場合のデフォルト値は「1」です。また、「Infinity」を指定すると、どれほど深くネストされた配列でも完全に平坦化できます。構文arr.flat(depth)depth（省略可能）：ネストされた配列を展開する深さ。デフォルトは1。サンプルコード以下は、Ar

  2. JavaScriptのArray.prototype.includes()メソッドとは？配列内に特定の要素が含まれるか判定する方法

    Array.prototype.includes()メソッドとは JavaScriptのArray.prototype.includes()メソッドは、配列の中に特定の要素が含まれているかどうかを判定するためのメソッドです。要素が見つかった場合はtrue、見つからなかった場合はfalseを返します。 基本構文 arr.includes(searchElement[, fromIndex]) searchElement：検索対象となる要素を指定します。 fromIndex（省略可能）：検索を開始するインデックス位置です。省略した場合は先頭（0）から検索されます。 サンプルコード 以下は、in