【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関数を使って１つずつ取り出し、それを連番ＩＤとして利用しています。これで簡単にオブジェクトがいくつでも生成できるかと思います。

[say name="Shin" img="http://shincode.info/wp-content/uploads/2021/04/cropped-Unity_sibainu_icon-scaled-1.jpg"]すごい！！[/say]

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

Array.from()メソッドを使って連番を振る方法：まとめ

連番オブジェクトの生成のコツは、連番配列を生成してからmap関数を使ってその連番配列から１つずつ数字を取り出して利用する。と言った流れでしたね。

それでは👋

Javascript

記事一覧