如何根据用户输入条件动态调整CSV导出列（优化方案）

我已经实现了基于接口响应导出CSV的功能，现在需要根据用户输入（选择Veggie或Fruit）动态调整导出的列。目前用重复代码的方式实现，想找更优化的方案。

原实现代码：

if(data.length > 0) {
       const items = [];
        data.forEach(line => {
              let csvLine = {
                Id: line.id,
                Qty: line.qty,
                Grade: line.grade,
                Veggie: line.veggie,
                Fruit: line.fruit,
              }
              items.push(csvLine);
            });
            
            this.exportToCsv('my_Report.csv', items);
      }

当前未优化的实现方式：

if(data.length > 0) {
       const items = [];
       if(input === 'Veggie') {
        data.forEach(line => {
              let csvLine = {
                Id: line.id,
                Qty: line.qty,
                Grade: line.grade,
                Veggie: line.veggie // 移除Fruits列
              }
              items.push(csvLine);
            });
       } else {
        data.forEach(line => {
              let csvLine = {
                Id: line.id,
                Qty: line.qty,
                Grade: line.grade,
                Veggie: line.veggie,
                Fruit: line.fruit,
              }
              items.push(csvLine);
            });
       }
            
            this.exportToCsv('my_Report.csv', items);
      }

给你几个更简洁的优化方案，彻底消除重复代码：

方案一：复用基础字段，动态追加可选列 #

把固定不变的列先抽出来，再根据用户选择决定是否添加Fruit列，用map替代forEach还能省去手动push数组的操作：

if(data.length > 0) {
  const items = data.map(line => {
    // 先构造所有固定列
    const csvLine = {
      Id: line.id,
      Qty: line.qty,
      Grade: line.grade,
      Veggie: line.veggie
    };
    // 仅当用户选择非Veggie时，才添加Fruit列
    if(input !== 'Veggie') {
      csvLine.Fruit = line.fruit;
    }
    return csvLine;
  });
  
  this.exportToCsv('my_Report.csv', items);
}

方案二：配置化管理列（适合后续扩展） #

如果以后可能新增更多导出选项，用配置对象来管理不同选择对应的列，后续改需求只需修改配置，不用动核心业务逻辑：

// 提前定义各选项对应的列映射规则
const columnConfigs = {
  Veggie: [
    { csvKey: 'Id', dataKey: 'id' },
    { csvKey: 'Qty', dataKey: 'qty' },
    { csvKey: 'Grade', dataKey: 'grade' },
    { csvKey: 'Veggie', dataKey: 'veggie' }
  ],
  Fruit: [
    { csvKey: 'Id', dataKey: 'id' },
    { csvKey: 'Qty', dataKey: 'qty' },
    { csvKey: 'Grade', dataKey: 'grade' },
    { csvKey: 'Veggie', dataKey: 'veggie' },
    { csvKey: 'Fruit', dataKey: 'fruit' }
  ]
};

if(data.length > 0) {
  // 获取当前输入对应的配置，默认用Fruit配置兜底
  const columns = columnConfigs[input] || columnConfigs.Fruit;
  const items = data.map(line => {
    const csvLine = {};
    columns.forEach(col => {
      csvLine[col.csvKey] = line[col.dataKey];
    });
    return csvLine;
  });
  
  this.exportToCsv('my_Report.csv', items);
}

方案三：解构+扩展运算符简化写法 #

用对象扩展运算符快速合并基础字段和可选字段，代码更紧凑直观：

if(data.length > 0) {
  const items = data.map(line => {
    const baseFields = {
      Id: line.id,
      Qty: line.qty,
      Grade: line.grade,
      Veggie: line.veggie
    };
    // 根据输入判断是否带上Fruit字段
    return input === 'Veggie' ? baseFields : { ...baseFields, Fruit: line.fruit };
  });
  
  this.exportToCsv('my_Report.csv', items);
}

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