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

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

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

Shin

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

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

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

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

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]

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

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

Shin

すごい!!

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

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

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

それでは👋

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です