web前端高级JavaScript - 对象的深合并与浅合并

本是古典何须时尚 2022-12-22 08:52 93阅读 0赞

### 数据类型检测方法封装 ###

> 在讲对象的深合并与浅合并前，我们先来封装几个数据类型检测的方法，便于后面使用。  
> 以下所有封装的方法在 [ JQuery源码分析 - 数据类型检测方法封装（数字、对象、数组类数组）][JQuery_ -]中已经有详细讲解。这里就不再多述。

*  通用数据类型检测toType

var class2type = { };
    var toString = class2type.toString;
    var mapType = ["Boolean", "Number", "String", "Function", "Array", "Date", "RegExp", "Object", "Error", "Symbol"];
    mapType.forEach(function(name){ 
    	class2type["[object "+name+"]"] = name.toLowerCase();
    });
    function toType(obj){ 
    	if(obj == null) { 
    		return obj + "";
    	};
    	return typeof obj === "object" || typeof obj === "function" ?
    		class2type[toString.call(obj)] || "object" : typeof obj;
    }

*  检测是否是纯对象isPlainObject

function isPlainObject(obj){ 
    	var proto, Ctor;
    	if(!obj || Object.prototype.toString.call(obj) !== "[object Object]"){ 
    		return false;
    	}
    	proto = Object.getPrototypeOf(obj);
    	if(!proto) return true;
    	Ctor = Object.prototype.hasOwnProperty.call(proto, "constructor") && proto.constructor;
    	return typeof Ctor === "function" && Function.prototype.toString.call(Ctor) === Function.prototype.toString.call(Object);	
    }

### 对象的浅合并 ###

> 对象的浅合并就是指：在将两个对象进行合并时，将其中一个对象中的每一项替换到另一个对象中，而不管对象中是否还有子对象，则都只替换第一层。例如：

let obj1 = { 
    	name:'Alvin',
    	age: 18,
    	friends:{ 
    		name:'张三',
    		age: 18,
    		friends2: { 
    			name:'李四',
    			age: 20
    		}
    	}
    }
    
    let obj2 = { 
    	name: 'Yannis',
    	age: 30,
    	sex: '女',
    	friends:{ 
    		name: 'Alvin',
    		sex: '男',
    		friends2:{ 
    			sex: '女'
    		}		
    	}
    }

> 在上面的两个对象进行浅合并时，会将obj2中的每一项键和值替换到obj1中，但是既然是浅合并，则只会把第一层级的键和值进行合并和替换，而其它层级的则不再进行合并而是直接替换。  
> **合并规律：**
> 
>  *  obj1 和 obj2都是对象，则遍历obj2依次替换obj1（但只是第一层级）
>  *  obj1不是对象，obj2是对象，则以obj2为准替换obj1
>  *  obj1是对象，obj2不是对象，则以obj1为准
>  *  obj1 和 obj2都不是对象，则直接用obj2替换obj1
> 
> 上面代码中合并后的结果为：

let objMerge = { 
    	name: 'Yannis',//替换obj1中的值
    	age: 30,//替换obj1中的值
    	sex: '女',//obj2中原有的键和值进行合并
    	friends:{ //obj2中原有的键和值直接替换，不再往下合并
    		name: 'Alvin',
    		sex: '男',
    		friends2:{ //obj2中原有的键和值直接替换，不再往下合并
    			sex: '女'
    		}		
    	}
    }

*  对象浅合并代码实现：

function shallowMerge(obj1, obj2){ 
    	var isPlain1 = isPlainObject(obj1);
    	var isPlain2 = isPlainObject(obj2);
    	//只要obj1不是对象，那么不管obj2是不是对象，都用obj2直接替换obj1
    	if(!isPlain1) return obj2;
    	//走到这一步时，说明obj1肯定是对象，那如果obj2不是对象，则还是以obj1为主
    	if(!isPlain2) return obj1;
    	//如果上面两个条件都不成立，那说明obj1和obj2肯定都是对象， 则遍历obj2 进行合并
    	let keys = [
    		...Object.keys(obj2),
    		...Object.getOwnPropertySymbols(obj2)
    	]
    	keys.forEach(function(key){ 
    		obj1[key] = obj2[key];
    	});
    	
    	return obj1;
    }

### 对象的深合并 ###

> 通过上面我们对浅合并的理解，相信对深合并差不多也有一些概念了。深合并则是把对象的每一个层级的键和值都会按照浅合并的规则进行替换和合并，不管对象中有多少层级，都会递归去合并。  
> **合并规律：**
> 
>  *  obj1 和 obj2都是对象，则遍历obj2依次替换obj1（每一层级）
>  *  obj1不是对象，obj2是对象，则以obj2为准替换obj1
>  *  obj1是对象，obj2不是对象，则以obj1为准
>  *  obj1 和 obj2都不是对象，则直接用obj2替换obj1
> 
> 还是上面代码在进行深合并后的结果为：

let objMerge = { 
    	name: 'Yannis',//替换obj1中的值
    	age: 30,//替换obj1中的值
    	sex: '女',//obj2中原有的键和值进行合并
    	friends:{ //继续往下合并
    		name: 'Alvin',//obj2中的值合并过来
    		age: 18, //obj1中原有的值
    		sex: '男',//obj2中的值合并过来
    		friends2:{ //继续往下合并
    			name:'李四',//obj1中原有的值
    			age: 20,//obj1中原有的值
    			sex: '女'//obj2中的值合并过来
    		}		
    	}
    }

*  对象深合并代码实现：

function deepMerge(obj1, obj2){ 
    	var isPlain1 = isPlainObject(obj1);
    	var isPlain2 = isPlainObject(obj2);
    	//obj1或obj2中只要其中一个不是对象，则按照浅合并的规则进行合并
    	if(!isPlain1 || !isPlain2) return shallowMerge(obj1, obj2);
    	//如果都是对象，则进行每一层级的递归合并
    	let keys = [
    		...Object.keys(obj2),
    		...Object.getOwnPropertySymbols(obj2)
    	]
    	keys.forEach(function(key){ 
    		obj1[key] =  deepMerge(obj1[key], obj2[key]);//这里递归调用
    	});
    	
    	return obj1;
    }

> 上面代码完全可以实现对象的深合并了，但是在js中运行自己引用自己，比如：let obj = \{name:‘louyaqian’\}; obj.obj1 = obj;  
> 为了防止这种死循环，我们还需再加一些逻辑

function deepMerge(obj1, obj2, cache){ 
    	//防止死循环，这里需要把循环过的对象添加到数组中
    	cache = !Array.isArray(cache) ? [] : cache;
    	//因为后面只对obj2进行遍历，所以这里只要判断obj2就可以了，如果obj2已经比较合并过了则直接返回obj2，否则在继续合并 
    	if(cache.indexOf(obj2)) return obj2;
    	cache.push(obj2);
    	var isPlain1 = isPlainObject(obj1);
    	var isPlain2 = isPlainObject(obj2);
    	//obj1或obj2中只要其中一个不是对象，则按照浅合并的规则进行合并
    	if(!isPlain1 || !isPlain2) return shallowMerge(obj1, obj2);
    	//如果都是对象，则进行每一层级的递归合并
    	let keys = [
    		...Object.keys(obj2),
    		...Object.getOwnPropertySymbols(obj2)
    	]
    	keys.forEach(function(key){ 
    		obj1[key] =  deepMerge(obj1[key], obj2[key], cache);//这里递归调用
    	});
    	
    	return obj1;
    }

[JQuery_ -]: https://blog.csdn.net/lixiaosenlin/article/details/109996711

发表评论取消回复

表情：

评论列表（有 0 条评论，93人围观）

还没有评论，来说两句吧...

相关阅读

相关《现代Javascript高级教程》JavaScript深拷贝与浅拷贝

<table> <thead> <tr> <th><a href="https://www.coding-time.cn" rel="nofollow">点击

我不是女神ヾ/ 2023年10月13日 11:12/ 0 赞/ 17 阅读

相关 js 对象合并与数组合并

在 JavaScript 中，对象和数组都是非常常见的数据结构，它们可以用来存储和操作数据。有时候我们需要将两个对象或数组合并在一起，以便更好地进行操作。本文将会介绍如何在 J

深碍√TFBOYSˉ_/ 2023年09月25日 21:45/ 0 赞/ 49 阅读

相关 JavaScript 学习笔记《合并对象，合并数组》

JavaScript 学习笔记《合并对象，合并数组》合并对象 Object.assign() 展开语法合并数组 A

╰半橙微兮°/ 2022年12月27日 07:59/ 0 赞/ 247 阅读

相关 web前端高级JavaScript - 对象的深合并与浅合并

数据类型检测方法封装 > 在讲对象的深合并与浅合并前，我们先来封装几个数据类型检测的方法，便于后面使用。 > 以下所有封装的方法在 [ JQuery源码分析 - 数据

本是古典何须时尚/ 2022年12月22日 08:52/ 0 赞/ 94 阅读

相关 web前端高级JavaScript - 数组和对象的浅克隆与深克隆

浅克隆 > 浅克隆是指：只克隆数组/对象的第一层级内容（开辟新的堆内存），而第二层级及以上层级的内容则直接引用（使用原来第二层级及以上层级的堆内存）。如果对克隆后对象的二

╰半夏微凉°/ 2022年12月22日 02:29/ 0 赞/ 145 阅读

相关 javaScript中合并多个对象

![afb2fe35a1f20dca28adcbb615230408.png][] 1.利用assign合并多个对象，第一个参数为目标对象，后面可以有多个源对象。

快来打我*/ 2022年12月15日 11:03/ 0 赞/ 182 阅读

相关 php 合并对象_PHP合并数组对象

我有一些问题如何合并这个数组。可以帮助我吗？PHP合并数组对象第一阵列： Array ( \[22\] => WP\_Post Object ( \[ID\] =

妖狐艹你老母/ 2022年11月12日 05:22/ 0 赞/ 225 阅读

相关 JavaScript 数组对象深拷贝与浅拷贝

JavaScript 数组对象深拷贝与浅拷贝 1.浅拷贝 var data = \["11","22","33","44"\]; var tempD

╰+攻爆jí腚メ/ 2022年06月07日 01:50/ 0 赞/ 222 阅读

相关 Javascript 对象（object）合并

原文出处： [https://www.cnblogs.com/yes-V-can/p/5631645.html][https_www.cnblogs.com_yes-V-can

亦凉/ 2022年05月23日 02:54/ 0 赞/ 298 阅读

相关 vue.js数组追加合并与对象追加合并

因为一直用到所以附上了 ![1317388-20180416141625658-91031725.png][] ![1317388-20180416141635610

谁借莪１个温暖的怀抱￠/ 2021年11月23日 15:26/ 0 赞/ 385 阅读