如何按需返回指定重复次数的数组 含Array.from硬编码实现示例

原硬编码实现参考 #

你给出的Array.from硬编码返回5次重复数组的写法可直接复用，仅需将固定长度值改为可配置参数即可实现按需生成，原示例用于Quasar的q-table组件rows参数赋值的用法如下：

模板代码 #

<q-table
  :rows="rows"
  :columns="columns"
  row-key="name"
/>

硬编码JS逻辑 #

rows: Array.from({ length: 5 }, (v, i) => ({
    name: 'Bodega Yulissa 002',
    sesion: 'POS/001',
    date: DateTime.now().toFormat('D'),
    receipt: 'Orden 002-017-05',
    cashier: 'Murieta R..',
    total: 'S/ 0.70',
    status: 'Pagado'
  }))

以上为*hard coded（硬编码）*写法，固定返回5条重复数据。

动态指定重复次数的实现 #

将Array.from第一个参数中的length属性值替换为动态变量即可，示例如下（以Vue3组合式API为例）：

// 定义重复次数变量，可根据业务需求动态修改
const repeatCount = ref(10)

const rows = computed(() => {
  return Array.from({ length: repeatCount.value }, (v, i) => ({
    // 若需区分每条数据，可使用索引i拼接字段，比如name: `Bodega Yulissa 002_${i}`
    name: 'Bodega Yulissa 002',
    sesion: 'POS/001',
    date: DateTime.now().toFormat('D'),
    receipt: 'Orden 002-017-05',
    cashier: 'Murieta R..',
    total: 'S/ 0.70',
    status: 'Pagado'
  }))
})

其他可选实现方式 #

除Array.from外，也可使用fill配合map实现同等效果：

const rows = new Array(repeatCount.value).fill().map((v, i) => ({
  // 字段配置同上
}))

注意必须先调用fill()，否则new Array生成的是空位数组，map方法不会遍历空位元素。

内容的提问来源于stack exchange，提问作者Angie Cristina