JS深拷贝与对象比较简单实现

2023-10-24 13:28

本文主要是介绍JS深拷贝与对象比较简单实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近在看《现代JavaScript库开发》,第一章深拷贝函数如下:

function clone(source) {const aType = type(source);if (aType !== 'array' && aType !== 'object') {return source;}let target;if (aType === 'object') {target = {};for(let k in source){if (source.hasOwnProperty(k)) {target[k] = clone(source[k]);}}} else {target = [];for (let i in source) {target[i] = clone(source[i]);}}return target;}function type(a) {return Object.prototype.toString.call(a).slice(8, -1).toLowerCase();
}const a = {age: 14, name: 'zs'};
const b = clone(a);
a.age = 28;
a.name = 'ls';console.log(b)

这是个基础版,不过还是很有学习空间的,于是自己接着这个思路也Mock了一个isEqual函数:

function equal(c1, c2) {const c1Type = type(c1);const c2Type = type(c2);if (c1Type !== c2Type) {return false;}if (c1Type !== 'array' && c1Type !== 'object') {return c1 === c2;}if (!compareKeysArray(Object.keys(c1), Object.keys(c2))) {return false;}for (let k in c1) {if (!equal(c1[k], c2[k])) {return false;}}return true;}function compareKeysArray(arr1, arr2) {arr1.sort();arr2.sort();if (arr1.length !== arr2.length) {return false;}for (let [i, v] of arr1.entries()) {if (v !== arr2[i]) {return false;}}return true;
}function type(a) {return Object.prototype.toString.call(a).slice(8, -1).toLowerCase();
}const obj1 = { a: 1, b: 2, c: undefined };
const obj2 = { b: 2, d: undefined, a: 1 };
console.log(equal(obj1, obj2));

这个只是beta版,感觉还有很多优化空间。后续有更新了再补充。

还有一种流传的方法就是使用JSON.stringify,但是当key的顺序不一样的时候就尴尬了:

const obj1 = { a: 1, b: 2, c: undefined };
const obj2 = { b: 2, c: undefined, a: 1 };
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // false

这篇关于JS深拷贝与对象比较简单实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/275462

相关文章

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)

《C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)》本文主要介绍了C#集成DeepSeek模型实现AI私有化的方法,包括搭建基础环境,如安装Ollama和下载DeepS... 目录前言搭建基础环境1、安装 Ollama2、下载 DeepSeek R1 模型客户端 ChatBo

Qt实现发送HTTP请求的示例详解

《Qt实现发送HTTP请求的示例详解》这篇文章主要为大家详细介绍了如何通过Qt实现发送HTTP请求,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、添加network模块2、包含改头文件3、创建网络访问管理器4、创建接口5、创建网络请求对象6、创建一个回复对

C++实现回文串判断的两种高效方法

《C++实现回文串判断的两种高效方法》文章介绍了两种判断回文串的方法:解法一通过创建新字符串来处理,解法二在原字符串上直接筛选判断,两种方法都使用了双指针法,文中通过代码示例讲解的非常详细,需要的朋友... 目录一、问题描述示例二、解法一:将字母数字连接到新的 string思路代码实现代码解释复杂度分析三、

grom设置全局日志实现执行并打印sql语句

《grom设置全局日志实现执行并打印sql语句》本文主要介绍了grom设置全局日志实现执行并打印sql语句,包括设置日志级别、实现自定义Logger接口以及如何使用GORM的默认logger,通过这些... 目录gorm中的自定义日志gorm中日志的其他操作日志级别Debug自定义 Loggergorm中的

Spring Boot整合消息队列RabbitMQ的实现示例

《SpringBoot整合消息队列RabbitMQ的实现示例》本文主要介绍了SpringBoot整合消息队列RabbitMQ的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的... 目录RabbitMQ 简介与安装1. RabbitMQ 简介2. RabbitMQ 安装Spring

Gin框架中的GET和POST表单处理的实现

《Gin框架中的GET和POST表单处理的实现》Gin框架提供了简单而强大的机制来处理GET和POST表单提交的数据,通过c.Query、c.PostForm、c.Bind和c.Request.For... 目录一、GET表单处理二、POST表单处理1. 使用c.PostForm获取表单字段:2. 绑定到结

springMVC返回Http响应的实现

《springMVC返回Http响应的实现》本文主要介绍了在SpringBoot中使用@Controller、@ResponseBody和@RestController注解进行HTTP响应返回的方法,... 目录一、返回页面二、@Controller和@ResponseBody与RestController

nginx中重定向的实现

《nginx中重定向的实现》本文主要介绍了Nginx中location匹配和rewrite重定向的规则与应用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下... 目录一、location1、 location匹配2、 location匹配的分类2.1 精确匹配2

Nginx之upstream被动式重试机制的实现

《Nginx之upstream被动式重试机制的实现》本文主要介绍了Nginx之upstream被动式重试机制的实现,可以通过proxy_next_upstream来自定义配置,具有一定的参考价值,感兴... 目录默认错误选择定义错误指令配置proxy_next_upstreamproxy_next_upst