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

更新日：2024/06/14

Array.fromAsync()はECMAScript仕様上で定義されたメソッドではありませんが、一部を除いた現在(2024/2)のブラウザ上で実装されています。
Node.jsは現在（v21.6.2）未実装です。

Array.fromAsync()はArray.from()と同じように、引数で与えられた値を元にして新しい配列を生成します。
ただしArray.fromAsync()は、生成された配列で解決するPromiseオブジェクトを返します。

 

■構文


Array.fromAsync ( asyncItems [ , mapfn [ , thisArg ] ] )
  1. asyncItems: 生成する配列の元となる値

    次の３種類のオブジェクトを指定可能
    ・配列などのイテラブルなオブジェクト
    ・アレイライクオブジェクト
    ・非同期でイテラブルなオブジェクト（非同期反復可能オブジェクト）

  2. mapfn: 省略可能。

    値とインデックスを引数で受け取る関数。
    戻り値が生成後の配列の値になる。
    ただしPromiseを返した場合、解決値が生成後の配列の値になる。
    ※解決後に次の値が処理される。

  3. thisArg: 省略可能。

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

生成された配列で解決するPromiseオブジェクト

 

■第二引数mapfnの構文


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

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

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

新しい配列の値、またはPromiseオブジェクト

 

■使用例

▶配列から配列を生成

const array = [1,2,3];
Array.fromAsync( array , e=>e*2 )
    .then( e=>console.log( e )); // [ 2, 4, 6 ]

▶Promise配列から配列を生成

const sleep = n => new Promise( r=>setTimeout( e=>r(n),1000 ) );
const startTime = Date.now();

Array.fromAsync( [sleep(1) , sleep(2) , sleep(3)]
   , e=>sleep(e*2) )
    .then( e=>{
        console.log( Date.now() - startTime ); // 4054
        console.log( e ); // [ 2, 4, 6 ]
      });

※1秒待ちのsetTimeout()を計6回実行していますが、処理終了までの経過時間は約4秒です。
これは[sleep(1) , sleep(2) , sleep(3)]でのsetTimeout()がほぼ同時に起動しているため、この３つの実質的な総経過時間は約1秒だからです。

▶Asyncジェネレーターから配列を生成

const sleep = n => new Promise( r=>setTimeout( e=>r(n),1000 ) );
const startTime = Date.now();

const asyncGenerator = async function *(n){
  yield sleep(1);
  yield sleep(2);
  yield sleep(3);
};

Array.fromAsync( asyncGenerator()
   , e=>sleep(e*2) )
    .then( e=>{
        console.log( Date.now() - startTime ); // 6159
        console.log( e );   // [ 2, 4, 6 ]
      });

※Asyncジェネレーター内で順番に1秒待ちしているため、処理終了までの経過時間は約6秒です。

 

■備考

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

const sleep = n => new Promise( r=>setTimeout( e=>r(n),1000 ) );
const startTime = Date.now();

const constructor = function(){
  this.prop1 = 100;
};

Array.fromAsync.call( 
   constructor
   , [ sleep(1) , sleep(2) , sleep(3) ]
   , e=>sleep(e*2) )
    .then( e=>{
        console.log( e ); // { 0: 2, 1: 4, 2: 6, prop1: 100, length: 3 }
      });

 

関連ページ

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

更新日：2024/06/14

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

スポンサーリンク

記事の内容について

null

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

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

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

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

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

 

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