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.

はじめに

下の記事を見て、自分の気に入っている方法を紹介したいと思ったところです。
後述しますが、あまり差があるわけではないので、自分の好きな書き方をするのが一番ですね。

@suin様の「JavaScriptで[ 0, 1, 2, 3, 4 ]のような連番の配列を生成する方法」
https://qiita.com/suin/items/1b39ce57dd660f12f34b

ソース

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

Array.prototype.fillがES2015だと思います。

解説

// Step 1
Array(5)
// => [undefined, undefined, undefined, undefined, undefined]

// Step 2
Array(5).fill(0)
// => [0, 0, 0, 0, 0]

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

といった感じで連番の配列が生成されます。

比較

Chrome 75 (Windows, x64)の開発者ツールで比較してみました。

// fill-method
console.time('seq');
Array(10000000).fill(0).map((_,i)=>i);
console.timeEnd('seq');
// => seq: 268.4619140625ms

// spread-method
console.time('seq');
[...Array(10000000)].map((_,i)=>i);
console.timeEnd('seq');
// => seq: 303.242919921875ms

Node.js 10 (Windows, x64)では次のようになります。

// fill-method
console.time('seq');
Array(10000000).fill(0).map((_,i)=>i);
console.timeEnd('seq');
// => seq: 1638.617ms

// spread-method
console.time('seq');
[...Array(10000000)].map((_,i)=>i);
console.timeEnd('seq');
// => seq: 2144.508ms

0を詰めるfill操作が無駄に思えますが、どちらの環境でも少しだけspread構文使うより早いみたいです。
意外でした。

leak4mk0
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