在 Kibana 的 sample code 中看到了一個產生array的方法
(nano id 可以換成任意id產生器) 省略 import { nanoid } from "nanoid"
const makeList = (number, start = 1) =>
Array.from({ length: number }, (v, k) => k + start).map((el) => {
return {
content: `Item ${el}`,
id: nanoid(),
};
});
產生的結果(刻意排版)
const samplList = makeList(3);
console.log(samplList);
//[ { content: "Item 1", id: "qEfWB2uuc8OMx803dr6P6" },
// { content: "Item 2", id: "K3CQDCYmle7FS8Vuqe4Ea" },
// { content: "Item 3", id: "9ee_iBLiRYdxW2JbSbtU3" }, ]
Array.from 可以指定來源產生 Array
Array.from() - JavaScript | MDN
但如果給一個 {length: 數字}
的物件,可以指定長度產生數值陣列
第二個參數是一個function,v
我還不確定怎麼使用,i
代表index
// 產生數值序列
// 因為陣列中的每個位置都會被初始化為 `undefined`,
// 下方 `v` 會是 `undefined`
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]
回到 Kibana 的實作,他將回傳的 Array 加上 1 變成從 1 開始的陣列,然後直接.map去遍歷每個元素,回傳由特定物件組成的 Array
const makeList = (number, start = 1) =>
Array.from({ length: number }, (v, k) => k + start).map((el) => {
return {
content: `Item ${el}`,
id: nanoid(),
};
});
所以結果自然就會如下(刻意排版)
[ { content: "Item 1", id: "qEfWB2uuc8OMx803dr6P6" },
{ content: "Item 2", id: "K3CQDCYmle7FS8Vuqe4Ea" },
{ content: "Item 3", id: "9ee_iBLiRYdxW2JbSbtU3" }, ]