Question

我想使用传播运算符合并两个javascript对象，但我无法产生预期的结果。这是我的第一个对象列表（将对象包装在对象中）

var arr2 = {
  "20080": {
    "ProductQuantitesId": 20080,    
    "CustomerPrice": 100,
    "DisplayQuantity": "20 L",   
    "DisplayProductName": "Bisleri Mineral Water",
    "DiscountedPrice": 20,
    "DiscountedPercentage": 17
  },
  "20110": {
    "ProductQuantitesId": 20110,   
    "CustomerPrice": 270,
    "DisplayQuantity": "5 kgs",    
    "DisplayProductName": "Srujana Curd Bucket",
    "DiscountedPrice": 30,
    "DiscountedPercentage": 10
  } }

第二个对象列表是

var arr3 = {
  "20080": {
    "Qty": 2,


  },
  "20110": {
    "Qty": 3,
  } }

我想使用es6传播合并这2个对象。

const result = {...arr2,...arr3}

期望数量要添加到对象中，但是我只看到数量。结果我得到了

{
  "20080": {
    "Qty": 2
  },
  "20110": {
    "Qty": 3
  }
}

有人可以帮忙吗？

Answer 1

arr3正在覆盖arr2中的值，因为两个对象共享相同的键。假设arr2和arr3的键相同，则可以使用以下解决方案：

var arr2 = {
  "20080": {
    "ProductQuantitesId": 20080,    
    "CustomerPrice": 100,
    "DisplayQuantity": "20 L",   
    "DisplayProductName": "Bisleri Mineral Water",
    "DiscountedPrice": 20,
    "DiscountedPercentage": 17
  },
  "20110": {
    "ProductQuantitesId": 20110,   
    "CustomerPrice": 270,
    "DisplayQuantity": "5 kgs",    
    "DisplayProductName": "Srujana Curd Bucket",
    "DiscountedPrice": 30,
    "DiscountedPercentage": 10
  } 
}

var arr3 = {
  "20080": {
    "Qty": 2,
  },
  "20110": {
    "Qty": 3,
  } 
}

// First, get the keys from arr2 using Object.keys().
// Then, use Array.prototype.reduce() to iterate through the keys.
// In the callback, acc is referring to the empty object, {}, 
// passed as the second argument in reduce().
const result = Object.keys(arr2).reduce((acc, key) => {

    // Set the value of the resulting object's key equal to the 
    // combined key-values of arr2 and arr3
    acc[key] = { ...arr2[key], ...arr3[key] }
    
    // Make sure to return the object
    return acc
}, {})

console.log(result)

Answer 2

对象初始化程序中的传播属性将自己的可枚举属性从提供的对象复制到新创建的对象上。

因此此代码将起作用：

var arr2 = {
  "20080": {
    "ProductQuantitesId": 20080,    
    "CustomerPrice": 100,
    "DisplayQuantity": "20 L",   
    "DisplayProductName": "Bisleri Mineral Water",
    "DiscountedPrice": 20,
    "DiscountedPercentage": 17
  },
  "20110": {
    "ProductQuantitesId": 20110,   
    "CustomerPrice": 270,
    "DisplayQuantity": "5 kgs",    
    "DisplayProductName": "Srujana Curd Bucket",
    "DiscountedPrice": 30,
    "DiscountedPercentage": 10
  } }
  
  var arr3 = {
  "20080": {
    "Qty": 2,


  },
  "20110": {
    "Qty": 3,
  } }
  
  for (let property in arr2) {
    if (arr2.hasOwnProperty(property)) {
       arr2[property] = {...arr2[property], ...arr3[property]};
    }
  }
  
  console.log(arr2)

Answer 3

当您具有相同的键时，它将始终被最后一个键覆盖

let first = { a: 'first' }
let second = { a : 'second' }

let firstAtEnd = {...second, ...first}

console.log(firstAtEnd)

let secondAtEnd = {...first, ...second}

console.log(secondAtEnd)

要实现您想要的目标，您可以遍历其中一个的键并与另一个的值合并

var arr2 = {"20080": {"ProductQuantitesId": 20080,"CustomerPrice": 100,"DisplayQuantity": "20 L","DisplayProductName": "Bisleri Mineral Water","DiscountedPrice": 20,"DiscountedPercentage": 17},"20110": {"ProductQuantitesId": 20110,"CustomerPrice": 270,"DisplayQuantity": "5 kgs","DisplayProductName": "Srujana Curd Bucket","DiscountedPrice": 30,"DiscountedPercentage": 10}}

var arr3 = {"20080": {"Qty": 2,},"20110": {"Qty": 3,}}

let newObj = {}
for (let property in arr2) {
  if (property in arr3) {
    newObj[property] = { ...arr2[property],
      ...arr3[property]
    };
  }
}

console.log(newObj)

Answer 4

使用散布运算符的方式，它发现第二个对象与第一个对象具有相同的键，因此它将第二个对象的属性替换为第一个对象的属性。

我认为在这种情况下，您要做的是迭代第一个对象的键，然后一次将一个键合并到一个新对象中。如下所示。

var arr2 = {
  "20080": {
    "ProductQuantitesId": 20080,    
    "CustomerPrice": 100,
    "DisplayQuantity": "20 L",   
    "DisplayProductName": "Bisleri Mineral Water",
    "DiscountedPrice": 20,
    "DiscountedPercentage": 17
  },
  "20110": {
    "ProductQuantitesId": 20110,   
    "CustomerPrice": 270,
    "DisplayQuantity": "5 kgs",    
    "DisplayProductName": "Srujana Curd Bucket",
    "DiscountedPrice": 30,
    "DiscountedPercentage": 10
  } }

var arr3 = {
  "20080": {
    "Qty": 2,


  },
  "20110": {
    "Qty": 3,
  } }


const result = {}
for (let key of Object.keys(arr2)) {
	result[key] = { ...arr2[key], ...arr3[key] }
}

console.log(result)

Answer 5

您可以使用Object.entries和map来实现这一目标

var arr2 = {"20080": {"ProductQuantitesId": 20080,"CustomerPrice": 100,"DisplayQuantity": "20 L","DisplayProductName": "Bisleri Mineral Water","DiscountedPrice": 20,"DiscountedPercentage": 17},"20110": {"ProductQuantitesId": 20110,"CustomerPrice": 270,"DisplayQuantity": "5 kgs","DisplayProductName": "Srujana Curd Bucket","DiscountedPrice": 30,"DiscountedPercentage": 10}}

var arr3 = {"20080": {"Qty": 2,},"20110": {"Qty": 3,}}

var res = Object.entries(arr2)
                .map(([k, v]) => ({ [k]: {...v, ...(arr3[k] || {})} }))
                .reduce((a, b) => ({...a, ...b}))

console.log(res)

ES6使用传播合并两个对象不起作用

5 个答案: