JavaScript中如何过滤嵌套数组且保留父元素（匹配purchase ID）

嘿，我来帮你搞定这个数组过滤的需求！你需要筛选出每个父元素下，products.transactions中purchase ID和父元素自身purchase一致的交易记录，同时完整保留父元素的结构对吧？下面是具体的实现方案：

核心思路 #

我们可以通过 JavaScript 的map和filter方法组合来实现：

• 用map遍历外层数组，保留每个父元素的原有属性
• 对每个父元素的products数组再次使用map，保留产品的原有信息
• 针对每个产品的transactions数组，用filter筛选出purchase ID与父元素匹配的交易

基础实现代码 #

var data = [
  {
    "purchase": "5ace99b014a759325776aabb",
    "products": [
      {
        "transactions": [
          { "purchase": "5ace99b014a759325776aabb", "price": "25" },
          { "purchase": "5ace99d714a759325776aac4", "price": "23" }
        ],
        "_id": "5ace995914a759325776aab0",
        "product_name": "Milk"
      },
      {
        "transactions": [
          { "purchase": "5ace99d714a759325776aac4", "price": "18" },
          { "purchase": "5ace99b014a759325776aabb", "price": "30" }
        ],
        "_id": "5ace996014a759325776aab1",
        "product_name": "Bread"
      }
    ]
  },
  {
    "purchase": "5ace99d714a759325776aac4",
    "products": [
      {
        "transactions": [
          { "purchase": "5ace99b014a759325776aabb", "price": "25" },
          { "purchase": "5ace99d714a759325776aac4", "price": "23" }
        ],
        "_id": "5ace995914a759325776aab0",
        "product_name": "Milk"
      }
    ]
  }
];

// 基础过滤：保留所有产品，仅过滤交易记录
const filteredData = data.map(item => ({
  ...item,
  products: item.products.map(product => ({
    ...product,
    transactions: product.transactions.filter(transaction => 
      transaction.purchase === item.purchase
    )
  }))
}));

console.log(filteredData);

进阶：过滤掉无有效交易的产品 #

如果你的需求还包括移除那些没有匹配交易记录的产品，可以在产品映射后再加一层filter：

// 进阶过滤：同时移除无有效交易的产品
const filteredDataWithCleanProducts = data.map(item => {
  const validProducts = item.products
    .map(product => ({
      ...product,
      transactions: product.transactions.filter(transaction => 
        transaction.purchase === item.purchase
      )
    }))
    // 只保留有有效交易的产品
    .filter(product => product.transactions.length > 0);

  return {
    ...item,
    products: validProducts
  };
});

console.log(filteredDataWithCleanProducts);

代码解释 #

• 扩展运算符...：用来复制原对象的所有属性，避免直接修改原数据，保证数据的不可变性
• map方法：遍历数组并返回新的数组元素，用来保留父元素和产品的原有结构
• filter方法：根据条件筛选数组元素，这里用来匹配purchase ID，只保留符合条件的交易记录

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