【JSリファレンス】Array.from()

更新日：2024/06/14

Array.from()は、Arrayコンストラクターのメソッドです。
引数で与えられた配列またはアレイライクオブジェクトから、新しい配列を作成します。

 

■構文


Array.from ( items [ , mapfn [ , thisArg ] ] )
  1. items: 元となるオブジェクト

    配列などのイテラブルなオブジェクトまたはアレイライクオブジェクトを指定する。

  2. mapfn: 省略可能。

    itemsの要素とインデックスを引数で受け取る関数。
    返り値が生成された配列の値になる。

  3. thisArg: 省略可能。

    mapfnにthis値として渡される値。
    this値を受け取るには、mapfnはアロー関数ではなく、functionで定義する必要がある。

生成された配列

 

■第二引数mapfnの構文


function( value , index ){ return newArrayValue;}
  1. value: 配列要素の値
  2. index: 配列要素のインデックス

元となる配列のインデックスに欠番があるときも、そのインデックスで mapfn が呼び出されます。
その際のvalueは undefined です。

配列ではなくアレイライクオブジェクトの場合、indexは 0 から lengthプロパティ-1 までの整数値を受け取ります。

新しい配列の値

 

■使用例

▶各要素を2倍にした配列を生成

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

※備考：配列の要素に変更を加え新しい配列を生成するときは、上記の方法ではなくArray.prototype.map()を推奨します。

▶アレイライクオブジェクトを配列に変換

const arrayLike = {0:1,1:2,2:3,length:3};
const array = Array.from( arrayLike );
console.log( array ); // [ 1, 2, 3 ]

▶要素数3の配列を生成して、インデックスにthisで受け取った値を掛けた結果をセット。

const array = Array.from( {length:3} , function(value,index){
    return index * this.multi;
  } ,{ multi:2 } );

console.log( array ); // [ 0, 2, 4 ]

 

■備考

call()等でthis値としてコンストラクターを受け取ると、要素を格納するオブジェクトを受け取ったコンストラクターで生成します。

const constructor = function(){
  this.prop1 = 100;
};
const array = Array.from.call( constructor , [1,2,3]);
console.log( array ); // { '0': 1, '1': 2, '2': 3, prop1: 100, length: 3 }

 

関連ページ

●【JavaScript】 Array.fromの使い方を理解する

 

関連ページ

●【JavaScript】イテラブルな標準組み込みオブジェクト一覧

更新日：2024/06/14

書いた人（管理人）：けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://jsref.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。