我需要能够在运行时合并两个（非常简单的）JavaScript 对象。例如我想：
var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }
obj1.merge(obj2);
//obj1 now has three properties: food, car, and animal
有没有内置的方法来做到这一点？我不需要递归，也不需要合并函数，只需要平面对象上的方法。
JC Grubbs
问问题
1661230 次
67 回答
3579
ECMAScript 2018 标准方法
您将使用对象传播：
let merged = {...obj1, ...obj2};
merged现在是 和 的obj1并集obj2。中的属性obj2将覆盖obj1.
/** 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};
这里也是这个语法的MDN 文档。如果你使用 babel，你需要babel-plugin-transform-object-rest-spread插件才能工作。
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);
ES5 及更早版本的方法
for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }
请注意，如果您仍想使用未修改obj2的.obj1obj1
如果你使用的框架在你的原型上都是废话，那么你必须通过类似的检查来获得更好的检查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;
}
于 2008-10-05T00:33:25.077 回答
1226
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.
于 2008-10-05T03:56:40.673 回答
374
Harmony ECMAScript 2015 (ES6)指定Object.assign了执行此操作的程序。
Object.assign(obj1, obj2);
于 2014-10-05T19:14:36.653 回答
284
我搜索了合并对象属性的代码并最终到了这里。但是，由于没有任何用于递归合并的代码，我自己编写了它。（也许 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 } } };
于 2008-12-20T12:05:47.297 回答
178
请注意，underscore.js's extend-method在单行中执行此操作：
_.extend({name : 'moe'}, {age : 50});
=> {name : 'moe', age : 50}
于 2012-02-19T11:44:52.633 回答
83
与 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);
于 2014-01-27T21:00:57.983 回答
66
我今天需要合并对象，这个问题（和答案）对我帮助很大。我尝试了一些答案，但没有一个适合我的需要，所以我结合了一些答案，自己添加了一些东西，并想出了一个新的合并功能。这里是：
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 }));
于 2011-12-24T15:09:55.837 回答
60
您可以使用对象扩展语法来实现这一点。它是 ES2018 及更高版本的一部分。
const obj1 = { food: 'pizza', car: 'ford' };
const obj2 = { animal: 'dog' };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3);于 2017-01-27T09:55:11.533 回答
41
应该修改给定的解决方案以在分配之前检查source.hasOwnProperty(property)循环for..in- 否则，您最终会复制整个原型链的属性，这很少需要......
于 2008-12-21T13:02:01.270 回答
41
在一行代码中合并 N 个对象的属性
Object.assign方法是 ECMAScript 2015 (ES6) 标准的一部分，完全符合您的需要。（IE不支持）
var clone = Object.assign({}, obj);
Object.assign() 方法用于将所有可枚举自身属性的值从一个或多个源对象复制到目标对象。
支持旧浏览器的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;
}
});
}
于 2015-12-15T16:59:21.563 回答
36
以下两个可能是一个很好的起点。lodash 还具有针对那些特殊需求的定制器功能！
_.extend( http://underscorejs.org/#extend )
_.merge( https://lodash.com/docs#merge )
于 2015-01-30T00:59:48.303 回答
30
这是我的刺
- 支持深度合并
- 不改变参数
- 接受任意数量的参数
- 不扩展对象原型
- 不依赖于其他库（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
};
*/
于 2013-04-23T20:45:20.060 回答
29
顺便说一句，你们所做的是覆盖属性，而不是合并......
这就是 JavaScript 对象区域真正合并的方式：只有to对象本身不是对象的键才会被from. 其他一切都将真正合并。当然，您可以更改此行为以不覆盖仅存在的任何内容，例如 ifto[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);
于 2012-09-19T12:58:10.390 回答
20
对象.assign()
ECMAScript 2015 (ES6)
这是一项新技术，是 ECMAScript 2015 (ES6) 标准的一部分。该技术的规范已经最终确定，但请查看兼容性表以了解各种浏览器中的使用情况和实施情况。
Object.assign() 方法用于将所有可枚举自身属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
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.
于 2015-11-16T16:35:04.607 回答
19
对于不太复杂的对象，您可以使用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_/
请注意，在此示例中，“}{”不得出现在字符串中！
于 2010-02-26T19:13:58.743 回答
16
执行此操作的最佳方法是使用 Object.defineProperty 添加一个不可枚举的正确属性。
这样，您仍然可以迭代您的对象属性，而无需使用 Object.prototype.extend 创建属性时获得的新创建的“扩展”。
希望这会有所帮助：
Object.defineProperty（Object.prototype，“扩展”，{
可枚举：假，
值：函数（来自）{
var props = Object.getOwnPropertyNames(from);
var dest = 这个；
props.forEach（函数（名称）{
如果（目标中的名称）{
var destination = Object.getOwnPropertyDescriptor(from, name);
Object.defineProperty(dest, name, destination);
}
});
返回这个；
}
});
一旦你有这个工作，你可以这样做：
变量 obj = {
名称：'堆栈'，
完成：'溢出'
}
变量替换 = {
名称：'库存'
};
obj.extend（替换）；
我刚刚在这里写了一篇关于它的博客文章：http: //onemoredigit.com/post/1527191998/extending-objects-in-node-js
于 2010-11-09T22:09:35.300 回答
15
原型有这个：
Object.extend = function(destination,source) {
for (var property in source)
destination[property] = source[property];
return destination;
}
obj1.extend(obj2)会做你想做的。
于 2008-10-05T00:36:01.983 回答
15
你可以简单地使用 jQueryextend
var obj1 = { val1: false, limit: 5, name: "foo" };
var obj2 = { val2: true, name: "bar" };
jQuery.extend(obj1, obj2);
现在包含和obj1的所有值obj1obj2
于 2015-08-31T06:51:16.670 回答
13
Object.assign**使用扩展运算符很简单合并对象...**
var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog', car: 'BMW' }
var obj3 = {a: "A"}
var mergedObj = Object.assign(obj1,obj2,obj3)
// or using the Spread operator (...)
var mergedObj = {...obj1,...obj2,...obj3}
console.log(mergedObj);对象从右到左合并，这意味着与右侧对象具有相同属性的对象将被覆盖。
在这个例子中obj2.car覆盖obj1.car
于 2018-03-20T21:41:44.883 回答
13
哇.. 这是我看到的第一个包含多个页面的 StackOverflow 帖子。抱歉添加另一个“答案”
ES5 及更早版本
此方法适用于ES5 及更早版本- 还有很多其他解决 ES6 的答案。
我没有看到任何使用该属性合并的“深层”arguments对象。这是我的答案 - compact & recursive，允许传递无限的对象参数：
function extend() {
for (var o = {}, i = 0; i < arguments.length; i++) {
// Uncomment to skip arguments that are not objects (to prevent errors)
// 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 objects
*/
function extend() {
for (var o = {}, i = 0; i < arguments.length; i++) {
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;
}
/**
* Example
*/
document.write(JSON.stringify(extend({
api: 1,
params: {
query: 'hello'
}
}, {
params: {
query: 'there'
}
})));
// outputs {"api": 1, "params": {"query": "there"}}这个答案现在不过是沧海一粟……
于 2018-05-01T18:44:14.177 回答
12
就像有人在使用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'
于 2012-04-19T21:23:04.890 回答
11
我扩展了 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 中的对象比较
于 2011-04-02T11:49:39.893 回答
10
Object.merge(obj1, obj2);
于 2009-07-31T20:06:38.167 回答
8
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"}
于 2018-09-18T01:55:43.813 回答
7
基于Markus和vsync 的回答，这是一个扩展版本。该函数接受任意数量的参数。它可用于在DOM节点上设置属性并制作值的深层副本。但是，第一个参数是通过引用给出的。
要检测 DOM 节点，使用 isDOMNode() 函数（请参阅 Stack Overflow 问题JavaScript isDOM — How do you check if a JavaScript Object is a DOM Object?）
它在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!'});
合并数组和对象。请注意，未定义可用于保留左侧数组/对象中的值。
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'}
如果要将两个对象合并为一个新对象（不影响两者中的任何一个），请提供 {} 作为第一个参数
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;
}
于 2012-01-06T21:47:46.357 回答
5
使用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}
于 2014-03-15T10:54:56.193 回答
5
你应该使用 lodash 的defaultsDeep
_.defaultsDeep({ 'user': { 'name': 'barney' } }, { 'user': { 'name': 'fred', 'age': 36 } });
// → { 'user': { 'name': 'barney', 'age': 36 } }
于 2015-12-22T11:02:49.647 回答
5
let obj1 = {a:1, b:2};
let obj2 = {c:3, d:4};
let merged = {...obj1, ...obj2};
console.log(merged);于 2019-01-17T11:30:02.960 回答
5
看起来这应该是你所需要的：
var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }
var obj3 = { ...obj1, ...obj2 }
之后 obj3 现在应该具有以下值：
{food: "pizza", car: "ford", animal: "dog"}
在这里尝试一下：
var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }
var obj3 = { ...obj1, ...obj2 }
console.log(obj3);于 2019-11-13T22:24:30.023 回答
4
值得一提的是，140bytes.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);
这是原始 Gist。
于 2012-10-19T09:44:38.437 回答
4
ES2018/TypeScript：很多答案都可以，但是当您需要合并两个对象而不覆盖重叠的对象键时，我想出了一个更优雅的解决方案来解决这个问题。
我的函数还接受无限数量的对象作为函数参数合并：
:object[]（我在这里使用 TypeScript 表示法，如果您使用纯 JavaScript ，请随意删除函数参数中的类型）。
const merge = (...objects: object[]) => {
return objects.reduce((prev, next) => {
Object.keys(prev).forEach(key => {
next[key] = { ...next[key], ...prev[key] }
})
return next
})
}
于 2019-03-14T06:55:09.473 回答
4
使用遵循 ES6 版本的 Spread 运算符
var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }
let result = {...obj1,...obj2};
console.log(result)
output { food: 'pizza', car: 'ford', animal: 'dog' }
于 2020-01-11T12:59:01.493 回答
3
你可以使用Object.assign方法。例如：
var result = Object.assign(obj1, obj2);
另外，请注意，它会创建对象的浅表副本。
于 2019-12-26T06:32:46.017 回答
2
采用：
//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 }
于 2011-07-09T14:53:06.697 回答
2
gossi 对 David Coallier 方法的扩展：
检查这两行：
from = arguments[i];
Object.getOwnPropertyNames(from).forEach(function (name) {
需要针对空对象检查“来自”...例如，如果合并来自Ajax响应的对象，该对象之前在服务器上创建，则对象属性的值可以为“空”，在这种情况下，上述情况代码生成一个错误说：
"from" 不是一个有效的对象
例如，用“if (from != null) { ... }”包装“...Object.getOwnPropertyNames(from).forEach...”函数将防止该错误发生。
于 2011-08-24T09:39:27.423 回答
2
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 )于 2011-11-01T10:20:14.680 回答
2
我的方式：
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;
}
:)
于 2013-08-01T16:03:10.153 回答
2
我使用纯 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];
}
}
}
};
于 2015-04-21T21:18:27.650 回答
2
浅的
var obj = { name : "Jacob" , address : ["America"] }
var obj2 = { name : "Shaun" , address : ["Honk Kong"] }
var merged = Object.assign({} , obj,obj2 ); //shallow merge
obj2.address[0] = "new city"
result.address[0] 更改为 "new city" ，即合并对象也更改。这就是浅合并的问题。
深的
var obj = { name : "Jacob" , address : ["America"] }
var obj2 = { name : "Shaun" , address : ["Honk Kong"] }
var result = Object.assign({} , JSON.parse(JSON.stringify(obj)),JSON.parse(JSON.stringify(obj2)) )
obj2.address[0] = "new city"
result.address[0] 没有改变
于 2019-12-23T08:03:33.653 回答
2
Object.assign(TargetObject, Obj1, Obj2, ...);
于 2020-10-20T05:13:52.987 回答
1
Prototype中的正确实现应该是这样的：
var obj1 = {food: 'pizza', car: 'ford'}
var obj2 = {animal: 'dog'}
obj1 = Object.extend(obj1, obj2);
于 2009-03-13T12:48:14.157 回答
1
我有点开始使用 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;
}
于 2011-07-01T12:45:33.093 回答
1
我使用 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 检查以避免重复。
于 2013-12-04T16:42:20.597 回答
1
对于那些使用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.
于 2014-04-08T21:30:26.567 回答
1
您可以按照我的方法合并对象
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 {};
}于 2015-10-14T10:10:31.550 回答
1
JSON 兼容 JavaScript 对象的合并
我鼓励使用和利用不修改原始源的非破坏性方法，'Object.assign' 是一种破坏性方法，而且它也恰好对生产不太友好，因为它停止在早期浏览器上工作，你没有办法用另一种方法干净地修补它。
无论采用何种解决方案，合并 JS 对象总是遥不可及或不完整。但是，合并兼容 JSON 的兼容对象距离编写一段简单且可移植的代码仅一步之遥，该代码是一种将一系列 JS 对象合并到包含所有唯一属性名称及其在用于预期目的的单个主对象。
记住 MSIE8 是第一个添加了对 JSON 对象的本机支持的浏览器是一个很大的解脱，并且重用已经存在的技术总是一个受欢迎的机会。
将您的代码限制为 JSON 兼容标准对象比限制更有利，因为这些对象也可以通过 Internet 传输。当然，对于那些想要更深层次的向后兼容性的人来说，总有一个 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此相反，所有对象都保持不变并处于其原始状态（如果您做错了什么并且需要重新排序合并对象或能够在再次合并之前单独使用它们进行其他操作）。
合并参数的数量也仅受参数长度限制 [这是巨大的] 限制。原生支持的 JSON parse / stringify 已经过机器优化，这意味着：它应该比任何脚本形式的 JS 循环更快。对给定参数的迭代是使用while- 被证明是 JS 中最快的循环来完成的。
简单提一下我们已经知道唯一对象标签（键）的重复属性将被包含相同键标签的后续对象覆盖这一事实并没有什么坏处，这意味着您可以控制哪个属性正在接管通过简单地对参数列表进行排序或重新排序。以及获得干净和更新的主对象的好处，没有重复作为最终输出。
;
var obj1 = {a:1}, obj2 = {b:2}, obj3 = {c:3}
;
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() +"}" );
}
;
var master = Merge( obj1, obj2, obj3 )
;
console.log( JSON.stringify( master ) )
;于 2017-04-20T17:31:53.103 回答
1
ES5 兼容原生单行：
var merged = [obj1, obj2].reduce(function(a, o) { for(k in o) a[k] = o[k]; return a; }, {})
于 2017-04-24T18:29:34.010 回答
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;
}
这涉及的代码略少，速度也更快。
于 2018-11-07T13:16:06.043 回答
1
使用Object.assign和扩展运算符合并两个对象。
错误的方式（修改原始对象，因为针对 o1）
var o1 = { X: 10 };
var o2 = { Y: 20 };
var o3 = { Z: 30 };
var merge = Object.assign(o1, o2, o3);
console.log(merge) // {X:10, Y:20, Z:30}
console.log(o1) // {X:10, Y:20, Z:30}
正确的方法
Object.assign({}, o1, o2, o3) ==>定位新对象
{...o1, ...o2, ...o3} ==>传播对象
var o1 = { X: 10 };
var o2 = { Y: 20 };
var o3 = { Z: 30 };
console.log('Does not modify original objects because target {}');
var merge = Object.assign({}, o1, o2, o3);
console.log(merge); // { X: 10, Y: 20, Z: 30 }
console.log(o1)
console.log('Does not modify original objects')
var spreadMerge = {...o1, ...o2, ...o3};
console.log(spreadMerge);
console.log(o1);于 2019-10-14T05:13:54.360 回答
1
有不同的方法可以实现这一点：
Object.assign(targetObj, sourceObj);
targetObj = {...targetObj, ...sourceObj};
于 2020-10-06T09:42:50.273 回答
1
您可以通过三种方式做到这一点：-
方法1：-
// using spread ...
let obj1 = {
...obj2
};
方法2：-
// using Object.assign() method
let obj1 = Object.assign({}, obj2);
方法3：-
// using JSON
let obj1 = JSON.parse(JSON.stringify(obj2));
于 2021-02-11T11:20:11.520 回答
0
这合并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}}
于 2012-10-01T08:31:46.340 回答
0
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()}
于 2012-12-19T17:39:32.857 回答
0
您可以为每个对象分配一个默认合并（也许“继承”一个更好的名称）方法：
它应该与对象或实例化函数一起使用。
如果需要，下面的代码会处理覆盖合并的值：
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();
于 2013-07-29T18:57:03.937 回答
0
此解决方案创建一个新对象并能够处理多个对象。
此外，它是递归的，您可以选择要覆盖 Values和Objects的天气。
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/
于 2014-10-14T12:33:32.147 回答
0
另一种方法：
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);
}
于 2015-03-31T17:09:41.107 回答
0
如果您使用的是Dojo Toolkit，那么合并两个对象的最佳方法是使用 mixin。
下面是 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
更多详情，请混入。
于 2015-09-26T18:17:09.757 回答
0
实现此目的的一种可能方法如下。
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，将“抛出”一个“错误”
于 2015-12-30T16:40:27.813 回答
0
这是我在代码库中用来合并的内容。
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";
}
}
于 2016-01-11T09:20:26.717 回答
0
我们可以创建一个空对象，并通过以下方式组合它们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)于 2018-05-31T13:11:32.293 回答
0
使用 jQuery 库尝试这种方式
let obj1 = { food: 'pizza', car: 'ford' }
let obj2 = { animal: 'dog' }
console.log(jQuery.extend(obj1, obj2))
于 2021-05-25T14:31:33.857 回答
-1
function extend()
{
var o = {};
for (var i in arguments)
{
var s = arguments[i];
for (var i in s)
{
o[i] = s[i];
}
}
return o;
}
于 2012-06-02T14:52:19.077 回答
-2
如果您需要一个深度合并，它还将通过在结果中连接它们来“合并”数组，那么这个 ES6 函数可能就是您所需要的：
function deepMerge(a, b) {
// If neither is an object, return one of them:
if (Object(a) !== a && Object(b) !== b) return b || a;
// Replace remaining primitive by empty object/array
if (Object(a) !== a) a = Array.isArray(b) ? [] : {};
if (Object(b) !== b) b = Array.isArray(a) ? [] : {};
// Treat arrays differently:
if (Array.isArray(a) && Array.isArray(b)) {
// Merging arrays is interpreted as concatenation of their deep clones:
return [...a.map(v => deepMerge(v)), ...b.map(v => deepMerge(v))];
} else {
// Get the keys that exist in either object
var keys = new Set([...Object.keys(a),...Object.keys(b)]);
// Recurse and assign to new object
return Object.assign({}, ...Array.from(keys,
key => ({ [key]: deepMerge(a[key], b[key]) }) ));
}
}
// Sample data for demo:
var a = {
groups: [{
group: [{
name: 'John',
age: 12
},{
name: 'Mary',
age: 20
}],
groupName: 'Pair'
}],
config: {
color: 'blue',
range: 'far'
}
};
var b = {
groups: [{
group: [{
name: 'Bill',
age: 15
}],
groupName: 'Loner'
}],
config: {
range: 'close',
strength: 'average'
}
};
var merged = deepMerge(a, b);
console.log(merged);.as-console-wrapper { max-height: 100% !important; top: 0; }请注意，如果只有一个参数传递给此函数，则它充当深度克隆函数。
于 2016-12-31T11:04:17.073 回答
-2
您可以在 EcmaScript2016 中执行以下操作
更正：这是第 3 阶段的提案，但它一直对我有用
const objA = {
attrA: 'hello',
attrB: true
}
const objB = {
attrC: 2
}
const mergedObj = {...objA, ...objB}
于 2017-02-02T12:15:00.940 回答