Angular中TypeScript数组forEach与push函数的批量处理问题

先帮你梳理下原代码的对应规律，这样我们才能用循环优雅地替代重复的push操作：

• datas数组的每一项对应关系：
  • data[1].data0 → name: 'A'、颜色#00000
  • data[1].Nu0 → name: 'C'、颜色#00000
  • data[1].data1 → name: 'B'、颜色#FFFFF
  • data[1].Nu1 → name: 'D'、颜色#FFFFF
• namedatas是把data[0]里的name0、name1依次添加进去

基础循环实现（适配现有数据结构） #

我们可以先定义一个映射配置，把数据源字段和对应的name、color绑定，然后循环这个配置来批量填充datas；对于namedatas，直接循环data[0]的所有键值对即可：

// 第一步：定义数据源与目标属性的映射配置，后续加数据直接扩展这里就行
const dataMap = [
  { sourceKey: 'data0', name: 'A', color: '#00000' },
  { sourceKey: 'Nu0', name: 'C', color: '#00000' },
  { sourceKey: 'data1', name: 'B', color: '#FFFFF' },
  { sourceKey: 'Nu1', name: 'D', color: '#FFFFF' }
];

// 批量填充this.datas
dataMap.forEach(item => {
  this.datas.push({
    name: item.name,
    data: data[1][item.sourceKey],
    color: item.color
  });
});

// 批量填充this.namedatas：循环data[0]的所有属性值
Object.values(data[0]).forEach(name => {
  this.namedatas.push(name);
});

适配更多数据的扩展方案 #

如果后续data里新增了data2、Nu2、name2这类字段，不用修改循环逻辑，只需要扩展映射配置和确保data[0]的新字段符合nameX的命名规则即可：

比如新增data2、Nu2，只需要在dataMap里加两行：

const dataMap = [
  // ...原有配置
  { sourceKey: 'data2', name: 'E', color: '#XXXXX' },
  { sourceKey: 'Nu2', name: 'F', color: '#XXXXX' }
];

如果data[1]的字段命名是有规律的（比如都是dataX、NuX，X从0开始递增），还可以用动态生成配置的方式，不用手动写映射：

// 先获取最大的索引值，比如假设data[1]里有data0/data1/data2，Nu0/Nu1/Nu2
const maxIndex = Math.max(
  ...Object.keys(data[1]).filter(key => key.startsWith('data')).map(key => parseInt(key.slice(4))),
  ...Object.keys(data[1]).filter(key => key.startsWith('Nu')).map(key => parseInt(key.slice(2)))
);

// 动态生成映射配置
const dataMap = [];
for (let i = 0; i <= maxIndex; i++) {
  // 对应dataX的项，name按A/B/C...自动生成，可按需调整
  dataMap.push({
    sourceKey: `data${i}`,
    name: String.fromCharCode(65 + i), // 65是A的ASCII码，i=0→A，i=1→B，以此类推
    color: '#00000' // 可根据索引设置不同颜色
  });
  // 对应NuX的项，name按C/D/E...自动生成
  dataMap.push({
    sourceKey: `Nu${i}`,
    name: String.fromCharCode(67 + i), // 67是C的ASCII码，i=0→C，i=1→D，以此类推
    color: '#FFFFF'
  });
}

// 之后的循环逻辑和之前一样
dataMap.forEach(item => {
  this.datas.push({
    name: item.name,
    data: data[1][item.sourceKey],
    color: item.color
  });
});

// namedatas依然用Object.values循环，自动包含新增的nameX
Object.values(data[0]).forEach(name => {
  this.namedatas.push(name);
});

这种动态生成的方式，不管后续加多少dataX、NuX、nameX，都不需要修改核心循环逻辑，完全自动适配。

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