Javascript 使用过滤方法后合并两个数组

我一直在显示购物车页面，其中列出了用户添加到购物车中的产品。 我有两个阵列： 一个是产品细节

productDetails: [
            {
              productID: 1,
              productTitle: 'Product Title 1',
              productPrice: 2000
            },
            {
              productID: 2,
              productTitle: 'Product Title 2',
              productPrice: 5000
            },
            {
              productID: 3,
              productTitle: 'Product Title 3',
              productPrice: 1000
            },
            {
              productID: 4,
              productTitle: 'Product Title 4',
              productPrice: 10000
            }
          ],

另一个包含购物车产品详细信息，其中productID和数量仅由用户选择

cartProducts: [
            {
              productID: 1,
              quantity: 5,
            },
            {
              productID: 3,
              quantity: 2,
            }
          ]

我已经过滤了用户选择的所有产品

cartItemDetails() {
      return this.productDetails.filter(
        el => this.cartProducts.some(f => f.id === el.productID),
      );
    },

此函数提供productID 1和productID 3的产品详细信息。 我想要的是一个新数组，它将cartProducts数组的quantity属性添加到productDetails数组中

newArray: [
            {
              productID: 1,
              productTitle: 'Product Title 1',
              productPrice: 2000,
              quantity:5
            },
            {
              productID: 3,
              productTitle: 'Product Title 3',
              productPrice: 1000,
              quantity:5
            }
          ]

我希望我已经把问题说清楚了。我还试图用MapJavaScript方法解决这个问题，但它不起作用

关于，

您可以在

过滤器（）之后使用
，并向每个项目添加
数量
属性


const productDetails=[{productID:1，productTitle:'productTitle 1'，productPrice:2000}，{productID:2，productTitle:'productTitle 2'，productPrice:5000}，{productID:3，productTitle:'productTitle 3'，productPrice:1000}，{productID:4，productTitle:'productTitle 4'，productPrice:10000}]；
const cartProducts=[{productID:1，数量：5}，{productID:3，数量：2}]；
函数cartItemDetails（）{
退货产品详情
.filter（el=>cartProducts.some（f=>f.productID==el.productID））
.map（项目=>({
…项目，
“数量”：cartProducts.find（f=>f.productID==item.productID）.数量
}));
}
log（cartItemDetails（））您可以尝试类似的方法：

cartItemDetails() {
    return this.cartProducts.map(cp => {
         let prod = this.productDetails.find(pd => pd.productID === cp.productID)
         return {...cp, ...prod}
    })
}

希望这有帮助：）
使用贴图和对象排列组合两个阵列：

var newArray = cartProducts.map(cart => ({
  ...cart,
  ...productDetails.find(prod => prod.productID === cart.productID)
}));

只要productID匹配，您就可以使用
Object.assign（）
方法将属性值对从productDetails复制到cartProducts中：


让productDetails=[
{
产品编号：1，
productTitle:“产品标题1”，
产品价格：2000
},
{
产品编号：2，
productTitle:“产品标题2”，
产品价格：5000
},
{
产品编号：3，
productTitle:“产品标题3”，
产品价格：1000
},
{
产品编号：4，
productTitle:“产品名称4”，
产品价格：10000
}
];
让我们看看产品=[
{
产品编号：1，
数量：5，
},
{
产品编号：3，
数量：2，
}
];
cartProducts.map（购物车=>Object.assign（购物车，productDetails.find（产品=>product.productID==cart.productID）））
console.log（cartProducts）
如果需要，您可以执行一些空检查。
使用
productID
作为键，将
productDetails
转换为（
productDetailsMap
）

使用从
productDetailsMap
获取当前产品的
productID
，迭代
cartProducts
，并将其合并到一个新对象中


const productDetails=[{“productID”：1，“productTitle”：“产品标题1”，“产品价格”：2000}，{“productID”：2，“productTitle”：“产品标题2”，“产品价格”：5000}，{“productID”：3，“产品标题3”，“产品价格”：1000}，{“productID”：4，“产品标题”：“产品标题4”，“产品价格”：10000}]
const cartProducts=[{“productID”：1，“数量”：5}，{“productID”：3，“数量”：2}]
const productDetailsMap=新映射（productDetails.Map（o=>[o.productID，o]））
const result=cartProducts.map（o=>({
…productDetailsMap.get（o.productID），
……哦
}))
console.log（result）
这就是您的代码在这里的混乱之处：

cartItemDetails() {
      return this.productDetails.filter(
        el => this.cartProducts.some(f => f.id === el.productID),
      );
    },

f
是一个
cartProducts
项目，它没有属性
id

我想你的意思是
f.productID

现在，这里有一种使用
map
函数添加
quantity
属性的方法：

this.productDetails = cartItemDetails().map((element) => {
  for (let e of this.cartProducts) {
    if (e.productID === element.productID) return {...element, quantity: e.quantity}
  }
})

数组产品在我的本地代码中有id元素。在发布问题时，我将其更改为更清晰。谢谢你的回答。非常感谢。感谢您提供各种各样的答案。我之所以接受这个答案，是因为它的方法多种多样。谢谢你，谢谢你干净的代码。你的答案是如此清晰和简单。谢谢你的回答。非常感谢。谢谢你的回答。非常感谢。谢谢你的回答。非常感谢。谢谢你的回答。非常感谢。
this.productDetails = cartItemDetails().map((element) => {
  for (let e of this.cartProducts) {
    if (e.productID === element.productID) return {...element, quantity: e.quantity}
  }
})