如何使用JavaScript数组方法根据id匹配合并两个对象数组生成新数组

实现方案 #

1. 简洁直观写法（filter + find + map组合）

适合数据量不大的场景，逻辑清晰易懂：

const new_arr = all_products
  // 筛选出在购物车中存在对应id的商品
  .filter(product => shopping_cart.some(cartItem => cartItem.id === product.id))
  // 给匹配到的商品追加qty字段
  .map(product => {
    const matchedCart = shopping_cart.find(cartItem => cartItem.id === product.id)
    return { ...product, qty: matchedCart.qty }
  })

2. 性能优化写法（reduce构建映射表）

如果两个数组数据量较大，推荐先把购物车转换为id到qty的映射表，避免重复遍历购物车数组，时间复杂度从O(n*m)降到O(n+m)：

// 第一步：用reduce生成购物车id-qty映射表
const cartQtyMap = shopping_cart.reduce((map, item) => {
  map[item.id] = item.qty
  return map
}, {})

// 第二步：遍历商品列表匹配生成结果
const new_arr = all_products.reduce((result, product) => {
  if (cartQtyMap.hasOwnProperty(product.id)) {
    result.push({ ...product, qty: cartQtyMap[product.id] })
  }
  return result
}, [])

两种写法最终输出的结果都和你需求的格式完全一致。

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