如何递归合并 2 个 javascript 对象？答案

【问题标题】：How to recursively merge 2 javascript objects?如何递归合并 2 个 javascript 对象？
【发布时间】：2015-09-25 23:53:33
【问题描述】：

我有 2 个对象需要合并并保持所有属性完好无损，尝试使用 jQuery $.extend 但我无法让它工作。我尝试了所有有关如何合并 javascript 对象的帖子，但根本无法使其正常工作。

var thz_icon_source = {"Spinners":["spinnericon1","spinnericon2"],"Awesome":["awesomeicon1","awesomeicon2"]};
var fa_icon_source = {"Spinners":["faspinner1","faspinner2"],"Awesome":["faawesome1","faawesome2"]};
var new_source ={};
$.extend(new_source,fa_icon_source,thz_icon_source);

console.log(thz_icon_source);
console.log(fa_icon_source);
console.log(new_source);

想要的输出应该是这样的

{
"Spinners":["faspinner1","faspinner2","spinnericon1","spinnericon2"],
"Awesome":["faawesome1","faawesome2","awesomeicon1","awesomeicon2"]
}

这个帖子Merge two json/javascript arrays in to one array有一个简单的对象我的和那个不一样。

【问题讨论】：

$.extend 不能这样做，因为如果 $.extend 以 deep 参数设置为 true 的方式传递，它将覆盖它找到的属性.如果按照您使用的方式使用，它将忽略目标对象中已存在的属性。
@papiro 是的，注意到扩展和合并无法帮助我，似乎我需要循环并推入新的
Merge two json/javascript arrays in to one array的可能重复
@aug 不是，我试过了，它正在使用 concat 无法帮助我处理我的对象
@aug 在标记为重复之前尝试一下代码如何。它不是同一个对象结构。

标签： javascript jquery arrays

【解决方案1】：

Demo

function mergeJSON(json1,json2)
{
    var result = json1 ;
    for (var prop in json2) 
    {
        if (json2.hasOwnProperty(prop)) 
        {
            result[prop] = result[prop].concat(json2[prop]);
        }
    }
    return result;
}

【讨论】：

物有所值！成功了！

【解决方案2】：

$.extend 合并缺少的属性，它不合并共有的属性。你需要写一个循环。

var thz_icon_source = {
  "Spinners": ["spinnericon1", "spinnericon2"],
  "Awesome": ["awesomeicon1", "awesomeicon2"]
};
var fa_icon_source = {
  "Spinners": ["faspinner1", "faspinner2"],
  "Awesome": ["faawesome1", "faawesome2"]
};
var new_source = {};
// First add in the new elements from thz_icon_source
$.extend(new_source, fa_icon_source, thz_icon_source);
// Now merge the common elements
$.each(fa_icon_source, function(k, e) {
  if (thz_icon_source.hasOwnProperty(k)) {
    new_source[k] = e.concat(thz_icon_source[k]);
  }
});

console.log(thz_icon_source);
console.log(fa_icon_source);
console.log(new_source);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

您可以使用此原型以您想要的方式合并 2 个或更多对象：

Object.prototype.assignDeep = function() {
    var self = this;
    Object.keys(arguments).forEach(obj => {
        Object.keys(self).forEach(val => {
            if (arguments[obj].hasOwnProperty(val)) {
                var tmp = arguments[obj][val] instanceof Array ? arguments[obj][val] : [arguments[obj][val]];
                self[val] = self[val].concat(tmp);
            }  
        });
    });
    return self;
}
    
    
    
var thz_icon_source = {"Spinners":["spinnericon1","spinnericon2"],"Awesome":["awesomeicon1","awesomeicon2"]};
var fa_icon_source = {"Spinners":["faspinner1","faspinner2"],"Awesome":["faawesome1","faawesome2"]};
var b = thz_icon_source.assignDeep(fa_icon_source);
console.log(b);

【讨论】：

【解决方案4】：

您应该使用带有.concat() 的循环：

function objectConcatArrays(){
  var a = arguments, o = {};
  for(var i=0,l=a.length; i<l; i++){
    for(var p in a[i]){
      if(p in o){
        o[p] = o[p].concat(a[i][p]);
      }
      else{
        o[p] = a[i][p];
      }
    }
  }
  return o;
}
var thz_icon_source = {"Spinners":["spinnericon1","spinnericon2"],"Awesome":["awesomeicon1","awesomeicon2"]};
var fa_icon_source = {"Spinners":["faspinner1","faspinner2"],"Awesome":["faawesome1","faawesome2"]};
var res = objectConcatArrays(thz_icon_source, fa_icon_source);
console.log(res);

每个参数代表一个数组对象。如果需要，可以添加更多。

【讨论】：