如何用ES6数组方法简化表格数据中的重复Checkbox代码？

你可以利用Object.fromEntries结合Array.from批量生成8到23的属性与<Checkbox />的映射，彻底消除重复代码：

优化后的完整代码 #

// 生成列配置，用展开运算符替代splice更简洁
const column = [
  { title: 'day/time', dataIndex: 'day' },
  ...Array.from({ length: 16 }, (_, i) => ({
    title: `${i + 8}-${i + 9}`,
    dataIndex: `${i + 8}`
  }))
];

// 生成表格数据，批量处理8-23的Checkbox属性
const data = Array.from({ length: 7 }, (_, i) => ({
  day: `${i + 1} of week`,
  ...Object.fromEntries(
    Array.from({ length: 16 }, (_, idx) => [idx + 8, <Checkbox />])
  )
}));

代码说明 #

1. 列配置优化：用数组展开运算符替代splice，直接把首列配置和批量生成的列配置合并，代码更直观易读。
2. 数据数组简化：
   • Array.from({ length: 16 }, (_, idx) => [idx + 8, <Checkbox />])生成包含16组键值对的数组，键为8到23的数字，值为<Checkbox />组件。
   • Object.fromEntries()将上述键值对数组转换为对象，再通过展开运算符...合并到每个数据项中，避免了重复编写16次相同的属性赋值。

修改后代码冗余度大幅降低，后续若需调整时间范围（比如修改起始/结束小时），只需调整length和起始数字即可，维护成本更低。

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