如何创建具有 2 个或多个具有不同大小的对象属性的新对象并设置新属性

Question

这是两个对象：

const discount = {
  rate: 0.50,
  reason: 'New Year Sales'
}

const products = [
  {
    name: 'TV',
    price: '1200'
  },
  {
    name: 'Bed',
    price: '500'
  },
  {
    name: 'Table',
    price: '50'
  }
]

我想将它们放入一个新对象中：

const newProducts = [
  {
    name: 'TV',
    price: '1200',
    rate: 0.50,
    reason: 'New Year Sales',
    finalPrice: 600
  },
  {
    name: 'Bed',
    price: '500',
    rate: 0.50,
    reason: 'New Year Sales',
    finalPrice: 250
  },
  {
    name: 'Table',
    price: '50',
    rate: 0.50,
    reason: 'New Year Sales',
    finalPrice: 25
  }
]

这是一个 JavaScript 练习，我尝试了“Object.assign”，但新值将覆盖旧值，导致只有最新的可用。我不确定使用 {...products} 和 map, forEach 进行解构是否有用。我无法做到这一点

Answer 1

所以你想遍历products 中的每个产品，并将discount 应用于每个产品？

使用.map 通过循环遍历products 中的每个项目并对其应用回调函数来创建一个新数组：

const newProducts = products.map(oldProduct=>{    
  return {
    name: oldProduct.name,
    price: oldProduct.price,
    rate: discount.rate,
    reason: discount.reason,
    finalPrice: (discount.rate * oldProduct.price)
  }
})

注意：就我个人而言，我更喜欢不解构，因为我认为它读起来更清晰。但解构确实有效。

Answer 2

使用Array#map、destructuring 和spread syntax。

const discount={rate:0.50,reason:'New Year Sales'}
const products=[{name:'TV',price:'1200'},{name:'Bed',price:'500'},{name:'Table',price:'50'}]

const {rate} = discount;
const res = products.map(({price, ...rest})=>{
  return {...rest, ...discount, price, finalPrice: rate*price}
});

console.log(res);

Answer 3

您可以取一个空对象并分配产品、折扣和最终价格以进行映射。

const
    discount = { rate: 0.50, reason: 'New Year Sales' },
    products = [{ name: 'TV', price: '1200' }, { name: 'Bed', price: '500' }, { name: 'Table', price: '50' }],
    newProducts = products.map(product => Object.assign(
        {},
        product,
        discount,
        { finalPrice: product.price * (1 - discount.rate) }
    ));

console.log(newProducts);

.as-console-wrapper { max-height: 100% !important; top: 0; }