js深度对象合并，深度赋值、拷贝
问题场景
平时我们在处理纯粹对象（键值对对象/JSON）时，如果使⽤Object.assign或者对象解构赋值，只会合并第⼀层的数据，⽽当合并嵌套对象，将会直接覆盖掉前⾯被合并对象⾥的数据，这是因为Object.assign和对象解构赋值都是只有第⼀层属于深拷贝，⽽往下都是浅拷贝，例如：
var obj1 ={ a:{ b:1, c:1}};
var obj2 ={ a:{ b:2}};
var obj3 ={};
// Object.assign
Object.assign(obj3, obj1, obj2);
console.log(obj3);// { a: { b: 2 } }
// 解构
obj3 ={...obj1,...obj2 };
console.log(obj3);// { a: { b: 2 } }
可以看到，obj1⾥⾯的a属性被覆盖了，直接替换成了最后⼀个对象（obj2）⾥的a，即：{ b: 2 } 。
解决⽅法（代码）
// 判断是否是纯粹对象
const isPlainObject= obj =>{
return String.call(obj)==='[object Object]'
}
// 主函数
js合并两个数组function assignDeep(){
const args = Array.from(arguments);
if(args.length <2)return args[0];
let result = args[0];
args.shift();
args.forEach(item =>{
if(isPlainObject(item)){
if(!isPlainObject(result)) result ={}
for(let key in item){
if(result[key]&&isPlainObject(item[key])){
result[key]=assignDeep(result[key], item[key])
}else{
result[key]= item[key]
}
}
}
else if(item instanceof Array){
if(!(result instanceof Array)) result =[]
item.forEach((arrItem, arrIndex)=>{
if(isPlainObject(arrItem)){
result[arrIndex]=assignDeep(result[arrIndex])
}else{
result[arrIndex]= arrItem
}
})
}
})
return result;
}
调⽤⽰例和结果
var obj1 ={ a:{ b:1, c:1}};
var obj2 ={ a:{ b:2}};
var obj3 ={};
// 调⽤assignDeep⽅法
assignDeep(obj3, obj1, obj2);
console.log(obj3);// { a: { b: 2, c: 1 } }
var obj4 ={ a:{ b:1, c:[1,2,3]}};
var obj5 ={ a:{ b:2, c:[1,4], d:'d'}};
assignDeep(obj4,obj5);// { a: { b: 2, c: [1, 4], d:'d' } };
var obj6 =[1,2,3];
var obj7 =[4,5];
assignDeep(obj6, obj7);// [4,5,3]
assignDeep()⽅法可以解决多数常⽤数据类型（包括数组）的对象的赋值合并操作

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。