前端手写源码系列(三)——手写_deepClone深浅拷贝

目录

  • 一、基本类型和引用类型
  • 二、深浅拷贝概念
  • 三、浅拷贝实现方式
    • 1、Object.assign()
    • 2、Array.prototype.concat() 修改新对象会改到原对象
    • 3、Array.prototype.slice()
  • 四、深拷贝实现方式
    • 1、JSON.parse(JSON.stringify())
    • 2、手写递归方法
    • 3、函数库lodash
  • 五、手写深拷贝

一、基本类型和引用类型

基本类型:string,number,boolean,null,undefiend,symbol

引用类型:Function,Array,Object

1、基本数据类型的特点:直接存储在栈(stack)中的数据

2、引用数据类型的特点:存储的是该对象在中引用,真实的数据存放在内存里

二、深浅拷贝概念

浅拷贝就是创建一个新对象,这个对象对原始对象进行了精确拷贝。

  • 若属性是基本类型,拷贝的就是属性的
  • 若属性是引用类型,拷贝的就是内存地址
  • 若其中一个对象改变了这个地址,就会影响到另一个对象

深拷贝就是将一个对象完整的拷贝一份出来,从内存中开辟一个新的区域存放新对象,修改新对象不会影响到原对象

三、浅拷贝实现方式

1、Object.assign()

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是Object.assign()进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。

var obj = { a: {a: "kobe", b: 39} };
var initalObj = Object.assign({}, obj);
initalObj.a.a = "wade";
console.log(obj.a.a); // wade
// 注意:当object只有一层的时候,是深拷贝
let obj = {username: 'kobe'
};
let obj2 = Object.assign({},obj);
obj2.username = 'wade';
console.log(obj);//{username: "kobe"}

2、Array.prototype.concat() 修改新对象会改到原对象

3、Array.prototype.slice()

let a = ["1", "2", {age: 18,sex: "man",sports: ["football", "running", "swimming"]
}];let b = a.slice(2);
console.log(b);
// [{
// 	age: 18,
// 	sex: "man",
// 	sports:["football","running","swimming"]
// }];
b[0].age = "19"
console.log(a);
// ["1","20",{
// 	age: 19,
// 	sex: "man",
// 	sports:["football","running","swimming"]
// }];
console.log(b);
// [{
// 	age: 19,
// 	sex: "man",
// 	sports:["football","running","swimming"]
// }];

四、深拷贝实现方式

1、JSON.parse(JSON.stringify())

let a = {age: 18,sex: "man",sports: ["football", "running", "swimming"]
};let b = JSON.parse(JSON.stringify(a));
console.log(a);
//  {
// 	age: 18,
// 	sex: "man",
// 	sports:["football","running","swimming"]
// };
console.log(b);
//  {
// 	age: 18,
// 	sex: "man",
// 	sports:["football","running","swimming"]
// };
a.sports.push("basketball")
console.log(a);
//  {
// 	age: 18,
// 	sex: "man",
// 	sports:["football","running","swimming","basketball"]
// };
console.log(b);
//  {
// 	age: 18,
// 	sex: "man",
// 	sports:["football","running","swimming"]
// };

对数组深拷贝之后,改变原数组不会影响到拷贝之后的数组。

但是该方法有以下几个问题。

(1)、会忽略 undefined

(2)、会忽略 symbol

(3)、不能序列化函数

(4)、不能解决循环引用的对象

(5)、不能正确处理new Date()

(6)、不能处理正则

2、手写递归方法

3、函数库lodash

const _ = require('lodash');
let originalObject = {name: 'John',age: 30,address: {city: 'Beijing',zipCode: '10001'}
};
let clonedObject = _.cloneDeep(originalObject);
console.log(clonedObject); // 输出: { name: 'John', age: 30, address: { city: 'Beijing', zipCode: '10001' } }
console.log(clonedObject === originalObject); // 输出: false,表明两个对象不是同一个
console.log(clonedObject.address === originalObject.address); // 输出: false,表明地址对象也是深拷贝的

五、手写深拷贝

面试简版:

function deepClone(obj) {// 如果是 值类型 或 null,则直接returnif(typeof obj !== 'object' || obj === null) {return obj}// 定义结果对象let copy = {}// 如果对象是数组,则定义结果数组if(obj instanceof Array) {copy = []}// 遍历对象的keyfor(let key in obj) {// 如果key是对象的自有属性if(obj.hasOwnProperty(key)) {// 递归调用深拷贝方法copy[key] = deepClone(obj[key])}}return copy
}

调用深拷贝方法,若属性为类型,则直接返回;若属性为引用类型,则递归遍历。这就是我们在解这一类题时的核心的方法。

进阶版:

  • 解决拷贝循环引用问题
  • 解决拷贝对应原型问题
// 递归拷贝 (类型判断)
function deepClone(value,hash = new WeakMap){ // 弱引用,不用map,weakMap更合适一点// null 和 undefiend 是不需要拷贝的if(value == null){ return value;}if(value instanceof RegExp) { return new RegExp(value) }if(value instanceof Date) { return new Date(value) }// 函数是不需要拷贝if(typeof value != 'object') return value;let obj = new value.constructor(); // [] {}// 说明是一个对象类型if(hash.get(value)){return hash.get(value)}hash.set(value,obj);for(let key in value){ // in 会遍历当前对象上的属性 和 __proto__指代的属性// 补拷贝 对象的__proto__上的属性if(value.hasOwnProperty(key)){// 如果值还有可能是对象 就继续拷贝obj[key] = deepClone(value[key],hash);}}return obj// 区分对象和数组 Object.prototype.toString.call
}
// testvar o = {};
o.x = o;
var o1 = deepClone(o); // 如果这个对象拷贝过了 就返回那个拷贝的结果就可以了
console.log(o1);

完整版:

const getType = obj => Object.prototype.toString.call(obj);const isObject = (target) => (typeof target === 'object' || typeof target === 'function') && target !== null;const canTraverse = {'[object Map]': true,'[object Set]': true,'[object Array]': true,'[object Object]': true,'[object Arguments]': true,
};
const mapTag = '[object Map]';
const setTag = '[object Set]';
const boolTag = '[object Boolean]';
const numberTag = '[object Number]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';
const dateTag = '[object Date]';
const errorTag = '[object Error]';
const regexpTag = '[object RegExp]';
const funcTag = '[object Function]';const handleRegExp = (target) => {const { source, flags } = target;return new target.constructor(source, flags);
}const handleFunc = (func) => {// 箭头函数直接返回自身if(!func.prototype) return func;const bodyReg = /(?<={)(.|\n)+(?=})/m;const paramReg = /(?<=\().+(?=\)\s+{)/;const funcString = func.toString();// 分别匹配 函数参数 和 函数体const param = paramReg.exec(funcString);const body = bodyReg.exec(funcString);if(!body) return null;if (param) {const paramArr = param[0].split(',');return new Function(...paramArr, body[0]);} else {return new Function(body[0]);}
}const handleNotTraverse = (target, tag) => {const Ctor = target.constructor;switch(tag) {case boolTag:return new Object(Boolean.prototype.valueOf.call(target));case numberTag:return new Object(Number.prototype.valueOf.call(target));case stringTag:return new Object(String.prototype.valueOf.call(target));case symbolTag:return new Object(Symbol.prototype.valueOf.call(target));case errorTag: case dateTag:return new Ctor(target);case regexpTag:return handleRegExp(target);case funcTag:return handleFunc(target);default:return new Ctor(target);}
}const deepClone = (target, map = new WeakMap()) => {if(!isObject(target)) return target;let type = getType(target);let cloneTarget;if(!canTraverse[type]) {// 处理不能遍历的对象return handleNotTraverse(target, type);}else {// 这波操作相当关键,可以保证对象的原型不丢失!let ctor = target.constructor;cloneTarget = new ctor();}if(map.get(target)) return target;map.set(target, true);if(type === mapTag) {//处理Maptarget.forEach((item, key) => {cloneTarget.set(deepClone(key, map), deepClone(item, map));})}if(type === setTag) {//处理Settarget.forEach(item => {cloneTarget.add(deepClone(item, map));})}// 处理数组和对象for (let prop in target) {if (target.hasOwnProperty(prop)) {cloneTarget[prop] = deepClone(target[prop], map);}}return cloneTarget;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/878128.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux系统(centos7)增加一个开机自启任务

任务背景 已经上线了一个java的springboot项目&#xff0c;使用start.sh脚本进行启动&#xff0c;脚本内容为&#xff1a; #!/bin/bashnohup java -jar /opt/javaProject/PracticeSpring-0.0.1-SNAPSHOT.jar > /opt/javaProject/run.log 2>&1 & 现在&#xff…

16岁激活交学费银行卡需要本人实名电话卡,线下营业厅不给办,怎么办?

16岁激活交学费银行卡需要本人实名电话卡&#xff0c;线下营业厅不给办&#xff0c;怎么办&#xff1f; 话卡办理规定&#xff1a; 根据《民法典》和《电话用户真实身份信息登记规定》的相关要求&#xff0c;未满16周岁的用户通常需要在监护人的陪同下办理电话卡&#xff0c;并…

uniapp微信小程序 分享功能

uniapp https://zh.uniapp.dcloud.io/api/plugins/share.html#onshareappmessage export default {onShareAppMessage(res) {if (res.from button) {// 来自页面内分享按钮console.log(res.target)}return {title: 自定义分享标题,path: /pages/test/test?id123}} }需要再真机…

IntelliJ IDEA智能代码补全​和集成AI助手说明及操作

IntelliJ IDEA的智能代码补全和集成AI助手是开发者提高编码效率和代码质量的重要工具。以下是对这些功能的详细说明及操作指南&#xff1a; 一、智能代码补全 1. 功能说明 IntelliJ IDEA的智能代码补全功能利用先进的算法和上下文分析&#xff0c;为开发者提供准确、快速的代…

程序猿必备技能-Bat脚本

Batch 脚本&#xff08;批处理脚本&#xff09;是在 Windows 操作系统中使用的一种脚本语言&#xff0c;用于自动化执行一系列命令。Batch 脚本是由 .bat 或 .cmd 文件扩展名标识的文本文件&#xff0c;这些文件可以被 Windows 的命令行解释器&#xff08;如 cmd.exe&#xff0…

衡石科技BI的API如何授权文档解析

授权说明​ 授权模式​ 使用凭证式&#xff08;client credentials&#xff09;授权模式。 授权模式流程说明​ 第一步&#xff0c;A 应用在命令行向 B 发出请求。 第二步&#xff0c;B 网站验证通过以后&#xff0c;直接返回令牌。 授权模式结构说明​ 接口说明​ 获取a…

shell之getopts

getopts 是一个常用于解析命令行选项的bash内建命令。它的基本语法是&#xff1a; getopts optstring name [arg...]optstring列出了对应的Shell Script可以识别的所有参数。比如&#xff1a; 如果 Shell Script可以识别-a&#xff0c;-f以及-s参数&#xff0c;则optstring就是…

【贪心 决策包容性 】757. 设置交集大小至少为2

本文涉及知识点 贪心 决策包容性 LeetCode757. 设置交集大小至少为2 给你一个二维整数数组 intervals &#xff0c;其中 intervals[i] [starti, endi] 表示从 starti 到 endi 的所有整数&#xff0c;包括 starti 和 endi 。 包含集合 是一个名为 nums 的数组&#xff0c;并…

Quasar V2.16.4 新版发布,基于 Vue 3 的前端开发框架,一套代码发布到多端

Quasar 又发布新版本了&#xff0c;性能优秀的 Vue 组件开发框架&#xff0c;时隔3年再次推荐给大家。 早在2021年&#xff0c;我就写了一篇简单的文章向大家推荐了 Quasar 这款 Vue.js 开发框架&#xff0c;如今3年过去了&#xff0c;Quasar 发展得很好&#xff0c;更新频率依…

H5开发有哪些技巧?

随着现代社会的飞速发展&#xff0c;网页开发已经从传统的HTML、CSS、JavaScript往H5发展。H5也称为HTML5&#xff0c;可以理解为是HTML的升级版&#xff0c;具有更加优秀的性能、更加完善的功能和更加多样的体验。因其灵活性和跨平台特性&#xff0c;成为了各类移动应用和网页…

数学建模学习(128):使用Python结合CILOS与熵法的多准则决策权重确定

本文介绍方法为:结合CILOS与熵法的多准则决策权重,请理解为主,代码可以当作模板使用。 文章目录 1 引言2 问题背景2.1. 熵法 (Entropy Method)2.2 准则影响损失法 (CILOS Method)2.3 Python代码实现2.4 结果的决策指导意义2.4 结论参考文献1 引言 多准则决策(Multi-Criter…

面试常问! transformer中dk的大小,以及为什么设成这样,维度,原文分析。

目录&#xff1a; 原文 &#xff1a;翻译&#xff1a;流程&#xff1a;原因&#xff1a; 原文(多头注意力部分) &#xff1a; 李沐b站论文精读 论文网盘下载&#xff1a;链接 提取码: vm3d 翻译&#xff1a; 在这项工作中&#xff0c;我们采用了 h8 个并行注意力层&#xff…

flutter之image_picker上传图片

原文地址 image_picker 安装 image_picker: ^1.1.2使用 我们获取到上传的照片后,将其转为base64编码的格式,方便后续使用 // source: 接收两种模式,相册和拍照final pickedImage =await

No module named ‘comtypes‘

No module named comtypes 报错解释&#xff1a; 这个错误表明Python解释器无法找到名为comtypes的模块。comtypes是一个Python库&#xff0c;用于处理COM类型库&#xff0c;特别是用于与Windows COM组件交互。如果你的代码或者你尝试运行的程序需要使用comtypes库&#xff0…

Linux远程管理—SSH协议

SSH协议是远程连接的安全性协议&#xff0c;该协议可以有效防止远程管理过程中的信息泄漏&#xff0c;是西安传输数据加密&#xff0c;能够防止DNS和IP欺骗&#xff0c;传输数据压缩&#xff0c;加快传输速度。 安全验证方法有口令验证和密钥验证两种实现手段&#xff0c;该协…

线上剧本杀小程序,线上游戏新体验

剧本杀作为当下热门的社交型游戏方式&#xff0c;成为了大众社交娱乐的选择&#xff0c;为大众带来新的游戏体验。在数字化发展时期&#xff0c;线上剧本杀为大众带来了新鲜的游戏体验&#xff0c;它打破了时间空间限制&#xff0c;让玩家在手机上体验虚拟游戏&#xff0c;通过…

Python的可选导入 optional import

Python的可选导入&#xff1a;提升代码可读性与简洁性的利器 在Python编程中&#xff0c;我们常常会使用到各种库和模块。为了方便使用这些库和模块&#xff0c;我们需要通过导入语句将其引入到我们的程序中。然而&#xff0c;随着项目规模的增大&#xff0c;导入语句可能会变…

Oracle发邮件时SMTP服务器配置方法与步骤?

Oracle发邮件功能如何配置&#xff1f;如何优化Oracle发信性能&#xff1f; 为了实现自动化报告和通知&#xff0c;Oracle发邮件功能变得尤为重要。通过配置SMTP服务器&#xff0c;Oracle可以轻松地发送电子邮件。AokSend将详细介绍如何配置Oracle发邮件时的SMTP服务器&#x…

音频处理新纪元:深入探索PyTorch的torchaudio

音频处理新纪元&#xff1a;深入探索PyTorch的torchaudio 在深度学习领域&#xff0c;音频数据的处理和分析正变得越来越重要。PyTorch&#xff0c;作为一个强大的机器学习库&#xff0c;通过其torchaudio扩展包&#xff0c;提供了一套完整的工具来处理和分析音频数据。本文将…

IDEA 编译项目时卡在Parsing java,最终报out of memory

今天在项目运行的时候莫名其妙报错&#xff1a; 报错内容&#xff1a; java.lang.OutOfMemoryError: GC overhead limit exceeded原因&#xff1a; 通常是因为堆内存太小&#xff0c;无法有效管理正在创建和销毁的对象。 解决方法&#xff1a; 在 IDEA 的安装目录下找到 bi…