TypeScript中如何用更函数式风格实现对象数组映射并优化属性删除

嘿，我懂你想摆脱delete操作、用更纯粹的函数式风格处理数组映射的需求——毕竟函数式编程更推崇创建新对象而非修改已有对象，这样代码不仅更干净，还能遵循不可变性原则，减少意外的副作用。

先聊聊你现有代码的问题：先创建带batchNumber的对象再用delete删掉，本质是对已有对象做了修改（mutation），这和函数式编程的核心思想相悖，而且代码逻辑也有点绕。

下面给你几个更优的函数式写法，完全避免delete操作：

写法一：条件分支创建不同对象 #

最直观的方式就是根据判断条件，直接生成符合需求的对象：

const transformedData = props.data.map(d => ({
  order: d.position,
  logs: d.batches.map(b => {
    // 先定义基础属性
    const baseLog = { amount: b.amount }; // 对应你输入示例里的amount字段，原代码里的b.scrap可根据实际情况调整
    // 只有当batchNumber非空时，才添加这个属性
    return b.batchNumber !== '' ? { ...baseLog, batchNumber: b.batchNumber } : baseLog;
  })
}));

这里全程都是创建新对象，没有任何修改操作，逻辑清晰，一眼就能看明白什么时候会包含batchNumber属性。

写法二：利用对象展开的条件属性（更简洁） #

TypeScript支持在对象字面量里用条件判断来决定是否添加某个属性，用这种方式可以把代码写得更紧凑：

const transformedData = props.data.map(d => ({
  order: d.position,
  logs: d.batches.map(b => ({
    amount: b.amount,
    // 逻辑与特性：条件为真时才展开后面的对象，否则不会添加任何属性
    ...(b.batchNumber !== '' && { batchNumber: b.batchNumber })
  }))
}));

这个写法的核心是：&&运算符在条件为真时会返回后面的对象，条件为假时返回false，而展开false不会给对象添加任何属性，完美实现了“按需添加属性”的需求。

为什么这些写法更好？ #

• 完全遵循函数式编程的不可变性原则，没有任何修改已有对象的操作，减少潜在的副作用
• 代码逻辑更直观，不需要先创建多余属性再删除，可读性更高
• 更容易维护和调试，每个对象的结构都是由明确的条件生成的

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