如何用[key: type]: value正确填充对象并按动态表格列过滤数据？

需要根据动态切换显示/隐藏的表格列（列名集合：['referenceName', 'shipmentId', 'freightType', 'etd', 'eta', 'notes', 'company', 'origin', 'carrier', 'voyageNumber', 'actualDeparture']）从对象数组中筛选数据，但现有TypeScript代码运行后数据重复，重复次数等于原数组长度。

错误代码 #

console.log('elements', this.elements[0]);
const currentsColumns = Object.keys(this.columnOptions);
const dataTableFiltered = [];
const elementsTable: {[key: string]: any} = {}

this.elements.forEach((element, index: number) => {
  Object.keys(element).map((key) => {
    const elementKey = key;
    if (currentsColumns.includes(elementKey)){
      if((typeof element[key]) === 'object'){
        elementsTable['key'] = (JSON.stringify(element[elementKey]));
      }else{
        elementsTable['key'] = element[elementKey]
      }
    }
  });
})

问题原因 #

1. 复用同一对象导致重复：elementsTable定义在循环外部，所有元素循环时都修改同一个对象，最终数组里的所有元素都指向这个唯一对象，表现为数据重复。
2. 键名错误覆盖数据：赋值时使用固定字符串'key'作为对象属性名，而非变量elementKey，导致所有字段值都被存在同一个key属性下，之前的字段值被不断覆盖。
3. 未将处理结果存入目标数组：循环中没有把处理后的elementsTable添加到dataTableFiltered，最终目标数组为空。

修正后的代码 #

基础修正版本 #

console.log('elements', this.elements[0]);
const currentsColumns = Object.keys(this.columnOptions);
const dataTableFiltered: {[key: string]: any}[] = [];

this.elements.forEach((element) => {
  // 每个元素创建独立的新对象
  const elementsTable: {[key: string]: any} = {};
  Object.keys(element).forEach((key) => {
    if (currentsColumns.includes(key)) {
      // 使用变量key作为属性名，而非固定字符串'key'
      if (typeof element[key] === 'object' && element[key] !== null) {
        elementsTable[key] = JSON.stringify(element[key]);
      } else {
        elementsTable[key] = element[key];
      }
    }
  });
  // 将处理后的对象存入目标数组
  dataTableFiltered.push(elementsTable);
});

// 最终筛选后的数据在dataTableFiltered中
console.log('filtered data', dataTableFiltered);

简化优化版本（使用map） #

console.log('elements', this.elements[0]);
const currentsColumns = new Set(Object.keys(this.columnOptions));
const dataTableFiltered = this.elements.map(element => {
  return Object.fromEntries(
    Object.entries(element).filter(([key]) => currentsColumns.has(key))
      .map(([key, value]) => {
        if (typeof value === 'object' && value !== null) {
          return [key, JSON.stringify(value)];
        }
        return [key, value];
      })
  );
});

console.log('filtered data', dataTableFiltered);

优化说明 #

• 使用Set存储当前列名，has方法的查询效率比includes更高，适合频繁切换列的场景。
• 用map直接生成新数组，替代forEach+push的写法，更符合函数式编程风格，代码更简洁。
• 增加element[key] !== null判断，避免把null（typeof为object）错误转成JSON字符串。

内容的提问来源于stack exchange，提问作者Pedro Miguel Pimienta Morales