[javascript]配列を初期化して作成する方法まとめ



  • ※当サイトはアフィリエイト広告を利用しています
[javascript]配列を初期化して作成する方法まとめ

javascriptにて配列の初期化する方法

javascriptで配列を初期化して生成する方法は多数あります。
そこで今回はよく利用される汎用的な初期化の書き方と、ES6以上の書き方をまとめていきます。

Advertisement

共通の配列の初期化方法

まずは基本的な書き方から記述します。融通が利かない上に便利な機能がないですが、ほとんどのブラウザーで対応できる書き方のため、まだ主流の書き方になります。

本記事のサンプルプログラムの出力結果は、chromeのコンソールのキャプチャー画像を掲載しています。

Arrayを使用して初期化した配列を作成する

javascriptにて恐らく一番古い書き方です。次に記述するカッコ[]を利用する方が増えてますが、ライブラリ等ではよく見かける書き方です。

new Array([生成したい配列データ]);

サンプルプログラム

サンプルプログラムの出力結果

カッコ[]を使用して初期化した配列を作成する

私的には「一番主流かな?」と感じている書き方です。PHPなどのウェブ開発で利用される言語でも同記述することが多いです。

[[生成したい配列データ]];

サンプルプログラム

サンプルプログラムの出力結果

 

ES6以上の配列の初期化方法

任意の値(例:0)で配列を初期化する

Array([要素数]).fill([初期化したい値]);

サンプルプログラム

サンプルプログラムの出力結果

ちなみに[初期化したい値]を5にしたときは、5で初期化した配列が生成されます。

 

0,1,2…任意の値までの配列を初期化する

公差+1の等差数列で配列を初期化します。

Array.from(Array([要素数]).keys());

サンプルプログラム

サンプルプログラムの出力結果

 

ランダムの値(整数)で配列を初期化する

サンプルプログラムは「1~100」までのランダムな値で配列を初期化します。
Math.random()関数は、[0, 1)(0以上、1未満)の浮動小数点を返すため、最大値を含む値を得たいときは「+1」するのがポイントになります。

Array([要素数]).fill().map(v => Math.floor( Math.random() * ([最大値] + 1) ));

 

ランダムの値(小数)で配列を初期化する

サンプルプログラムは「0以上、1未満」の浮動小数点のランダムな値で配列を初期化します。

Array([要素数]).fill().map(v => Math.random());

サンプルプログラム

サンプルプログラムの出力結果

Advertisement

さいごに

現実問題として、まだIEを切り捨てる訳にはいかないのでjavascriptのES6版を使う機会は、もう少し先になると考えています。ただとても便利な機能が実装されているため、OSのバージョンアップに伴い、ユーザーのブラウザー環境が整うのを心待ちにしています。

 

 

ウェブプログラミングについては下記の本も参考になるので、スキルアップにお役立てください。
徳丸 浩(著)
ページ数: 688ページ
出版社:SBクリエイティブ
発売日:2018/06/21

出典:amazon

 

この記事が気に入ったら
いいね ! をお願いします

Twitter で

web開発カテゴリの最新記事