[...Array(200)].mapという記述について

Question

javascriptのソースを見ていた時に以下のコードがあったのですが
何をしているのかよくわかりません。
特に...Arrayのあたりが調べてみても理解できずにおります。

this.items = [...Array(200)].map((_, i) => {
      return {
        text: `Item: ${i}`
      };
    });

初心者質問で恐縮ですが、ご教示いただけると助かります。

Answer 1

下記のようにしてデベロッパーツールで確認してみてください。

console.log( [...Array(200)] );

200 の要素を持つ配列に展開しています。Array(数値)で初期サイズをもった配列が作成できますが、要素を実際に持っているわけではないのでスプレッド演算子で展開して配列にしているのだと思います。

【スプレッド構文 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

【【JavaScript】スプレッド演算子の便利な使い方まとめ】
https://qiita.com/sanonosa/items/e6f503cbb95c8e6967f8

【Array - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

【Array.prototype.map() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

【JavaScriptプログラミング講座【配列について（Array）】】
https://hakuhin.jp/js/array.html#ARRAY_01

Comments

[jojo003]

デベロッパーツールで実行してみたら良くわかりました。
スプレッド演算子についても知りませんでした…。
ドキュメントのリンクありがとうございます。
よく読んで知識を深めようと思います！