如何值從另一個對象具有相同的定義添加到一個對象的屬性在JavaScript

Question

我有類似下面的一個對象：

var obj1 = { 
    fparams: { 
    keys: ['a', 'b'], 
    pairs: { 
     'p': 'qwert' 
    } 
    }, 
    qparams: { 
    'x': 'xyz' 
    } 
} 

而另一個爲：

var obj2 = { 
    fparams: { 
    keys: ['c', 'd'], 
    pairs: { 
     'q': 'yuiop' 
    } 
    }, 
    qparams: { 
    'z': 'zyx' 
    } 
} 

什麼我可以添加從obj2對象到obj1的屬性嗎？

由於我在Angular中工作，我嘗試使用angular.merge(obj1,obj2)，但它並未合併keys數組，但用obj2的鍵值覆蓋它，剩下的屬性被合併。

這就是我想要的到底是：

var obj2 = { 
    fparams: { 
    keys: ['a', 'b', 'c', 'd'], 
    pairs: { 
     'p': 'qwert', 
     'q': 'yuiop' 
    } 
    }, 
    qparams: { 
    'x': 'xyz', 
    'y': 'zyx' 
    } 
} 

另外的角度版本，我用的就是角1.5.8

編輯：結束了使用lodash，因爲它是非常容易的工作以及我以前不知道的大量功能。

Answer 1

我想簡單地用純JS和hel遞歸函數mergeObjects的p可以做如下操作;

function mergeObjects(o1,o2){ 
 
    return Object.keys(o1) 
 
       .reduce(function(r,k){ 
 
         o1[k] = Array.isArray(o1[k]) ? o1[k].concat(o2[k]) 
 
                 : typeof o1[k] === "object" ? mergeObjects(o1[k],o2[k]) 
 
                        : (r = Object.assign({},o1,o2),o1[k]); 
 
         return r; 
 
         }, o1); 
 
} 
 

 
var objs = [{ 
 
      fparams: { 
 
         keys : ['a', 'b'], 
 
         pairs: { 
 
           'p': 'qwert' 
 
           } 
 
         }, 
 
      qparams: { 
 
         'x': 'xyz' 
 
         } 
 
      }, 
 
      { 
 
      fparams: { 
 
         keys : ['c', 'd'], 
 
         pairs: { 
 
           'q': 'yuiop' 
 
           } 
 
         }, 
 
      qparams: { 
 
         'z': 'zyx' 
 
         } 
 
      }], 
 
    result = objs.reduce(mergeObjects); 
 
console.log(JSON.stringify(result,null,2));

Answer 2

您是否考慮使用Lodash？它有一個merge方法，正是這樣做。

Answer 3

使用lodash你可以使用mergeWith並創建所需的結果，所以當value是數組時，你需要concat值。

var obj1 = {"fparams":{"keys":["a","b"],"pairs":{"p":"qwert"}},"qparams":{"x":"xyz"}} 
 
var obj2 = {"fparams":{"keys":["c","d"],"pairs":{"q":"yuiop"}},"qparams":{"z":"zyx"}} 
 

 
var result = _.mergeWith(obj1, obj2, function(a, b) { 
 
    if(_.isArray(a)) return a.concat(b) 
 
}) 
 

 
console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

這是我在深深的合併嘗試，使用遞歸，不知道這是否會在所有的數據結構的工作。

var obj1 = {"fparams":{"keys":["a","b"],"pairs":{"p":"qwert"}},"qparams":{"x":"xyz"}} 
 
var obj2 = {"fparams":{"keys":["c","d"],"pairs":{"q":"yuiop"}},"qparams":{"z":"zyx"}} 
 

 
function merge(o1, o2) { 
 
    var result = {} 
 
    for (var i in o1) { 
 
    for (var j in o2) { 
 
     if (i == j && typeof o1[i] == 'object' && typeof o2[j] == 'object') { 
 
     if (Array.isArray(o1[i]) || Array.isArray(o2[j])) { 
 
      result[i] = Array.isArray(o1[i]) ? o1[i].concat(o2[j]) : o2[j].concat(o1[i]) 
 
     } else { 
 
      result[i] = Object.assign(result[i] || {}, merge(o1[i], o2[j])) 
 
     } 
 
     } 
 
     if (typeof o1[i] != 'object' || typeof o2[j] != 'object') { 
 
     result[i] = o1[i] 
 
     result[j] = o2[j] 
 
     } 
 

 
    } 
 
    } 
 
    return result; 
 
} 
 

 
console.log(JSON.stringify(merge(obj1, obj2), 0, 4))

Answer 4

試試這個功能，我試圖覆蓋大部分的情景，雖然它可能不是可用

var merge = function(obj1, obj2) { 

    for (var key in obj2) { 
    if (obj2.hasOwnProperty(key)) { 
     if (obj1[key] == null) { 
      obj1[key] = obj2[key]; 
     } else if (obj1[key] instanceof Array) { 
      if (obj2[key] instanceof Array) { 
       for (var i =0; i < obj2[key].length; i++){ 
        if (obj1[key].indexOf(obj2[key]) === -1) { 
         obj1[key].push(obj2[key][i]); 
        } 
       } 
      } 
     } else if (obj1[key] instanceof Object && obj2[key] instanceof Object && obj1[key].constructor == Object && obj2[key] == Object) { 
      merge(obj1[key], obj2[key]); 
     } 
    } 
    } 
} 

其他庫一樣好，您可以按照以下使用

merge(obj1, obj2);