JS过滤对象数组的bought_beats属性，保留指定producer.id的beat

咱们的需求很明确：在给定的data数组中，每个对象的bought_beats数组需要只保留beat.producer.id === 23的元素，同时不能丢失原对象的其他属性（比如id、date这些）。

先来看看你之前尝试的几个方案的问题：

• 第一个forEach方案：forEach里的return不会有任何效果，而且你只是返回了过滤后的数组，但没有把结果赋值回原对象的bought_beats，所以原数据根本没变化。
• 第二个map方案：map会生成一个新数组，但你直接把每个元素替换成了过滤后的bought_beats，自然就丢失了原对象的id、date等属性，这显然不是想要的结果。
• 第三个forEach+splice方案：findIndex只会找到第一个不符合条件的元素索引，然后删掉它，但如果bought_beats里有多个不符合的元素，剩下的会被保留下来，没法彻底过滤干净。

推荐方案1：生成新数组（不修改原数据） #

如果不想改动原始的data数组，推荐用map结合对象扩展运算符，既保留原对象的所有属性，又替换掉过滤后的bought_beats：

const producerId = 23;
const filteredData = data.map(order => {
  // 复制原对象的所有属性，再重写bought_beats为过滤后的结果
  return {
    ...order,
    // 可选链操作符?.避免无bought_beats属性时报错，|| []保证空值时返回空数组
    bought_beats: order.bought_beats?.filter(item => item.beat.producer.id === producerId) || []
  };
});

方案2：直接修改原数据（如果允许的话） #

如果可以直接修改原始的data数组，用forEach循环直接替换每个对象的bought_beats属性即可，比splice更简洁可靠：

const producerId = 23;
data.forEach(order => {
  // 先判断对象是否有bought_beats属性，避免报错
  if (order.bought_beats) {
    order.bought_beats = order.bought_beats.filter(item => item.beat.producer.id === producerId);
  }
});

这两个方案都能完美满足需求：既保留了原数组和对象的完整结构，又精准过滤掉了不符合条件的bought_beats项。

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