blocks|key|1328420|text|保持简单..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1328421|function+mergeArray(array1,array2)+{
++for(item+in+array1)+{
++++array2[item]+=+array1[item];
++}
++return+array2;
}|code-block|syntax|javascript|1328422|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Keep it simple...

<pre><code>function mergeArray(array1,array2) {
 for(item in array1) {
 array2[item] = array1[item];
 }
 return array2;
}
</code></pre>

blocks|key|1543584|text|在dojo中，两个对象/数组的“合并”应该是lang.mixin(destination,+source)+--您也可以将多个源混合到一个目的地，等等--详细信息请参见the+mixin+function's+reference。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1543585|entityMap|0|LINK|mutability|MUTABLE|url|https://dojotoolkit.org/|1|https://dojotoolkit.org/reference-guide/1.10/dojo/_base/lang.html#mixin^0|M|V|1|4|0|2C|U|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]|$9|V|A|W|1|X]]|E|$]]|$1|F|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]|N|$5|I|J|K|E|$L|O]]]]

In <a href="https://dojotoolkit.org/" rel="nofollow noreferrer">dojo</a>, the 2-objects/arrays "merge" would be <code>lang.mixin(destination, source)</code> -- you can also mix multiple sources into one destination, etc -- see <a href="https://dojotoolkit.org/reference-guide/1.10/dojo/_base/lang.html#mixin" rel="nofollow noreferrer">the mixin function's reference</a> for details.

blocks|key|1543524|text|如果名称相同但值不同，是否要覆盖属性？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1543525|您是否想永久更改其中一个原始对象，|1543526|或者您想要返回一个新的合并对象？|1543527|function+mergedObject(obj1,+obj2,+force){
++++for(var+p+in+obj1)+this[p]=+obj1[p];
++++for(var+p+in+obj2){
++++++++if(obj2.hasOwnProperty(p)){
++++++++++++if(force+%7C%7C+this[p]===+undefined)+this[p]=+obj2[p];
++++++++++++else{
++++++++++++++++n=+2;
++++++++++++++++while(this[p%2Bn]!==+undefined)%2B%2Bn;
++++++++++++++++this[p%2Bn]=+obj2[p];
++++++++++++}
++++++++}
++++}
}|code-block|syntax|javascript|1543528|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

do you want to overwrite a property if the names are the same but the values are not?

And do you want to permanently change one of the original objects, 

or do you want a new merged object returned?

<pre><code>function mergedObject(obj1, obj2, force){
 for(var p in obj1) this[p]= obj1[p];
 for(var p in obj2){
 if(obj2.hasOwnProperty(p)){
 if(force || this[p]=== undefined) this[p]= obj2[p];
 else{
 n= 2;
 while(this[p+n]!== undefined)++n;
 this[p+n]= obj2[p];
 }
 }
 }
}
</code></pre>

blocks|key|1328374|text|Yahoo+UI+(YUI)也有一个帮助函数来实现以下功能：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1328375|http://developer.yahoo.com/yui/examples/yahoo/yahoo_merge.html|offset|length|1328376|YAHOO.namespace('example');

YAHOO.example.set1+=+{+foo+:+"foo"+};
YAHOO.example.set2+=+{+foo+:+"BAR",+bar+:+"bar"+};
YAHOO.example.set3+=+{+foo+:+"FOO",+baz+:+"BAZ"+};

var+Ye+=+YAHOO.example;

var+merged+=+YAHOO.lang.merge(Ye.set1,+Ye.set2,+Ye.set3);|code-block|syntax|javascript|1328377|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1Q|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

Yahoo UI (YUI) also has a helper function for this:

<a href="http://developer.yahoo.com/yui/examples/yahoo/yahoo_merge.html" rel="nofollow">http://developer.yahoo.com/yui/examples/yahoo/yahoo_merge.html</a>

<pre><code>YAHOO.namespace('example');

YAHOO.example.set1 = { foo : "foo" };
YAHOO.example.set2 = { foo : "BAR", bar : "bar" };
YAHOO.example.set3 = { foo : "FOO", baz : "BAZ" };

var Ye = YAHOO.example;

var merged = YAHOO.lang.merge(Ye.set1, Ye.set2, Ye.set3);
</code></pre>

blocks|key|1328538|text|jquery有一个用于深度复制的布尔值。你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1328539|MergeRecursive+=+function(arr1,+arr2){
++++$.extend(true,+arr1,+arr2);
++++return+arr1;++++++++++++++++
};|code-block|syntax|javascript|1328540|您还可以编辑此函数以支持n-array进行合并。|1328541|ArrayMergeRecursive+=+function(){
+++++if(arguments.length+<+2){
++++++++++throw+new+Error("ArrayMergeRecursive:+Please+enter+two+or+more+objects+to+merge!");
+++++}

++++var+arr1=arguments[0];
++++for(var+i=0;+i<=arguments.length;+i%2B%2B+){
++++++++$.extend(true,+arr1,+arguments[i]);+++++++++++++++++
++++}

++++return+arr1;++++++++++++++++
};|1328542|所以现在你可以做|1328543|var+arr1+=+{'color':+{'mycolor':+'red'},+3:+5},
++++arr2+=+{4:+10,+'color':+{'favorite':+'green',+0:+'blue'}},
++++arr3+=+['Peter','Jhon','Demosthenes'],
++++results+=+ArrayMergeRecursive(arr1,+arr2,+arr3);+//+(arr1,+arr2+...+arrN)
console.log("Result+is:",+results);|1328544|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

jquery has a boolean for deep copy. You could do something like that:

<pre><code>MergeRecursive = function(arr1, arr2){
 $.extend(true, arr1, arr2);
 return arr1; 
};
</code></pre>

Also you can edit this function to support n-arrays to merge.

<pre><code>ArrayMergeRecursive = function(){
 if(arguments.length &lt; 2){
 throw new Error("ArrayMergeRecursive: Please enter two or more objects to merge!");
 }

 var arr1=arguments[0];
 for(var i=0; i&lt;=arguments.length; i++ ){
 $.extend(true, arr1, arguments[i]); 
 }

 return arr1; 
};
</code></pre>

So now you can do

<pre><code>var arr1 = {'color': {'mycolor': 'red'}, 3: 5},
 arr2 = {4: 10, 'color': {'favorite': 'green', 0: 'blue'}},
 arr3 = ['Peter','Jhon','Demosthenes'],
 results = ArrayMergeRecursive(arr1, arr2, arr3); // (arr1, arr2 ... arrN)
console.log("Result is:", results);
</code></pre>

blocks|key|1543742|text|我需要一个深度对象合并。所以所有其他的答案对我都没有多大帮助。_.extend和jQuery.extend做得很好，除非您有像我这样的递归数组。但这并不是很糟糕，你可以在5分钟内完成编程：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1543743|var+deep_merge+=+function+(arr1,+arr2)+{
++++jQuery.each(arr2,+function+(index,+element)+{
++++++++if+(typeof+arr1[index]+===+"object"+&&+typeof+element+===+"object")+{
++++++++++++arr1[index]+=+deep_merge(arr1[index],+element);
++++++++}+else+if+(typeof+arr1[index]+===+"array"+&&+typeof+element+===+"array")+{
++++++++++++arr1[index]+=+arr1[index].concat(element);
++++++++}+else+{
++++++++++++arr1[index]+=+element;
++++++++}
++++});
++++return+arr1;
}|code-block|syntax|javascript|1543744|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I needed a deep-object-merging. So all of the other answers didn't help me very much. _.extend and jQuery.extend do well, unless you have a recursive array like i do. But it ain't so bad, you can program it in five minutes:

<pre><code>var deep_merge = function (arr1, arr2) {
 jQuery.each(arr2, function (index, element) {
 if (typeof arr1[index] === "object" &amp;&amp; typeof element === "object") {
 arr1[index] = deep_merge(arr1[index], element);
 } else if (typeof arr1[index] === "array" &amp;&amp; typeof element === "array") {
 arr1[index] = arr1[index].concat(element);
 } else {
 arr1[index] = element;
 }
 });
 return arr1;
}
</code></pre>

blocks|key|1328570|text|要在jQuery中合并数组，$.merge又如何呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1328571|var+merged+=+$.merge([{id:3,+value:'foo3'}],+[{id:1,+value:'foo1'},+{id:2,+value:'foo2'}]);
merged[0].id+==+3;
merged[0].value+==+'foo3';
merged[1].id+==+1;
merged[1].value+==+'foo1';
merged[2].id+==+2;
merged[2].value+==+'foo2';|code-block|syntax|javascript|1328572|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To merge arrays in jQuery what about $.merge?

<pre><code>var merged = $.merge([{id:3, value:'foo3'}], [{id:1, value:'foo1'}, {id:2, value:'foo2'}]);
merged[0].id == 3;
merged[0].value == 'foo3';
merged[1].id == 1;
merged[1].value == 'foo1';
merged[2].id == 2;
merged[2].value == 'foo2';
</code></pre>

blocks|key|1543872|text|递归解决方案(还扩展对象数组)%2B+null检查|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1543873|var+addProps+=+function+(original,+props)+{
++++if(!props)+{
++++++++return+original;
++++}
++++if+(Array.isArray(original))+{
++++++++original.map(function+(e)+{
++++++++++++return+addProps(e,+props)
++++++++});
++++++++return+original;
++++}
++++if+(!original)+{
++++++++original+=+{};
++++}
++++for+(var+property+in+props)+{
++++++++if+(props.hasOwnProperty(property))+{
++++++++++++original[property]+=+props[property];
++++++++}
++++}
++++return+original;
};|code-block|syntax|javascript|1543874|测试|1543875|console.log(addProps([{a:+2},+{z:+'ciao'}],+{timestamp:+13}));
console.log(addProps({single:+true},+{timestamp:+13}));
console.log(addProps({},+{timestamp:+13}));
console.log(addProps(null,+{timestamp:+13}));

[+{+a:+2,+timestamp:+13+},+{+z:+'ciao',+timestamp:+13+}+]
{+single:+true,+timestamp:+13+}
{+timestamp:+13+}
{+timestamp:+13+}|1543876|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<h2>Recursive solution (extends also arrays of objects) + null checked</h2>

<pre><code>var addProps = function (original, props) {
 if(!props) {
 return original;
 }
 if (Array.isArray(original)) {
 original.map(function (e) {
 return addProps(e, props)
 });
 return original;
 }
 if (!original) {
 original = {};
 }
 for (var property in props) {
 if (props.hasOwnProperty(property)) {
 original[property] = props[property];
 }
 }
 return original;
};
</code></pre>

Tests

<pre><code>console.log(addProps([{a: 2}, {z: 'ciao'}], {timestamp: 13}));
console.log(addProps({single: true}, {timestamp: 13}));
console.log(addProps({}, {timestamp: 13}));
console.log(addProps(null, {timestamp: 13}));

[ { a: 2, timestamp: 13 }, { z: 'ciao', timestamp: 13 } ]
{ single: true, timestamp: 13 }
{ timestamp: 13 }
{ timestamp: 13 }
</code></pre>

blocks|key|1328656|text|这是最好的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1328657|obj1.unshift.apply(+obj1,+obj2+);|code-block|syntax|javascript|1328658|此外，obj1可以在循环中毫无问题地增长。(假设obj2是动态的)|offset|length|style|CODE|1328659|entityMap^0|0|0|3|4|O|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

Here is the best solution.

<pre><code>obj1.unshift.apply( obj1, obj2 );
</code></pre>

Also, <code>obj1</code> can grow inside a loop without any problem. (lets say <code>obj2</code> is dynamic)

What’s the best/standard way of merging two associative arrays in JavaScript? Does everyone just do it by rolling their own <code>for</code> loop?

Merging objects (associative arrays)

jQuery

在JavaScript中合并两个关联数组的最佳/标准方法是什么？每个人都是通过运行自己的for循环来做到这一点的吗？

问合并对象(关联数组)
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问合并对象(关联数组)EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问合并对象(关联数组)
EN