Javascriptで任意の値を持つn個の配列を作成する

目次

ネットで見つけた方法は

どうやら下記コードで目的は達成できるらしい。

 new Array(10).fill(0).map(() => 0)
 // => [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

いったい、どうしてこうなるのか。

何が行われているのか?

new Array()

かっこの中に入れたLength分の配列を作成する。

つまりnew Array(10)であれば10個の値を含む配列を作成してくれる。

ちなみに値はundefinedになる

[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

fill()

fill() メソッドは、開始位置(既定値は 0)から終了位置(既定値は array.length)までのすべての要素を、静的な値に変更した配列を返します。

つまり先ほど作った10個のundefinedを持つ配列のundefined0に変更してくれるということ?

console.log(new Array(10).fill(0))
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

ということらしい。

この時点でタイトル(n個の任意の値を持つ配列を作成する)という目的は達成されている。

いったいmap()は何をしているのか?

map()

このコードでいえばmap()は配列の個数分取り出して0を入れるという、まったく生産性のない動きをしている。

つまり本タイトルという目的を達成するためであれば、不要以外の何物でもない。

n個の任意の値を持つ配列を作成する方法

ということで結論は、

console.log(new Array(10).fill(0))
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

に落ち着いた。

map()が必要な場合は?

ちなみにmap()が必要な時は、必要とする値がオブジェクトの時らしい。

javascript fillでオブジェクトの配列を作成した際の注意点

上に詳しく説明されているけど、どうやら指定した個数分参照渡しされているということ。
つまり、3つの配列を作り、その2番目のkeyを変更しようとしたところ、すべてのkeyが変更される結果になる。

const v = new Array(3).fill({hello: 'Hello', world:'World'})
v[2].hello = 'goodbye'
console.log(v)
// [
//     {
//         "hello": "goodbye",
//         "world": "World"
//     },
//     {
//         "hello": "goodbye",
//         "world": "World"
//     },
//     {
//         "hello": "goodbye",
//         "world": "World"
//     }
// ]

そのため、mapで入れなおす必要がある。

念のためシンプルな個数分の配列で行ったけど、問題なかった。

const v = new Array(10).fill(0)
v[2] = 2
console.log(v)
// (10) [0, 0, 2, 0, 0, 0, 0, 0, 0, 0]

オブジェクトの時だけことは起こるらしい。

次に読むおすすめ記事

何が面倒って、アイキャッチ画像を設定するほど面倒なことはない

Angularをバージョン指定でインストールする方法は?

Vue3のベースプロジェクトのコードを統一する

n の倍数で数値を丸める

Vue3のベースプロジェクトを作成したので、仕上げにhuskyを導入する

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です