【JavaScript】配列の生成いろいろ

こんにちは。
本日はJavaScriptメモです。

JavaScriptにおける配列の生成についてメモです。
本記事では、以下の方法について記載しています。

任意の引数で配列の生成ができます。

let array = Array.of(1, 2, 3, 4, 5)

arrayの中身は以下のようになります。

1,2,3,4,5

他の配列を使用して新しく配列を生成します。

let array = Array.of(1, 2, 3, 4, 5)
let array1 = Array.from(array)

array1の中身は以下のようになります。

1,2,3,4,5

第二引数には、第一引数に指定した要素に対して
実行される関数を指定できます。

let array = Array.of(1, 2, 3, 4, 5)
let array1 = Array.from(array, i => i + 1)

array1の中身は以下のようになります。

2,3,4,5,6

第三引数には、第二引数で指定した関数で使用される値を指定できます。
第三引数で指定した値は、第二引数内ではthisとして扱うことができます。
第三引数を指定する場合、第二引数にアロー関数を使用すると無視されるので注意が必要です。

let array = Array.of(1, 2, 3, 4, 5)
let array1 = Array.from(array, function(i) { return this * i }, 5)

array1の中身は以下のようになります。

5,10,15,20,25

以下のように文字列を連結されることも可能です。

let array = Array.of(1, 2, 3, 4, 5)
let array1 = Array.from(array, function(i) { return this + i }, 'No.')

array1の中身は以下のようになります。

No.1,No.2,No.3,No.4,No.5

コンストラクタを使用した配列の生成は注意が必要となります。
まず、以下のように引数が複数ある場合です。

let array = new Array(1, 2, 3, 4, 5)

arrayの中身は以下のようになります。

1,2,3,4,5

正しく指定した要素を含む配列ができていますね。

次に、要素が1つしかない場合をみてみましょう。

let array = new Array(10)

arrayの中身は以下のようになります。

,,,,,,,,,

整数値を1つを引数に指定した場合、
生成される配列は「引数で指定した数の空要素をもつ配列」となります。なので、配列の生成にはArray.of()やArray.from()を使用するのがいいですね。

以上です。

なんだかGoodVibes