2つのJavaScriptオブジェクトのプロパティを動的に結合する方法
実行時に2つの（非常に単純な）JavaScriptオブジェクトをマージできるようにする必要があります。例えば、私はしたいのですが。
var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }
obj1.merge(obj2);
//obj1 now has three properties: food, car, and animal
誰かがこのためのスクリプトを持っていますか、またはこれを行うための方法で建てられたのを知っていますか？再帰は必要ありませんし、関数をマージする必要もありません。フラットオブジェクトのメソッドだけです。
ECMAScript 2018標準メソッド
object spread ：を使います。
let merged = {...obj1, ...obj2};
/** There's no limit to the number of objects you can merge.
* Later properties overwrite earlier properties with the same name. */
const allRules = {...obj1, ...obj2, ...obj3};
ECMAScript 2015（ES6）標準方式
/* For the case in question, you would do: */
Object.assign(obj1, obj2);
/** There's no limit to the number of objects you can merge.
* All objects get merged into the first object.
* Only the object in the first argument is mutated and returned.
* Later properties overwrite earlier properties with the same name. */
const allRules = Object.assign({}, obj1, obj2, obj3, etc);
（ MDN JavaScriptリファレンス を参照）
ES5以前のメソッド
for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }
これは単にobj2のすべての属性をobj1に単純に追加することになることに注意してください。あなたがまだ変更されていないobj1を使いたいのなら、これはあなたが望むものではないかもしれません。
プロトタイプのいたるところでクラップするフレームワークを使用しているのであれば、hasOwnPropertyのようなチェックをする必要がありますが、そのコードは99％のケースで機能します。
関数の例：
/**
* Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
* @param obj1
* @param obj2
* @returns obj3 a new object based on obj1 and obj2
*/
function merge_options(obj1,obj2){
var obj3 = {};
for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
return obj3;
}
jQueryにもこのためのユーティリティがあります： http://api.jquery.com/jQuery.extend/ 。
JQueryのドキュメントから抜粋したものです。
// Merge options object into settings object
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
// Now the content of settings object is the following:
// { validate: true, limit: 5, name: "bar" }
上記のコードは 既存のオブジェクト という名前のsettingsを変更します。
どちらの引数も変更せずに 新しいオブジェクト を作成したい場合は、次のようにします。
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
/* Merge defaults and options, without modifying defaults */
var settings = $.extend({}, defaults, options);
// The content of settings variable is now the following:
// {validate: true, limit: 5, name: "bar"}
// The 'defaults' and 'options' variables remained the same.
Harmony ECMAScript 2015（ES6） は Object.assign を指定します.
Object.assign(obj1, obj2);
現在のブラウザサポートは 改善 ですが、サポートしていないブラウザ用に開発している場合は polyfill を使用できます。
私は、オブジェクトのプロパティをマージするためのコードを探して、ここに行きました。しかし、再帰的マージのためのコードがなかったので、私はそれを自分で書きました。ともかく、jQueryの拡張は再帰的なBTWなのでしょうか。
（現在、コードはObject.prototypeを使用しません:)
コード
/*
* Recursively merge properties of two objects
*/
function MergeRecursive(obj1, obj2) {
for (var p in obj2) {
try {
// Property in destination object set; update its value.
if ( obj2[p].constructor==Object ) {
obj1[p] = MergeRecursive(obj1[p], obj2[p]);
} else {
obj1[p] = obj2[p];
}
} catch(e) {
// Property in destination object not set; create it and set its value.
obj1[p] = obj2[p];
}
}
return obj1;
}
例
o1 = { a : 1,
b : 2,
c : {
ca : 1,
cb : 2,
cc : {
cca : 100,
ccb : 200 } } };
o2 = { a : 10,
c : {
ca : 10,
cb : 20,
cc : {
cca : 101,
ccb : 202 } } };
o3 = MergeRecursive(o1, o2);
のようにオブジェクトo3を作成します
o3 = { a : 10,
b : 2,
c : {
ca : 10,
cb : 20,
cc : {
cca : 101,
ccb : 202 } } };
underscore.js s extend_ method はワンライナーでこれを行います。
_.extend({name : 'moe'}, {age : 50});
=> {name : 'moe', age : 50}
JQuery extend（）と同様に、 AngularJS にも同じ機能があります。
// Merge the 'options' object into the 'settings' object
var settings = {validate: false, limit: 5, name: "foo"};
var options = {validate: true, name: "bar"};
angular.extend(settings, options);
今日はオブジェクトをマージする必要がありますが、この質問（および回答）が私を大きく助けてくれました。私はいくつかの答えを試してみましたが、どれも自分のニーズに合わなかったので、いくつかの答えを組み合わせ、自分で何かを追加して新しいマージ機能を思いついたのです。ここにあります：
var merge = function() {
var obj = {},
i = 0,
il = arguments.length,
key;
for (; i < il; i++) {
for (key in arguments[i]) {
if (arguments[i].hasOwnProperty(key)) {
obj[key] = arguments[i][key];
}
}
}
return obj;
};
いくつかの使用例
var t1 = {
key1: 1,
key2: "test",
key3: [5, 2, 76, 21]
};
var t2 = {
key1: {
ik1: "hello",
ik2: "world",
ik3: 3
}
};
var t3 = {
key2: 3,
key3: {
t1: 1,
t2: 2,
t3: {
a1: 1,
a2: 3,
a4: [21, 3, 42, "asd"]
}
}
};
console.log(merge(t1, t2));
console.log(merge(t1, t3));
console.log(merge(t2, t3));
console.log(merge(t1, t2, t3));
console.log(merge({}, t1, { key1: 1 }));
オブジェクトスプレッドプロパティを使用できます - 現在ステージ3のECMAScriptの提案.
const obj1 = { food: 'pizza', car: 'ford' };
const obj2 = { animal: 'dog' };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3);与えられた解は代入する前にfor..inループのsource.hasOwnProperty(property)をチェックするように修正されるべきです - さもなければ、あなたは全体のプロトタイプチェーンのプロパティをコピーすることになってしまいます。
1行のコードでN個のオブジェクトのプロパティをマージする
Object.assignメソッドはECMAScript 2015（ES6）規格の一部であり、まさにあなたが必要とすることを行います。 （IEはサポートされていません）
var clone = Object.assign({}, obj);
Object.assign（）メソッドは、列挙可能なすべての独自プロパティの値を1つ以上のソースオブジェクトからターゲットオブジェクトにコピーするために使用されます。
polyfill は古いブラウザをサポートします。
if (!Object.assign) {
Object.defineProperty(Object, 'assign', {
enumerable: false,
configurable: true,
writable: true,
value: function(target) {
'use strict';
if (target === undefined || target === null) {
throw new TypeError('Cannot convert first argument to object');
}
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) {
continue;
}
nextSource = Object(nextSource);
var keysArray = Object.keys(nextSource);
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) {
to[nextKey] = nextSource[nextKey];
}
}
}
return to;
}
});
}
次の2つはおそらく良い出発点です。 lodashには、これらの特別なニーズに合わせたカスタマイザ機能もあります。
_.extend（ http://underscorejs.org/#extend ） _.merge（ https://lodash.com/docs#merge ）
ちなみに、あなたがしていることは、マージではなく、プロパティの上書きです。
これがJavaScriptオブジェクト領域が実際にマージされる方法です。オブジェクト自身ではないtoオブジェクト内のキーのみがfromによって上書きされます。他のすべては 実際にマージされた になります。 to[n] is undefinedなどの場合にのみ存在するものを上書きしないように、もちろんこの動作を変更することができます。
var realMerge = function (to, from) {
for (n in from) {
if (typeof to[n] != 'object') {
to[n] = from[n];
} else if (typeof from[n] == 'object') {
to[n] = realMerge(to[n], from[n]);
}
}
return to;
};
使用法：
var merged = realMerge(obj1, obj2);
これが私の刺し傷です
- ディープマージをサポート
- 引数を変更しません
- 任意の数の引数を取ります
- オブジェクトのプロトタイプを拡張しません
- 他のライブラリには依存しません（ jQuery 、 MooTools 、 Underscore.js など）
- HasOwnPropertyのチェックを含みます
短いです ：）
/* Recursively merge properties and return new object obj1 <- obj2 [ <- ... ] */ function merge () { var dst = {} ,src ,p ,args = [].splice.call(arguments, 0) ; while (args.length > 0) { src = args.splice(0, 1)[0]; if (toString.call(src) == '[object Object]') { for (p in src) { if (src.hasOwnProperty(p)) { if (toString.call(src[p]) == '[object Object]') { dst[p] = merge(dst[p] || {}, src[p]); } else { dst[p] = src[p]; } } } } } return dst; }
例：
a = {
"p1": "p1a",
"p2": [
"a",
"b",
"c"
],
"p3": true,
"p5": null,
"p6": {
"p61": "p61a",
"p62": "p62a",
"p63": [
"aa",
"bb",
"cc"
],
"p64": {
"p641": "p641a"
}
}
};
b = {
"p1": "p1b",
"p2": [
"d",
"e",
"f"
],
"p3": false,
"p4": true,
"p6": {
"p61": "p61b",
"p64": {
"p642": "p642b"
}
}
};
c = {
"p1": "p1c",
"p3": null,
"p6": {
"p62": "p62c",
"p64": {
"p643": "p641c"
}
}
};
d = merge(a, b, c);
/*
d = {
"p1": "p1c",
"p2": [
"d",
"e",
"f"
],
"p3": null,
"p5": null,
"p6": {
"p61": "p61b",
"p62": "p62c",
"p63": [
"aa",
"bb",
"cc"
],
"p64": {
"p641": "p641a",
"p642": "p642b",
"p643": "p641c"
}
},
"p4": true
};
*/
Object.assign（）
ECMAScript 2015（ES6）
これはECMAScript 2015（ES6）標準の一部である新しいテクノロジです。このテクノロジの仕様は完成しましたが、さまざまなブラウザでの使用状況と実装状況については互換性テーブルを確認してください。
Object.assign（）メソッドは、列挙可能なすべての独自プロパティの値を1つ以上のソースオブジェクトからターゲットオブジェクトにコピーするために使用されます。ターゲットオブジェクトを返します。
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed.
それほど複雑ではないオブジェクトの場合は、 _ json _ を使用できます。
var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog', car: 'chevy'}
var objMerge;
objMerge = JSON.stringify(obj1) + JSON.stringify(obj2);
// {"food": "pizza","car":"ford"}{"animal":"dog","car":"chevy"}
objMerge = objMerge.replace(/\}\{/, ","); // \_ replace with comma for valid JSON
objMerge = JSON.parse(objMerge); // { food: 'pizza', animal: 'dog', car: 'chevy'}
// Of same keys in both objects, the last object's value is retained_/
この例では、 "} {"出現してはいけませんが文字列内にあることに注意してください。
これを行うための最善の方法は、Object.definePropertyを使用して列挙できない適切なプロパティを追加することです。
この方法でも、Object.prototype.extendでプロパティを作成した場合に新たに作成される「extend」を取得しなくても、オブジェクトのプロパティを繰り返し処理することができます。
うまくいけば、これが役立ちます。
Object.defineProperty（Object.prototype、 "extend"、{
列挙可能：false、
値：function（from）{
var props = Object.getOwnPropertyNames （from）;
var dest = this;
props.forEach（function（name）{
if（dest in name）{
var destination = Object。 getOwnPropertyDescriptor（from、name）;
Object.defineProperty（dest、name、destination）;
}
}）;
これを返してください;
}
}）;
それがうまくいったら、次のことができます。
var obj = {
name： 'stack'、
finish： 'overflow'
}
var replacement = {
名前： 'stock'
};
obj.extend（置き換え）;
私はちょうどそれについてのブログ記事をここに書いた： http://onemoredigit.com/post/1527191998/extending-objects-in-node-js
単純にjQueryを使うことができますextend
var obj1 = { val1: false, limit: 5, name: "foo" };
var obj2 = { val2: true, name: "bar" };
jQuery.extend(obj1, obj2);
obj1はobj1とobj2のすべての値を含みます
プロトタイプ これがあります：
Object.extend = function(destination,source) {
for (var property in source)
destination[property] = source[property];
return destination;
}
obj1.extend(obj2)はあなたが望むことをするでしょう。
だれでも Google Closure Library を使用している場合
goog.require('goog.object');
var a = {'a': 1, 'b': 2};
var b = {'b': 3, 'c': 4};
goog.object.extend(a, b);
// Now object a == {'a': 1, 'b': 3, 'c': 4};
var a = [1, 2];
var b = [3, 4];
goog.array.extend(a, b); // Extends array 'a'
goog.array.concat(a, b); // Returns concatenation of array 'a' and 'b'
David Coallierの方法を拡張しました。
- 複数のオブジェクトをマージする可能性を追加しました
- 深いオブジェクトをサポート
- オーバーライドパラメータ（最後のパラメータがブール値の場合に検出されます）
Overrideがfalseの場合、プロパティは上書きされませんが新しいプロパティが追加されます。
使用法： obj.merge（Merges ... [、override]）;
これが私のコードです：
Object.defineProperty(Object.prototype, "merge", {
enumerable: false,
value: function () {
var override = true,
dest = this,
len = arguments.length,
props, merge, i, from;
if (typeof(arguments[arguments.length - 1]) === "boolean") {
override = arguments[arguments.length - 1];
len = arguments.length - 1;
}
for (i = 0; i < len; i++) {
from = arguments[i];
if (from != null) {
Object.getOwnPropertyNames(from).forEach(function (name) {
var descriptor;
// nesting
if ((typeof(dest[name]) === "object" || typeof(dest[name]) === "undefined")
&& typeof(from[name]) === "object") {
// ensure proper types (Array rsp Object)
if (typeof(dest[name]) === "undefined") {
dest[name] = Array.isArray(from[name]) ? [] : {};
}
if (override) {
if (!Array.isArray(dest[name]) && Array.isArray(from[name])) {
dest[name] = [];
}
else if (Array.isArray(dest[name]) && !Array.isArray(from[name])) {
dest[name] = {};
}
}
dest[name].merge(from[name], override);
}
// flat properties
else if ((name in dest && override) || !(name in dest)) {
descriptor = Object.getOwnPropertyDescriptor(from, name);
if (descriptor.configurable) {
Object.defineProperty(dest, name, descriptor);
}
}
});
}
}
return this;
}
});
例とテストケース：
function clone (obj) {
return JSON.parse(JSON.stringify(obj));
}
var obj = {
name : "trick",
value : "value"
};
var mergeObj = {
name : "truck",
value2 : "value2"
};
var mergeObj2 = {
name : "track",
value : "mergeObj2",
value2 : "value2-mergeObj2",
value3 : "value3"
};
assertTrue("Standard", clone(obj).merge(mergeObj).equals({
name : "truck",
value : "value",
value2 : "value2"
}));
assertTrue("Standard no Override", clone(obj).merge(mergeObj, false).equals({
name : "trick",
value : "value",
value2 : "value2"
}));
assertTrue("Multiple", clone(obj).merge(mergeObj, mergeObj2).equals({
name : "track",
value : "mergeObj2",
value2 : "value2-mergeObj2",
value3 : "value3"
}));
assertTrue("Multiple no Override", clone(obj).merge(mergeObj, mergeObj2, false).equals({
name : "trick",
value : "value",
value2 : "value2",
value3 : "value3"
}));
var deep = {
first : {
name : "trick",
val : "value"
},
second : {
foo : "bar"
}
};
var deepMerge = {
first : {
name : "track",
anotherVal : "wohoo"
},
second : {
foo : "baz",
bar : "bam"
},
v : "on first layer"
};
assertTrue("Deep merges", clone(deep).merge(deepMerge).equals({
first : {
name : "track",
val : "value",
anotherVal : "wohoo"
},
second : {
foo : "baz",
bar : "bam"
},
v : "on first layer"
}));
assertTrue("Deep merges no override", clone(deep).merge(deepMerge, false).equals({
first : {
name : "trick",
val : "value",
anotherVal : "wohoo"
},
second : {
foo : "bar",
bar : "bam"
},
v : "on first layer"
}));
var obj1 = {a: 1, b: "hello"};
obj1.merge({c: 3});
assertTrue(obj1.equals({a: 1, b: "hello", c: 3}));
obj1.merge({a: 2, b: "mom", d: "new property"}, false);
assertTrue(obj1.equals({a: 1, b: "hello", c: 3, d: "new property"}));
var obj2 = {};
obj2.merge({a: 1}, {b: 2}, {a: 3});
assertTrue(obj2.equals({a: 3, b: 2}));
var a = [];
var b = [1, [2, 3], 4];
a.merge(b);
assertEquals(1, a[0]);
assertEquals([2, 3], a[1]);
assertEquals(4, a[2]);
var o1 = {};
var o2 = {a: 1, b: {c: 2}};
var o3 = {d: 3};
o1.merge(o2, o3);
assertTrue(o1.equals({a: 1, b: {c: 2}, d: 3}));
o1.b.c = 99;
assertTrue(o2.equals({a: 1, b: {c: 2}}));
// checking types with arrays and objects
var bo;
a = [];
bo = [1, {0:2, 1:3}, 4];
b = [1, [2, 3], 4];
a.merge(b);
assertTrue("Array stays Array?", Array.isArray(a[1]));
a = [];
a.merge(bo);
assertTrue("Object stays Object?", !Array.isArray(a[1]));
a = [];
a.merge(b);
a.merge(bo);
assertTrue("Object overrides Array", !Array.isArray(a[1]));
a = [];
a.merge(b);
a.merge(bo, false);
assertTrue("Object does not override Array", Array.isArray(a[1]));
a = [];
a.merge(bo);
a.merge(b);
assertTrue("Array overrides Object", Array.isArray(a[1]));
a = [];
a.merge(bo);
a.merge(b, false);
assertTrue("Array does not override Object", !Array.isArray(a[1]));
私のequalsメソッドはここで見つけることができます： JavaScriptでのオブジェクト比較
MooTools に、 Object.merge（） ：があります。
Object.merge(obj1, obj2);
オブジェクトのマージは簡単です。
var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog', car: 'BMW' }
var obj3 = {a: "A"}
var mergedObj = Object.assign(obj1,obj2,obj3)
console.log(mergedObj);オブジェクトは右から左にマージされます。つまり、右にあるオブジェクトと同じプロパティを持つオブジェクトは上書きされます。
この例では、obj2.carがobj1.carをオーバーライドします。
Ext JS 4では次のようになります。
var mergedObject = Ext.Object.merge(object1, object2)
// Or shorter:
var mergedObject2 = Ext.merge(object1, object2)
merge（object）：Objectを参照してください。
Markus ' および vsync' answer に基づいて、これは拡張バージョンです。この関数は任意の数の引数を取ります。 _ dom _ ノードにプロパティを設定するために使用でき、値の詳細コピーを作成します。ただし、最初の引数は参照によって与えられます。
DOMノードを検出するには、isDOMNode（）関数を使用します（スタックオーバーフローの質問JavaScript isDOM - JavaScriptオブジェクトがDOMオブジェクトかどうかをどうやって確認しますか？を参照）。
Opera 11、Firefox 6、 Internet Explorer 8 およびGoogle Chrome 16でテストされています。
コード
function mergeRecursive() {
// _mergeRecursive does the actual job with two arguments.
var _mergeRecursive = function (dst, src) {
if (isDOMNode(src) || typeof src !== 'object' || src === null) {
return dst;
}
for (var p in src) {
if (!src.hasOwnProperty(p))
continue;
if (src[p] === undefined)
continue;
if ( typeof src[p] !== 'object' || src[p] === null) {
dst[p] = src[p];
} else if (typeof dst[p]!=='object' || dst[p] === null) {
dst[p] = _mergeRecursive(src[p].constructor===Array ? [] : {}, src[p]);
} else {
_mergeRecursive(dst[p], src[p]);
}
}
return dst;
}
// Loop through arguments and merge them into the first argument.
var out = arguments[0];
if (typeof out !== 'object' || out === null)
return out;
for (var i = 1, il = arguments.length; i < il; i++) {
_mergeRecursive(out, arguments[i]);
}
return out;
}
いくつかの例
HTML要素のinnerHTMLとスタイルを設定する
mergeRecursive(
document.getElementById('mydiv'),
{style: {border: '5px solid green', color: 'red'}},
{innerHTML: 'Hello world!'});
配列とオブジェクトを結合します。 undefinedは左側の配列/オブジェクトの値を保存するために使用できることに注意してください。
o = mergeRecursive({a:'a'}, [1,2,3], [undefined, null, [30,31]], {a:undefined, b:'b'});
// o = {0:1, 1:null, 2:[30,31], a:'a', b:'b'}
JavaScriptオブジェクト以外の引数（nullを含む）は無視されます。最初の引数を除いて、DOMノードも破棄されます。 new String（）のように作成された文字列は、実際にはオブジェクトであることに注意してください。
o = mergeRecursive({a:'a'}, 1, true, null, undefined, [1,2,3], 'bc', new String('de'));
// o = {0:'d', 1:'e', 2:3, a:'a'}
2つのオブジェクトを（2つのうちのどちらにも影響を与えずに）新しいオブジェクトにマージしたい場合は、最初の引数として{}を指定してください。
var a={}, b={b:'abc'}, c={c:'cde'}, o;
o = mergeRecursive(a, b, c);
// o===a is true, o===b is false, o===c is false
編集 （ReaperSoonによる）：
配列もマージする
function mergeRecursive(obj1, obj2) {
if (Array.isArray(obj2)) { return obj1.concat(obj2); }
for (var p in obj2) {
try {
// Property in destination object set; update its value.
if ( obj2[p].constructor==Object ) {
obj1[p] = mergeRecursive(obj1[p], obj2[p]);
} else if (Array.isArray(obj2[p])) {
obj1[p] = obj1[p].concat(obj2[p]);
} else {
obj1[p] = obj2[p];
}
} catch(e) {
// Property in destination object not set; create it and set its value.
obj1[p] = obj2[p];
}
}
return obj1;
}
うわー..これは私が複数のページで見た最初のStackOverflow投稿です。別の「答え」を追加したことをお詫び申し上げます
このメソッドはES5以前 - に対応していますES6に対処するための他の多くの回答があります。
arguments プロパティを利用した"deep"オブジェクトのマージは見られませんでした。これが私の答えです - compact ＆ recursive 、無制限のオブジェクト引数を渡すことができます。
function extend() {
for (var o = {}, i = 0; i < arguments.length; i++) {
// if (arguments[i].constructor !== Object) continue;
for (var k in arguments[i]) {
if (arguments[i].hasOwnProperty(k)) {
o[k] = arguments[i][k].constructor === Object ? extend(o[k] || {}, arguments[i][k]) : arguments[i][k];
}
}
}
return o;
}
コメントアウトされている部分はオプションです。オブジェクトではない渡された引数を単にスキップします（エラーを防ぎます）。
例：
extend({
api: 1,
params: {
query: 'hello'
}
}, {
params: {
query: 'there'
}
});
// outputs {api: 1, params: {query: 'there'}}
この答えは海に落ちただけです...
Underscore.js を使用すると、オブジェクトの配列をマージすることができます。
var arrayOfObjects = [ {a:1}, {b:2, c:3}, {d:4} ];
_(arrayOfObjects).reduce(function(memo, o) { return _(memo).extend(o); });
その結果、
Object {a: 1, b: 2, c: 3, d: 4}
140byt.esコレクション からのバージョンは最小スペース内でタスクを解決しているので、この目的のために試す価値があることを言及する価値があります。
コード：
function m(a,b,c){for(c in b)b.hasOwnProperty(c)&&((typeof a[c])[0]=='o'?m(a[c],b[c]):a[c]=b[c])}
あなたの目的のための使用法：
m(obj1,obj2);
これが オリジナルの要旨 です。
あなたはlodashの defaultsDeep を使うべきです
_.defaultsDeep({ 'user': { 'name': 'barney' } }, { 'user': { 'name': 'fred', 'age': 36 } });
// → { 'user': { 'name': 'barney', 'age': 36 } }
私は純粋なJavaScriptにある以下を使います。それは一番右の引数から始まり、それらを最初の引数まで結合します。戻り値はありません。最初の引数だけが変更され、左端のパラメータ（最初のものを除く）がプロパティに対して最も高い重みを持ちます。
var merge = function() {
var il = arguments.length;
for (var i = il - 1; i > 0; --i) {
for (var key in arguments[i]) {
if (arguments[i].hasOwnProperty(key)) {
arguments[0][key] = arguments[i][key];
}
}
}
};
ES2018/TypeScript：多くの答えは問題ありませんが、2つのオブジェクトをマージする必要がある場合、この問題に対するよりエレガントなソリューションを思いつきました重複するオブジェクトキーを上書きせずに。
私の関数は無制限のオブジェクト数も受け入れて、関数の引数としてマージします。
（ここではTypeScript表記を使用しています。プレーンJavaScriptを使用している場合は、関数引数の:object[]タイプを自由に削除してください）。
const merge = (...objects: object[]) => {
return objects.reduce((prev, next) => {
Object.keys(prev).forEach(key => {
next[key] = { ...next[key], ...prev[key] }
})
return next
})
}
var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }
// result
result: {food: "pizza", car: "ford", animal: "dog"}
jQuery.extend（）を使う - リンク
// Merge obj1 & obj2 to result
var result1 = $.extend( {}, obj1, obj2 );
_.merge（）を使用する - リンク
// Merge obj1 & obj2 to result
var result2 = _.merge( {}, obj1, obj2 );
_.extend（）を使用する - リンク
// Merge obj1 & obj2 to result
var result3 = _.extend( {}, obj1, obj2 );
Object.assign（）を使用するECMAScript 2015（ES6） - リンク
// Merge obj1 & obj2 to result
var result4 = Object.assign( {}, obj1, obj2 );
すべての出力
obj1: { animal: 'dog' }
obj2: { food: 'pizza', car: 'ford' }
result1: {food: "pizza", car: "ford", animal: "dog"}
result2: {food: "pizza", car: "ford", animal: "dog"}
result3: {food: "pizza", car: "ford", animal: "dog"}
result4: {food: "pizza", car: "ford", animal: "dog"}
function extend(o, o1, o2){
if( !(o instanceof Object) ) o = {};
copy(o, o1);
if( o2 )
copy(o, o2)
function isObject(obj) {
var type = Object.prototype.toString.call(obj);
return obj === Object(obj) && type != '[object Array]' && type != '[object Function]';
};
function copy(a,b){
// copy o2 to o
for( var key in b )
if( b.hasOwnProperty(key) ){
if( isObject(b[key]) ){
if( !isObject(a[key]) )
a[key] = Object.assign({}, b[key]);
else copy(a[key], b[key])
}
else
a[key] = b[key];
}
}
return o;
};
var o1 = {a:{foo:1}, b:1},
o2 = {a:{bar:2}, b:[1], c:()=>{}},
newMerged = extend({}, o1, o2);
console.log( newMerged )
console.log( o1 )
console.log( o2 )gossiのDavid Coallierの方法の拡張
次の2行を確認してください。
from = arguments[i];
Object.getOwnPropertyNames(from).forEach(function (name) {
Nullオブジェクトに対して "from"をチェックする必要があります。たとえば、以前にサーバー上で作成された Ajax レスポンスからのオブジェクトをマージする場合、オブジェクトプロパティの値は "null"になります。その場合、上記のコードは次のようなエラーを生成します。
"from"は有効なオブジェクトではありません
そのため、例えば、 "... Object.getOwnPropertyNames（from）.forEach ..."関数を "if（from！= null）{...}"でラップすると、このエラーは発生しなくなります。
つかいます：
//Takes any number of objects and returns one merged object
var objectMerge = function(){
var out = {};
if(!arguments.length)
return out;
for(var i=0; i<arguments.length; i++) {
for(var key in arguments[i]){
out[key] = arguments[i][key];
}
}
return out;
}
それはでテストされました：
console.log(objectMerge({a:1, b:2}, {a:2, c:4}));
その結果、
{ a: 2, b: 2, c: 4 }
私のやり方：
function mergeObjects(defaults, settings) {
Object.keys(defaults).forEach(function(key_default) {
if (typeof settings[key_default] == "undefined") {
settings[key_default] = defaults[key_default];
} else if (isObject(defaults[key_default]) && isObject(settings[key_default])) {
mergeObjects(defaults[key_default], settings[key_default]);
}
});
function isObject(object) {
return Object.prototype.toString.call(object) === '[object Object]';
}
return settings;
}
:)
ここで私は自分のコードベースでマージするために使用したものです。
function merge(to, from) {
if (typeof to === 'object' && typeof from === 'object') {
for (var pro in from) {
if (from.hasOwnProperty(pro)) {
to[pro] = from[pro];
}
}
}
else{
throw "Merge function can apply only on object";
}
}
私はJavaScriptを使い始めたようなので、間違っていたら訂正してください。
しかし、オブジェクトをいくつでもマージできるのであれば、もっといいのではないでしょうか。これがネイティブArgumentsオブジェクトを使ったやり方です。
重要な点は、関数宣言で引数を定義しなくても、JavaScript関数に実際に引数をいくつでも渡すことができるということです。 Argumentsオブジェクトを使わずにそれらにアクセスすることはできません。
function mergeObjects() (
var tmpObj = {};
for(var o in arguments) {
for(var m in arguments[o]) {
tmpObj[m] = arguments[o][m];
}
}
return tmpObj;
}
Prototype の正しい実装は次のようになります。
var obj1 = {food: 'pizza', car: 'ford'}
var obj2 = {animal: 'dog'}
obj1 = Object.extend(obj1, obj2);
Node.js を使っている人のために、NPMモジュールがあります： node.extend
インストール：
npm install node.extend
使用法：
var extend = require('node.extend');
var destObject = extend(true, {}, sourceObject);
// Where sourceObject is the object whose properties will be copied into another.
あなたは私の方法に従ってオブジェクトをマージすることができます
var obj1 = { food: 'pizza', car: 'ford' };
var obj2 = { animal: 'dog' };
var result = mergeObjects([obj1, obj2]);
console.log(result);
document.write("result: <pre>" + JSON.stringify(result, 0, 3) + "</pre>");
function mergeObjects(objectArray) {
if (objectArray.length) {
var b = "", i = -1;
while (objectArray[++i]) {
var str = JSON.stringify(objectArray[i]);
b += str.slice(1, str.length - 1);
if (objectArray[i + 1]) b += ",";
}
return JSON.parse("{" + b + "}");
}
return {};
}ES5互換ネイティブワンライナー：
var merged = [obj1, obj2].reduce(function(a, o) { for(k in o) a[k] = o[k]; return a; }, {})
JSON互換のJavaScriptオブジェクトのマージ
元のソースを変更しない非破壊的な方法の使用と利用をお勧めします。 'Object.assign'は 破壊的な方法 であり、またそうではありません プロダクションにやさしい それ以前のブラウザでは動作しなくなりますし、代替方法できれいにパッチを当てる方法はありません。
どのような解決策であっても、JSオブジェクトをマージすることは常に手の届かない、または不完全になります。しかし、JSON準拠の互換性のあるオブジェクトをマージすることは、一連のJSオブジェクトをすべての固有のプロパティ名とそれに対応する値を含む返されたマスターにマージする非破壊メソッドの簡単で移植性のあるコードを書くことができることからすぐ意図した目的のための単一のマスターオブジェクト。
MSIE8がJSONオブジェクトのネイティブサポートを追加した最初のブラウザであることを念頭に置いておくことは非常に安心であり、既存のテクノロジを再利用することは常に歓迎される機会です。
コードをJSON準拠の標準オブジェクトに制限することは、制限よりも有利です。これらのオブジェクトはインターネットを介して転送することもできるからです。もちろん、より下位互換性を望んでいる人のために、常にjsonプラグインがあります。そのメソッドは、使用中のメソッドを変更または書き直すことなく、外部コード内のJSON変数に簡単に割り当てることができます。
function Merge( ){
var a = [].slice.call( arguments ), i = 0;
while( a[i] )a[i] = JSON.stringify( a[i++] ).slice( 1,-1 );
return JSON.parse( "{"+ a.join() +"}" );
}
（もちろん、もっと意味のある名前をつけることもできますが、私はまだ決めていません。おそらくJSONmergeと名付けるべきです）
ユースケース：
var master = Merge( obj1, obj2, obj3, ...objn );
Object.assignとは反対に、これはすべてのオブジェクトを変更せずに元の状態のままにします（何かを間違って行ってマージオブジェクトを並べ替える必要がある場合や、再度マージする前に別の操作に使用する場合）。
Merge引数の数も引数の長さの制限によって制限されます only ネイティブにサポートされているJSONのparse/stringifyはすでにマシンに最適化されています。つまり、スクリプト形式のJSループよりも高速であるはずです。 与えられた引数に対する繰り返しは、whileを使って行われています - これは、JSで最も速いループであることが証明されています。
一意のオブジェクトラベル（keys）の重複したプロパティが、同じキーラベルを含む後のオブジェクトによって上書きされることを既に知っているという事実を簡単に言及しても害はありません。引数リストを単純に並べ替えたり並べ替えたりすることによって前のものになります。そして最後の出力として、複製なしでクリーンで更新されたマスターオブジェクトを取得することの利点。
このソリューションは 新しいオブジェクト を作成し、 複数のオブジェクト を処理することができます。
さらに、それは 再帰 であり、あなたは天気を 欲しい から 上書きする値 と オブジェクト を選択できます。
function extendObjects() {
var newObject = {};
var overwriteValues = false;
var overwriteObjects = false;
for ( var indexArgument = 0; indexArgument < arguments.length; indexArgument++ ) {
if ( typeof arguments[indexArgument] !== 'object' ) {
if ( arguments[indexArgument] == 'overwriteValues_True' ) {
overwriteValues = true;
} else if ( arguments[indexArgument] == 'overwriteValues_False' ) {
overwriteValues = false;
} else if ( arguments[indexArgument] == 'overwriteObjects_True' ) {
overwriteObjects = true;
} else if ( arguments[indexArgument] == 'overwriteObjects_False' ) {
overwriteObjects = false;
}
} else {
extendObject( arguments[indexArgument], newObject, overwriteValues, overwriteObjects );
}
}
function extendObject( object, extendedObject, overwriteValues, overwriteObjects ) {
for ( var indexObject in object ) {
if ( typeof object[indexObject] === 'object' ) {
if ( typeof extendedObject[indexObject] === "undefined" || overwriteObjects ) {
extendedObject[indexObject] = object[indexObject];
}
extendObject( object[indexObject], extendedObject[indexObject], overwriteValues, overwriteObjects );
} else {
if ( typeof extendedObject[indexObject] === "undefined" || overwriteValues ) {
extendedObject[indexObject] = object[indexObject];
}
}
}
return extendedObject;
}
return newObject;
}
var object1 = { a : 1, b : 2, testArr : [888, { innArr : 1 }, 777 ], data : { e : 12, c : { lol : 1 }, rofl : { O : 3 } } };
var object2 = { a : 6, b : 9, data : { a : 17, b : 18, e : 13, rofl : { O : 99, copter : { mao : 1 } } }, hexa : { tetra : 66 } };
var object3 = { f : 13, g : 666, a : 333, data : { c : { xD : 45 } }, testArr : [888, { innArr : 3 }, 555 ] };
var newExtendedObject = extendObjects( 'overwriteValues_False', 'overwriteObjects_False', object1, object2, object3 );
newExtendedObjectの内容：
{"a":1,"b":2,"testArr":[888,{"innArr":1},777],"data":{"e":12,"c":{"lol":1,"xD":45},"rofl":{"O":3,"copter":{"mao":1}},"a":17,"b":18},"hexa":{"tetra":66},"f":13,"g":666}
フィドル： http://jsfiddle.net/o0gb2umb/ /
私はObject.create（）を使用してデフォルト設定を維持しました（__proto__またはObject.getPrototypeOf（）を利用）。
function myPlugin( settings ){
var defaults = {
"keyName": [ "string 1", "string 2" ]
}
var options = Object.create( defaults );
for (var key in settings) { options[key] = settings[key]; }
}
myPlugin( { "keyName": ["string 3", "string 4" ] } );
こうすれば、後で 'concat（）'または 'Push（）'を実行できます。
var newArray = options['keyName'].concat( options.__proto__['keyName'] );
注 ：重複を避けるために、連結の前にhasOwnPropertyチェックを行う必要があります。
これを達成するための可能な方法は以下の通りです。
if (!Object.prototype.merge){
Object.prototype.merge = function(obj){
var self = this;
Object.keys(obj).forEach(function(key){
self[key] = obj[key]
});
}
};
それが他の答えよりも優れているかどうかはわかりません。このメソッドではmerge functionをObjectsプロトタイプに追加します。こうすればobj1.merge(obj2);を呼び出せます
注：引数がオブジェクトであるかどうかを確認し、適切なErrorを「スロー」するように引数を検証する必要があります。そうでなければObject.keysは 'エラー'を 'スロー'します
次のヘルパーを使うと、2つのオブジェクトを1つの新しいオブジェクトにマージすることができます。
function extend(obj, src) {
for (var key in src) {
if (src.hasOwnProperty(key)) obj[key] = src[key];
}
return obj;
}
// example
var a = { foo: true }, b = { bar: false };
var c = extend(a, b);
console.log(c);
// { foo: true, bar: false }
これは、オプションや辞書を関数やプラグインのデフォルト設定とマージするときに便利です。
IE 8のサポートが不要な場合は、代わりに同じ機能にObject.keysを使用できます。
function extend(obj, src) {
Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
return obj;
}
これは少し少ないコードを含み、少し速いです。
let obj1 = {a:1, b:2};
let obj2 = {c:3, d:4};
let merged = {...obj1, ...obj2};
console.log(merged);A={a:1,b:function(){alert(9)}}
B={a:2,c:3}
A.merge = function(){for(var i in B){A[i]=B[i]}}
A.merge()
結果は次のとおりです。{a：2、c：3、b：function（）}
これはobjを "デフォルト"のdefにマージします。 objはobjにコピーされるため、defは両方に存在するものよりも優先されます。これは再帰的です。
function mergeObjs(def, obj) {
if (typeof obj == 'undefined') {
return def;
} else if (typeof def == 'undefined') {
return obj;
}
for (var i in obj) {
if (obj[i] != null && obj[i].constructor == Object) {
def[i] = mergeObjs(def[i], obj[i]);
} else {
def[i] = obj[i];
}
}
return def;
}
a = {x : {y : [123]}}
b = {x : {z : 123}}
console.log(mergeObjs(a, b));
// {x: {y : [123], z : 123}}
空のオブジェクトを作成し、それらをfor-loopで結合することができます。
var obj1 = {
id: '1',
name: 'name'
}
var obj2 = {
c: 'c',
d: 'd'
}
var obj3 = {}
for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
console.log( obj1, obj2, obj3)Dojo Toolkit を使用している場合、2つのオブジェクトをマージする最良の方法はミックスインを使用することです。
以下はDojo Toolkit mixinのサンプルです。
// Dojo 1.7+ (AMD)
require(["dojo/_base/lang"], function(lang){
var a = { b:"c", d:"e" };
lang.mixin(a, { d:"f", g:"h" });
console.log(a); // b:c, d:f, g:h
});
// Dojo < 1.7
var a = { b:"c", d:"e" };
dojo.mixin(a, { d:"f", g:"h" });
console.log(a); // b:c, d:f, g:h
詳しくはmixinをご覧ください。
すべてのオブジェクトにデフォルトのマージ（より良い名前を「継承」）する方法を割り当てることができます。
オブジェクトかインスタンス化された関数のどちらでも動作するはずです。
以下のコードは、必要に応じてマージ値の上書きを処理します。
Object.prototype.merge = function(obj, override) {
// Don't override by default
for (var key in obj) {
var n = obj[key];
var t = this[key];
this[key] = (override && t) ? n : t;
};
};
テストデータは以下のとおりです。
var Mammal = function () {
this.eyes = 2;
this.thinking_brain = false;
this.say = function () {
console.log('screaming like a mammal')};
}
var Human = function () {
this.thinking_brain = true;
this.say = function() {console.log('shouting like a human')};
}
john = new Human();
// Extend mammal, but do not override from mammal
john.merge(new Mammal());
john.say();
// Extend mammal and override from mammal
john.merge(new Mammal(), true);
john.say();
別の方法：
function concat_collection(obj1, obj2) {
var i;
var arr = new Array();
var len1 = obj1.length;
for (i=0; i<len1; i++) {
arr.Push(obj1[i]);
}
var len2 = obj2.length;
for (i=0; i<len2; i++) {
arr.Push(obj2[i]);
}
return arr;
}
var ELEMENTS = concat_collection(A,B);
for(var i = 0; i < ELEMENTS.length; i++) {
alert(ELEMENTS[i].value);
}