JavascriptにはPythonのrange的なものがなかった
PHPにはrangeが、Pythonにもrangeがあってそれぞれ連続した任意の数の配列を作れる。参考
一方、Javascriptさんはというと...ない！？
「いやでもえっと、for(let i = 0; i < 10; i++){hogehoge}で10回ループまわして、えっと...」
ダサい。
すごくクールな記法はライブラリを使うしかないようだが、まあせめてワンライナーでこれを実現したい。そんな人に向けて記事にまとめておきました。
Javascript でワンライナーで0から10の値を持つ配列を作る
1つ目
[...Array(10)].map((v, i)=> i)
new Array(n)で配列風の何かが作れる。でスプレッドして分割、10個の要素を持つ配列(中身はundefined)ができ、それについてmapしてインデックスを取り出しそれを連続する要素とする方法。
すごく妥当。
2つ目
Object.keys([...Array(10)])
1つ目とコアな部分は似てる。まずは10の配列風の何かを作ってスプレッド、それらのキー(つまりインデックス)を取り出すと丁度連番になっているというもの。
こちらは1つ目とは異なり、1つ1つの要素が文字列となる。(Object.keysなんで)
使い分けかな。
3つ目
Object.keys(Array.apply(null, {length: 10}))
こちらは、ちょっと不思議な記法。
Function.prototype.applyの説明を見ると、
apply() メソッドは与えられた this 参照値と、配列 (もしくは配列風のオブジェクト) の形で与えられた引数を用いて関数を呼び出します。
ここでミソなのが、どうやらこのapplyは"配列風"というのをlengthプロパティを見ているようで、その仕様を用いたもの、と思われる。ネットで調べていたら出てきた。気づいた人すごい。
Array.apply(...)を用いて10の要素を持つ配列を生成し、最終的にObject.keysでインデックスを取り出すというもの。
2つ目と同様に、こちらも戻り値の1つ1つの要素は文字列になる。
4つ目
Array.apply(null, {length: 10}).map((v, i)=> i)
3つ目と1つ目の合わせ技。割愛。
5つ目
Array.apply(null, {length: 10}).map(Number.call, Number)
途中までは4つ目と同じ。最後が...ちょっと説明して欲しい笑
stack overflowで誰かに対する回答として挙げられていた。なにこれ。
6つ目
@htsign さんより
Array.from({ length: 10 }, (_, i) => i)
Array.from方式です。Array.fromは、配列風なオブジェクトを配列をもとに配列を返してくれますが、第2引数を与えるとそれをmapfunctionとしてくれるので、最終的にindexを取り出して返却するmapfunctionを仕掛けることで配列を得るというものですね。クールや...
7つ目(これが一番クールか！？)
@ttatsf さんより
[...Array(10).keys()]
これですね。一番シンプルでした。おみそれしました。これからはこの書き方でいかせていただきます。
lodashすれば一発だけどね。
lodash#range
_.range(10)
他の要件でlodashその他ライブラリを入れているのであれば間違いなくこっちを使うべきですね。