如何在 jQuery 中使用 $.extend() 合并具有所有唯一值的对象

Question

我正在尝试将三个对象合并到一个新对象中，但它会覆盖重复值，任何人都可以帮助我解决如何将所有对象合并到一个不同的对象中而不更改现有对象并包含所有唯一值。

var object1 = {
  red: 0,
  blue: { lightblue: 24, darkblue: 12 },
  black: 17
};
var object2 = {
  white: 200,
  blue: { lightblue: 40 }
};
var object3 ={
  yellow: 234
};

var targetresult = $.extend({}, object1, object2, object3);
console.log(targetresult);

Answer 1

我认为您为这个问题使用了错误的数据结构。 JavaScript 中的对象应该为其所有属性具有唯一的名称。这就是为什么当您合并两个对象时，具有相同名称的属性会被覆盖。

对于这种情况，我推荐使用数组作为主要的数据结构。您可以在不覆盖元素的情况下继续向数组中添加元素。然后，您可以使用 Array#concat 方法组合数组。

var array1 = 
[
{red: 0},
{blue: { lightblue: 24, darkblue: 12 }},
{black: 17}
];

var array2 = 
[
{white: 200},
{blue: { lightblue: 40 }}
];

var array3 =
[
{yellow: 234}
];

var targetResult = array1.concat(array2, array3);
console.log(targetResult);

在上面的代码中，我将每个元素都设为{name: value} 对象。也可以使用[name, value] 数组作为数组元素。