在 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" }, ]