JavaScript中过滤子元素时如何返回含符合条件子项的父对象

你之前用flatMap+filter只拿到子元素，是因为写法逻辑直接返回了过滤后的子项，flatMap会把返回的子数组拍平成一维，自然丢失了外层父对象结构，错误写法一般类似这样：

// 错误写法：直接返回过滤后的子数组，拍平后只剩子项
const wrongResult = array.flatMap(parent => parent.childBrands.filter(child => child.status === 'active'))

推荐写法：map + 内部filter（可读性最高，无副作用） #

遍历所有父对象，对每个父对象做浅拷贝避免修改原数据，不要直接在原父对象上修改childBrands属性，会污染原始数组数据，再将内部childBrands替换为按状态过滤后的子数组即可：

const filteredArray = array.map(parent => {
  return {
    // 保留父对象所有原有属性
    ...parent,
    // 覆盖childBrands为过滤后的结果
    childBrands: parent.childBrands.filter(child => child.status === 'active')
  }
})

运行上述代码得到的结果和你给出的预期结果完全一致。

可选拓展：过滤掉无匹配子项的父对象 #

如果需要把过滤后childBrands为空的父对象也移除，可以在后面追加一层filter：

const filteredArray = array
  .map(parent => ({
    ...parent,
    childBrands: parent.childBrands.filter(child => child.status === 'active')
  }))
  // 只保留存在有效子品牌的父项
  .filter(parent => parent.childBrands.length > 0)

说明：上述写法用展开运算符做浅拷贝，不会修改原始数组的内容，如果你的父对象或者子对象有更深层的嵌套属性，可以根据需求换成深拷贝逻辑，大部分业务场景下浅拷贝足够使用。

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