JavaScriptで範囲を示す配列(数列)を生成する方法

本ページではJavaScriptを利用して範囲指定の数値配列 (PHP や Pythonで言うところの range で生成する配列) を作成する方法を説明します。

方法 #

以下の関数を利用します。

const range = (start, stop, step=1) => Array.from(
    { length: (stop - start) / step + 1},
    (_, i) => start + (i * step)
);

上記の関数を利用して数列を宣言することができます。

range(1, 10)
// => [ 1 ,2, 3, 4, 5, 6, 7, 8, 9, 10 ]
range(1, 10, 2)
// => [ 1, 3, 5, 7, 9 ]
range(10, 1, -2)
// => [ 10, 8, 6, 4, 2 ]

ある値からある値までの連番の数値配列、いわゆる等差数列を生成する関数は PHP や Python において range という関数としてデフォルトで存在しています。しかしJavaScriptには存在していないため、自作してしまうというのが本ページの内容です。

本ページでは range 関数を Array の from() という関数を利用して実現しています。引数の内容は以下の通りです。

本ページの range 関数の内容を解説します。

Array.from() 関数の宣言内容と引数の説明は MDNのドキュメントによると下記の通りです。

Array.from(arrayLike[, mapFn[, thisArg]])

Array.from() の引数
引数名	意味
arrayLike	配列に変換する配列のようなオブジェクトまたは反復可能オブジェクト
mapFn	配列のすべての要素に対して呼び出される Map 関数。
thisArg	mapFn を実行する時に this として使用する値。

上記の range 関数ではこの引数たちのうち、 arrayLike と mapFn を利用しています。

arrayLike は名前の通り「配列のようなオブジェクト」をとる引数です。

配列のようなオブジェクト、として今回の例では length プロパティを持つオブジェクトを渡しています。

{ length: 10 }
// => length プロパティを持つオブジェクト

mapFn はMap関数を受け取る引数です。

何に対して map が実行されるかというと、 arrayLike を Array が受け取って生成した配列です。つまり

Array.from({ length: 10 }, mapFn)

は以下と同義です [1] 。

Array.from({ length: 10 }).mapFn()

map 関数が受け取る引数は 1つ目が各要素の値、2つ目が各要素のインデックス、3つ目の引数が配列そのもの、となりますので本ページの range 関数で利用している以下のmap関数は

(_, i) => start + (i * step)

現在の値を読み捨て、インデックスに応じた要素の値を設定し return しているということになります。