TypeScript中如何基于tableColumns数组动态创建newData对象？

这事儿很简单，用数组的reduce方法一行代码就能搞定，完全不用硬编码：

const newData = this.tableColumns.reduce((acc, column) => {
  acc[column.headerName] = "";
  return acc;
}, {});

拆解下逻辑： #

• reduce会遍历tableColumns里的每一个列对象
• 我们传入空对象{}作为初始的累加器acc
• 每遍历一项，就把当前列的headerName作为键、空字符串作为值，添加到累加器里
• 遍历结束后，reduce返回的就是你要的newData对象

要是你更喜欢直观的循环写法，用for...of也一样能实现：

const newData = {};
for (const column of this.tableColumns) {
  newData[column.headerName] = "";
}

这两种方式都会跟着tableColumns的变化自动调整newData的结构，以后新增或修改列都不用改这段代码，灵活性拉满。

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