【JavaScript】要素数と初期値で配列を作成する

更新日：2023/06/23

JavaScriptで要素数と初期値で動的に配列を作成したいときがあります。
これは配列リテラル( [ 値 , 値 ,... ] )では実現できません。
ではどうすればいいのでしょうか。
今回は、その方法をお伝えします。

要素数指定で配列作成

要素数で配列を作成するときは、Array.from()を使用します。

const ary = Array.from( { length : 5 } );
console.log( ary ); // 結果:  [undefined, undefined, undefined, undefined, undefined]

ポイントは、lengthプロパティを持っているオブジェクトを引数で指定することです。
これで、undefined値を指定数持つ配列が作成されます。

指定値で配列を埋める

次にfill()を使用して、配列の全ての要素を同じ値で埋めます。

ary.fill( 1 );
console.log( ary ); // 結果: [1, 1, 1, 1, 1]

fill()は戻り値で変更後の配列を返しますが、実際は自分自身が変更されています。

関数化する

要素数指定で配列作成と指定値での配列を埋めを一つにして関数化します。

const createArray = (length,initialValue) => Array.from( { length } ).fill( initialValue );
console.log( createArray( 5 , 1 ) ); // 結果: [1, 1, 1, 1, 1]

あまり知られていないのですが、オブジェクトリテラルで変数のみ記述すると、その変数名でプロパティを作成してくれます。
なので { length } は記述ミスではありません。

Array.from()だけでよかった

実はArray.from()は、map()のようにコールバックで要素値を指定できます。
この機能を使用すると、fill()が不要になります。

const createArray2 = (length,initialValue) => 
    Array.from( { length } , ()=>initialValue);
console.log( createArray2( 5 , 1 ) ); // 結果: [1, 1, 1, 1, 1]

処理速度はコールバック関数を呼び出すオーバーヘッド分を考えると、fill()を使った方が速いです。
要素数が数百程度ならどちらでも体感上の差がありませんが、さらに多くの要素を扱うときは検討の余地ありです。

関連記事

スポンサーリンク

記事の内容について

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

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

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

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

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

 

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