JavaScriptで2つの連想配列をマージする最良/標準的な方法は何ですか?誰もが自分のfor
ループをローリングするだけでそれを実行しますか?
jqueryを使用すると、$.extend
を呼び出すことができます
var obj1 = {a: 1, b: 2};
var obj2 = {a: 4, c: 110};
var obj3 = $.extend(obj1, obj2);
obj1 == obj3 == {a: 4, b: 2, c: 110} // Pseudo JS
(連想配列はjsのオブジェクトです)
ここを見てください: http://api.jquery.com/jQuery.extend/
edit:rymoが提案したように、この方法で行う方が良いです:
obj3 = $.extend({}, obj1, obj2);
obj3 == {a: 4, b: 2, c: 110}
このように、obj1(およびobj2)は変更されません。
edit2:2018年のその方法はObject.assign
を介してです:
var obj3 = Object.assign({}, obj1, obj2);
obj3 === {a: 4, b: 2, c: 110} // Pseudo JS
ES6で作業している場合、これは Spread Operator で実現できます:
const obj3 = { ...obj1, ...obj2 };
今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
これは、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);
EDIT:bucabayがコメントで正しく指摘しているhasOwnProperty()チェックを追加
複雑にしないでおく...
function mergeArray(array1,array2) {
for(item in array1) {
array2[item] = array1[item];
}
return array2;
}
アンダースコア にはextendメソッドもあります:
ソースオブジェクトのすべてのプロパティをコピー先オブジェクトにコピーします。順序が正しいため、最後のソースは前の引数の同じ名前のプロパティをオーバーライドします。
_.extend(destination, *sources)
_.extend({name : 'moe'}, {age : 50});
=> {name : 'moe', age : 50}
dojo では、2つのオブジェクト/配列の「マージ」はlang.mixin(destination, source)
になります-複数のソースを1つの宛先に混在させることもできますなど- mixin関数のリファレンス 詳細については。
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???' });
...
これは、オブジェクトのsplatを再帰的に拡張するだけです。また、この再帰関数はTCO(Tail-Call Optimized)であり、その戻り値はそれ自体への最後の呼び出しであることに注意してください。
さらに、ターゲットプロパティが必要な場合があります。この場合、id
、quantity
、または別のプロパティに基づいてオブジェクトを圧縮することができます。このアプローチは、それについて書かれた小さな本を持つことができ、オブジェクトの並置を必要とし、非常に複雑になる可能性があります。リクエストに応じて利用できる小さなライブラリを作成しました。
お役に立てれば!
名前は同じであるが値が異なる場合、プロパティを上書きしますか?
元のオブジェクトの1つを永続的に変更しますか?
または、新しいマージされたオブジェクトを返しますか?
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];
}
}
}
}
Yahoo UI(YUI)にはこのためのヘルパー関数もあります。
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);
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';
これが最善の解決策です。
obj1.unshift.apply( obj1, obj2 );
また、obj1
は問題なくループ内で成長できます。 (obj2
は動的であると言います)
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;
};
テスト
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 }
ディープオブジェクトマージが必要でした。そのため、他のすべての答えはあまり役に立ちませんでした。 _.extendとjQuery.extendは、私のように再帰的な配列がない限りうまくいきます。しかし、それほど悪くはありません。5分でプログラムできます。
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;
}