配列の疑問点について

Question

Qiitaの記事を読んでいて疑問な点があり質問させてもらいました。
該当のコードは以下になります。

const nums = [...Array(10)];
nums.map((v, i) => i+1).map((i) => i*2); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

こちらなのですが、疑問点が２箇所あります。
const nums = [...Array(10)];ここの部分をconst nums = Array(10);このように変更したら、nums.mapを施した式もundefinedになってしまいました。こちらは何故なのでしょうか。
また、nums.map((v, i) => i+1)こちらの箇所では、引数vが配列に格納されている値であり、2つ目の引数iは添字(0~9)でありそちらが順に呼び出されていっているといった理解であっておりますでしょうか。
どなたか、ご助言の程頂けましたら幸いです。

Answer 1

Array(x)で宣言した配列は中身が空なのでmapで走査することができません
[...Array(x)]することでundefindで埋まった配列が得られるので
それを利用しています。fillなどで埋めることもあります

const nums = [...Array(10)].map((_,i)=>i+1).map(i=>i*2);
もしくは
const nums = Array(10).fill(null).map((_,i) =>i+1).map(i=>i*2);

vは利用価値がないので慣習として_で受けることもあります

Comments

[jjj001]

ご回答ありがとうございます。
>Array(x)で宣言した配列は中身が空なのでmapで走査することができません
[...Array(x)]することでundefindで埋まった配列が得られるので
実の所、こちら2の違いがいまいち分からない状況です...
何故[...Array(x)]このようにすることで、配列を得ることが出来るのでしょうか...?

[yambejp]

配列の空スロットについては何も反応しない場合と何か反応する場合の
２つの場合があるということです。

→何も反応しない
forEachやmap関数、for in構文など
for(var i in Array(10)) console.log(i);
Array(10).forEach(x=>console.log(x));
console.log(Array(10).map(x=>x));

→何か反応する
for of、スプレッド処理、fillやjoinなど
for(var i of Array(10)) console.log(i);
console.log(...Array(10));
console.log(Array(10).fill(1));
console.log(Array(10).join(","));

これは覚えて慣れるしかありません。

[jjj001]

ありがとうございます
> 配列の空スロットについては何も反応しない場合と何か反応する場合の
２つの場合があるということです。
こちらのように覚えておきたいと思います。

Answer 2

このように変更したら、nums.mapを施した式もundefinedになってしまいました。こちらは何故なのでしょうか。

Array(10)で作った配列は、「要素がない（undefinedすら入っていない）」という特殊な状態になります（要素のないところはmapでの処理もなされません）。[...Array(10)]とすると、「undefinedが10個入った配列」ができあがります。

引数vが配列に格納されている値であり、2つ目の引数iは添字(0~9)でありそちらが順に呼び出されていっているといった理解であっておりますでしょうか。

そのとおりです（MDN）。

---

なお、Array.fromを使えば、「いったんundefinedが必要個数入った配列を作る」というプロセスを経ることなく、同等のことが実行可能です（MDN）。

Array.from({length: 10}, (v, i) => i+1).map((i) => i*2);

Comments

[jjj001]

ご回答ありがとうございます。
ご丁寧に教えて頂き恐縮なのですが、一点だけ疑問な点があります。
> Array(10)で作った配列は、「要素がない（undefinedすら入っていない）」という特殊な状態になります
こちらなのですが、undefinedすら入っていないということがどういうことなのかがいまいち分からない状況です...[...Array(10)]こちらのケースではundefinedが10個作成されるということなのですが、Array(10)こちらではundefinedがない状態にも関わらず何故10個要素が格納される形となるのでしょうか...?

[maisumakun]

> こちらではundefinedがない状態にも関わらず何故10個要素が格納される形となるのでしょうか...?

「要素0個の配列を作って、lengthだけ10に書き換えた」のと同じ状態です。

[jjj001]

ありがとうございます。
なんとなく、イメージを掴むことが出来ました。