合并对象(关联数组)
在JavaScript中合并两个关联数组的最佳/标准方式是什么? 每个人都只是通过滚动自己for
循环来做到这一点?
用jQuery,你可以调用$.extend
obj1 = {a: 1, b: 2}; obj2 = {a: 4, c: 110}; obj3 = $.extend(obj1, obj2); obj1 == obj3 == {a: 4, b: 2, c: 110}
(关联数组是js中的对象)
看这里: http : //api.jquery.com/jQuery.extend/
编辑:像rymobuild议,最好这样做:
obj3 = $.extend({}, obj1, obj2); obj3 == {a: 4, b: 2, c: 110}
这里obj1(和obj2)保持不变。
Prototype是这样做的:
Object.extend = function(destination, source) { for (var property in source) { if (source.hasOwnProperty(property)) { destination[property] = source[property]; } } return destination; };
称为,例如:
var arr1 = { robert: "bobby", john: "jack" }; var arr2 = { elizabeth: "liz", jennifer: "jen" }; var shortnames = Object.extend(arr1,arr2);
编辑 :添加hasOwnProperty()检查由bucabay在评论中正确指出
现在在2016年,我会说最好的/标准的方式是Object.assign()
纯Javascript。 不需要jQuery。
obj1 = {a: 1, b: 2}; obj2 = {a: 4, c: 110}; obj3 = Object.assign({},obj1, obj2); // Object {a: 4, b: 2, c: 110}
更多信息,例子和填充在这里:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
把事情简单化…
function mergeArray(array1,array2) { for(item in array1) { array2[item] = array1[item]; } return array2; }
下划线也有一个扩展方法:
将源对象中的所有属性复制到目标对象。 它是有序的,所以最后的源将在先前的参数中覆盖相同名称的属性。
_.extend(destination, *sources) _.extend({name : 'moe'}, {age : 50}); => {name : 'moe', age : 50}
在dojo中 ,2对象/数组“合并”将是lang.mixin(destination, source)
– 您也可以将多个源混合到一个目标中,等等 – 有关详细信息,请参阅mixin函数的参考 。
如果名称相同但是值不是?
你想永久改变一个原始的对象,
或者你想要一个新的合并对象返回?
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]; } } } }
滚动您自己的扩展/混音function
function extend(objects) { var args , first = Array.prototype.slice.call(arguments, 0, 1)[0] , second; if (arguments.length > 1) { second = Array.prototype.splice.call(arguments, 1, 1)[0]; for (var key in second) { first[key] = second[key]; } args = Array.prototype.slice.call(arguments, 0); return extend.apply(this, args); } return first; }
…
var briansDirections = { step1: 'Remove pastry from wrapper.', step2: 'Place pastry toaster.', step3: 'Remove pastry from toaster and enjoy.', }; extend(briansDirections, { step1: 'Toast Poptarts' }, { step2: 'Go ahead, toast \'em' }, { step3: 'Hey, are you sill reading this???' });
…
这只是recursion地扩展对象的图示 。 另外请注意,这个recursion函数是TCO( Tail-Call Optimized ),因为它的返回是对自己的最后一次调用。
另外,您可能需要有针对性的属性 。 在这种情况下,您可能需要根据id
, quantity
或其他属性浓缩对象。 这种方法可以写一个小书,并要求对象并置,可能会变得非常复杂。 我为此写了一个小型图书馆,可根据要求提供。
希望这可以帮助!
- 在JavaScript中没有关联数组的概念,有对象
- 合并两个对象的唯一方法是循环其属性,并将指向它们的值的指针复制到另一个实例
雅虎用户界面(YUI)也有一个帮手function:
http://developer.yahoo.com/yui/examples/yahoo/yahoo_merge.html
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);
我需要一个深度的对象合并。 所以所有其他的答案都没有帮到我很多。 _.extend和jQuery.extend做得很好,除非你有像我这样的recursion数组。 但不是那么糟糕,你可以在五分钟内编程:
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; }
jQuery的深层复制有一个布尔值。 你可以做这样的事情:
MergeRecursive = function(arr1, arr2){ $.extend(true, arr1, arr2); return arr1; };
你也可以编辑这个函数来支持n数组合并。
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++ ){ $.extend(true, arr1, arguments[i]); } return arr1; };
所以,现在你可以做
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);
在jQuery中合并数组$ .merge是什么?
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';
recursion解决scheme(扩展也是对象数组)+空检查
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; };
testing
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 }
这是最好的解决scheme。
obj1.unshift.apply( obj1, obj2 );
而且, obj1
可以在一个循环内部增长而没有任何问题。 (可以说obj2
是dynamic的)