我需要能够在运行时合并两个(非常简单)JavaScript对象。例如,我想:
var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }
obj1.merge(obj2);
//obj1 now has three properties: food, car, and animal
是否有一种内置的方法来实现这一点?我不需要递归,也不需要合并函数,只需要平面对象上的方法。
我需要能够在运行时合并两个(非常简单)JavaScript对象。例如,我想:
var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }
obj1.merge(obj2);
//obj1 now has three properties: food, car, and animal
是否有一种内置的方法来实现这一点?我不需要递归,也不需要合并函数,只需要平面对象上的方法。
当前回答
如果您需要一个深度合并,它也将通过将数组串联到结果中来“合并”数组,那么这个ES6函数可能就是您需要的:
函数deepMerge(a,b){//如果两者都不是对象,请返回其中一个:如果(对象(a)!==a&&对象(b)!==b) 返回b||a;//用空对象/数组替换剩余的基元如果(对象(a)!==a) a=Array.isArray(b)?[] : {};if(对象(b)!==b) b=Array.isArray(a)?[] : {};//区别对待阵列:if(Array.isArray(a)&&Array.isArray(b)){//合并阵列被解释为其深层克隆的串联:return[…a.map(v=>deepMerge(v)),…b.map(v=>deepMerger(v)];}其他{//获取任一对象中存在的键var keys=新集合([…Object.keys(a),…Object.key(b)]);//重复并分配给新对象return Object.assign({},…Array.from(keys,key=>({[key]:deepMerge(a[key],b[key])}));}}//演示的示例数据:变量a={组:[{组:[{name:“John”,年龄:12岁},{name:“Mary”,年龄:20岁}],groupName:'对'}],配置:{颜色:“蓝色”,范围:'远'}};变量b={组:[{组:[{name:'比尔',年龄:15岁}],groupName:'孤独者'}],配置:{范围:'关闭',强度:'平均'}};var merged=deepMerge(a,b);console.log(合并);.作为控制台包装{最大高度:100%!重要;顶部:0;}
请注意,如果只有一个参数传递给此函数,它将充当深度克隆函数。
其他回答
您可以通过以下方法合并对象
var obj1={food:‘pizza‘,car:‘ford‘};var obj2={animal:‘dog‘};var result=合并对象([obj1,obj2]);console.log(结果);document.write(“result:<pre>”+JSON.stringify(result,0,3)+“</pre>”);函数mergeObjects(objectArray){if(objectArray.length){var b=“”,i=-1;while(objectArray[++i]){var str=JSON.stringify(objectArray[i]);b+=字符串长度(1,字符串长度-1);如果(objectArray[i+1])b+=“,”;}返回JSON.parse(“{”+b+“}”);}返回{};}
你应该使用lodash的默认值Deep
_.defaultsDeep({ 'user': { 'name': 'barney' } }, { 'user': { 'name': 'fred', 'age': 36 } });
// → { 'user': { 'name': 'barney', 'age': 36 } }
ES2018/TypeScript:很多答案都可以,但当您需要合并两个对象而不覆盖重叠的对象键时,我已经找到了一个更优雅的解决方案。
我的函数还接受无限数量的对象作为函数参数进行合并:
(这里我使用的是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.exde()-Link
// Merge obj1 & obj2 to result
var result1 = $.extend( {}, obj1, obj2 );
使用_.merge()-链接
// Merge obj1 & obj2 to result
var result2 = _.merge( {}, obj1, obj2 );
使用_.exde()-链接
// Merge obj1 & obj2 to result
var result3 = _.extend( {}, obj1, obj2 );
使用Object.assign()ECMAScript 2015(ES6)-Link
// 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"}
您可以在EcmaScript2016中执行以下操作
更正:这是第三阶段的建议,但它始终对我有效
const objA = {
attrA: 'hello',
attrB: true
}
const objB = {
attrC: 2
}
const mergedObj = {...objA, ...objB}