如何用ES6数组方法生成8-23的动态表格表头？

我想要制作一个表头范围为8到23的表格，使用ES6及数组方法实现。目前编写了如下代码：

const column = Array.from(Array(16), (_, x) => [x + 8]).fill({
    title: 8,
});

当前输出所有表头均为8，期望输出表头依次为8到23，请问该如何修改代码？

问题分析 #

你的代码存在两个核心问题：

1. Array.from 中你先生成了包含数字的数组（[x+8]），随后用 fill 方法将同一个 {title:8} 对象覆盖了数组所有元素，导致所有项的title都是8。
2. fill 方法会将同一个引用的对象填充到数组的每个位置，即使后续修改其中一个对象，所有项都会同步变化，这不符合需求。

正确实现方式 #

以下几种ES6数组方法的写法都能实现目标：

方式1：直接用 Array.from 映射生成对象数组

const column = Array.from(Array(16), (_, index) => ({
  title: index + 8
}));

Array.from 的第二个参数是映射函数，index 从0到15，加上8后正好对应8到23的数值，直接返回包含对应title的对象即可。

方式2：利用 Array.keys() 结合 map

const column = [...Array(16).keys()].map(num => ({
  title: num + 8
}));

Array(16).keys() 返回一个包含0到15的迭代器，通过扩展运算符转成数组后，用map将每个数字转换为对应的表头对象。

方式3：简化的 Array.from 写法

const column = Array.from({ length: 16 }, (_, i) => ({ title: i + 8 }));

直接传入指定长度的对象给Array.from，映射逻辑和方式1一致，写法更简洁。

以上三种方式最终都会生成包含16个对象的数组，每个对象的title属性从8到23依次递增。

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