[TypeScript] 添え字を活用して、連番の配列を生成する。

今回は、与えられた数をもとに連番の配列を生成する必要があったため、参考をもとに整理していきます。2または3通りの記述方法があります。

参考

前提

• 生成するのは、[ 0, 1, 2, 3, 4, ..., num]のような添え字を要素にもつ配列です。

省略形		意味
v	value	要素
i	index	添え字

結論

この記事では主に以下の記述方法を説明します。しかし、実際に使用するのはドキュメントより引用した記述方法がよいです。

// numに期待する配列の要素の数を代入
const numS = [...Array(num)].map((v, i) => i);

以下の記述方法は、ドキュメントより引用したものです。コメントでいただきましたが、こちらの方が処理が軽量とのことです。前者ではなくこちらを使うほうがよいです。

// 連番の生成
// 配列はそれぞれの場所が `undefined` で初期化されるため、
// 以下の `v` の値は `undefined` になる
// Array.from(arrayLike, mapFn)
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]

本文

ここから順を追って説明します。

Array(num) の説明

Arrayコンストラクターを使用して、引数 num と同じ数の空の配列を生成します。ここで .map() メソッドを使用しても、要素が空であるため何も起こりません。

[...Array(num)] の説明

配列のスプレッド構文「...」を使用して、配列のコピーを作成します。これにより、undefined の配列を生成できます。
空の配列にわざわざ undefined を格納するのは、のちに .map() メソッドで要素を取り出すためです。

.map((v, i) => i) の説明

配列.map() メソッドを使用することで、undefined を添え字に変換します。
このメソッドは、与えられた関数（callbackFn）のなかで3つの引数を取ります。それは、element、index、array の3つです。ここで使用するのはelement と index です。element には配列から取り出した要素が入り、index には配列のなかの要素がもつ添え字が入ります。

ここでは、適当な変数（v）に要素を取り出し、それを無視する形で添え字（i）を要素に格納します。これにより、[ 0, 1, 2, 3, 4, ..., num]のような添え字を要素にもつ配列が生成されます。

結論

[...Array(num)].map((v, i) => i) によって、まずは空の要素をもつ配列を生成し、その配列に undefind を格納します。そして、.map() メソッドで undefind に添え字を格納します。

一度、undefined を挟むのは .map() メソッドで配列から要素を取り出すためです。

追記

コメントより参考

Arrayオブジェクトの .from() メソッドと .key() メソッドを使用する方法もあるようです。

メソッド		説明
静的メソッド
.from()	配列を生成します。	反復可能オブジェクトや配列風オブジェクトから配列を生成します。また、連番を生成できます。Array.from({ length: 5 }, (v, i) => i);
インスタンスメソッド
.keys()	添え字をそのまま配列にします。	与えられた配列の添え字を要素に格納した、新たな配列を生成します。

ドキュメントより引用

ドキュメントの Array.from() メソッドのページに、連番の生成方法の記述がありました。

// 連番の生成
// 配列はそれぞれの場所が `undefined` で初期化されるため、
// 以下の `v` の値は `undefined` になる
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]