Help us understand the problem. What is going on with this article?

JavaScriptで[ 0, 1, 2, 3, 4 ]のような連番の配列を生成する方法

More than 1 year has passed since last update.

JavaScriptで[ 0, 1, 2, 3, 4 ]のような連番の配列を生成する方法です。

[...Array(5)].map((_, i) => i) //=> [ 0, 1, 2, 3, 4 ]

spread operator...と、arrow function=>を使っているためES6以降で動作します。

解説

上のコードは3つのパートに分けられます。

パート1: Array(5)

これは要素数が5つ(=スロットが5つあるだけ)の空っぽの配列を作る。undefinedが5つ入るわけでない。

Array(5) //=> [ <5 empty items> ]

パート2: [...Array(5)][... ]の部分

要素数が5つある配列をspread operatorにかけて、undefined5つの配列に変形している。

[...Array(5)] //=> [ undefined, undefined, undefined, undefined, undefined ]

パート3: .map((_, i) => i)

mapメソッドでundefined5つの配列を、インデックス番号が値になった配列に変形している。

[ undefined, undefined, undefined, undefined, undefined ].map((_, i) => i)

応用: [ 1, 2, 3, 4, 5 ]のように1始まりにしたい場合

[...Array(5)].map((_, i) => i + 1) //=> [ 1, 2, 3, 4, 5 ]
//                            ^^^ mapのコールバック関数で+1の演算をすればよい  
suin
Qiita 4位/TypeScript入門書執筆中/TypeScripterのための座談会「YYTypeScript」主催/『実践ドメイン駆動設計』書籍邦訳レビュア/分報Slack考案/YYPHP主催/CodeIQマガジン執筆/株式会社クラフトマンソフトウェア創設/Web自動テスト「ShouldBee」の開発/TypeScript/DDD/OOP
https://yyts.connpass.com/
craftsman_software
「インフラの心配は、もうおしまい」 インフラ運用を自動化し、手作業を限りなくゼロにする会社
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away