【JavaScript】Array.from()メソッドを使って連番を振る方法を解説

突然ですが、JavaScriptで連番を振りたいな～って時ありますよね。

Shin

連番IDでオブジェクト作りたいときあるね

ということで今回はArray.From()メソッドを使って簡単に連番を振る方法をご紹介します。

【JavaScript】Array.from()メソッドを使って連番を振る方法

まずは配列に１つずつ連番を生成してみます。

const count = 5;
const serialNumber = Array.from({ length: count }, (v, k) => k);
console.log(serialNumber);　.//結果：[0,1,2,3,4]

配列はそれぞれの場所が `undefined` で初期化されるので、(v, k) => k のv の値は undefinedになります。lengthプロパティに数字を設定することで（今回はcount=5）、その数字の数だけ連番を生成することができます。

ちなみに、上の記述は以下と同じです。

const count = 5;
const serialNumber = Array.from({ length: count }).map((v, k) => k);　
console.log(serialNumber);　.//結果：[0,1,2,3,4]

つまり最初の２行目のコードはmap関数を省略して記述したものになります。map関数によって１つずつ数字を取り出して連番を振っているわけですね。

応用：連番IDを持つオブジェクトを生成してみよう

連番IDを生成できれば簡単に大量のオブジェクトが作れますね👇

const count = 5;
const serialNumber = Array.from({ length: count }).map((v, k) => k);
console.log(serialNumber);　.//結果：[0,1,2,3,4]
const serialObj = serialNumber.map((k) => ({
  id: `item-${k}`,
}));
console.log(serialObj);　//結果：[{id:"item-1"},{id:"item-2"},{id:"item-3},{id:"item-4},{id:"item-5}]

連番を生成した配列から、さらにmap関数を使って１つずつ取り出し、それを連番ＩＤとして利用しています。これで簡単にオブジェクトがいくつでも生成できるかと思います。

Shin

すごい！！

最初に考えた人は本当にすごいですね。