Arrayオブジェクトとスプレット構文について

Question

Array(10)と、[...Array(10)]の違いについて、分かる方がいましたらご教授頂きたいです。
どちらもArray.isArray()でtrueなので、mapなどで回せると思っていたのですが、Array(10)で生成した配列オブジェクトは回せなかったので、理由を知りたいです。
分かる方がいましたら、何卒よろしくお願い致します。

コードを載せていなかったので、以下に試したコードを追記いたします。

const array01 = Array(10);
const array02 = [...Array(10)];

console.log(Array.isArray(array01));
console.log(Array.isArray(array02));

array01.map(item => {
  console.log('item', item); // 出力されない
});

Comments

[y_waiwai]

ちと意味不明になってます。
周辺のコードも合わせて提示しましょう

[hoshi-takanori]

その辺は JS 言語の闇ですね。
https://infoteck-life.com/a0160-js-array-sparse/

[tmykndr]

y_waiwai さん
周辺のコードを記載しておらず申し訳ございませんでした。コード追記させていただきました。
ご指摘ありがとうございます。

[tmykndr]

hoshi-takanori さん
参考URLありがとうございます。
こちら確認いたします。

Answer 1

Array(10)で作った配列は、lengthこそ10ですが、要素は**undefinedすら存在しない**状態です（Chromeの開発ツールを使うと、[empty * 10]のように出ます）。

一方で、[...Array(10)]では、undefinedが10個要素として入った配列が作成されます。

mapは要素が存在するところしか参照しませんので、結果が違ってきます。

Comments

[maisumakun]

もっとも、いったん空の配列を作ってmapするぐらいなら、Array.fromにコールバックを渡す方法も考えられます。

[tmykndr]

maisumakun さん
ご回答いただき有難うございます！
大変分かりやすく迅速に回答をいただけましたので、ベストアンサーとさせていただきました。
私はcodepenで雑に確認してしまい、違いに気づけませんでした。(codepenのconsole出力では、Array(10)でもundefinedが10個要素入った配列として、出力されていました。)
Chromeの開発者ツールで、ご指摘の通りの出力がされること確認できました。
この度は本当にありがとうございました。