我需要能够在运行时合并两个(非常简单)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
是否有一种内置的方法来实现这一点?我不需要递归,也不需要合并函数,只需要平面对象上的方法。
当前回答
函数扩展(o,o1,o2){如果(!(o instanceof Object))o={};副本(o,o1);如果(o2)副本(o,o2)函数isObject(obj){var type=Object.protype.toString.call(obj);return obj===对象(obj)&&type!='[object Array]'&&type!='[object函数]';};功能副本(a,b){//将o2复制到ofor(b中的var键)if(b.hasOwnProperty(键)){if(isObject(b[key])){if(!isObject(a[key]))a[key]=Object.assign({},b[key]);其他副本(a[key],b[key])}其他的a[key]=b[key];}}返回o;};变量o1={a:{foo:1},b:1},o2={a:{bar:2},b:[1],c:()=>{}},newMerged=扩展({},o1,o2);console.log(newMerged)控制台日志(o1)控制台日志(o2)
其他回答
使用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' }
实现这一点的一种可能方法如下。
if (!Object.prototype.merge){
Object.prototype.merge = function(obj){
var self = this;
Object.keys(obj).forEach(function(key){
self[key] = obj[key]
});
}
};
我不知道这是否比其他答案更好。在该方法中,将合并函数添加到对象原型。这样就可以调用obj1.merge(obj2);
注意:你应该验证你的参数,看看它是否是一个对象,并“抛出”一个正确的错误。如果不是,Object.keys将“抛出”一个“错误”
使用以下助手,可以将两个对象合并为一个新对象:
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 }
当将选项dict与函数或插件中的默认设置合并时,这通常很有用。
如果不需要支持IE 8,您可以使用Object.keys来实现相同的功能:
function extend(obj, src) {
Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
return obj;
}
这涉及的代码稍微少一点,速度也快一点。
使用object.assign和spread运算符合并两个对象。
错误的方式(修改原始对象,因为目标是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}==>扩展对象
变量o1={X:10};var o2={Y:20};var o3={Z:30};console.log('不修改原始对象,因为目标{}');var merge=对象赋值({},o1,o2,o3);console.log(合并);//{X:10,Y:20,Z:30}控制台日志(o1)console.log('不修改原始对象')var spreadMerge={…o1,…o2,…o3};console.log(spreadMerge);控制台日志(o1);
如果您需要一个深度合并,它也将通过将数组串联到结果中来“合并”数组,那么这个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;}
请注意,如果只有一个参数传递给此函数,它将充当深度克隆函数。