js引用类型深拷贝、浅拷贝方法封装
引用类型的深拷贝、浅拷贝在前端领域一直是个很重要的知识点,不仅在业务中频繁使用,也是面试官们喜欢考的的知识点之一。本篇将封装引用类型的深拷贝、浅拷贝方法,并解决在封装过程中出现的问题。
一、浅拷贝
浅拷贝一般比较简单,缺点也很明显,引用类型的属性并不是真正的拷贝,而是拷贝的引用地址,改变一个当中的属性值,另一个也跟着变化。
方法封装:
/**
* 浅拷贝
* @param {*} target
* @returns
*/
export function clone (target) {
if (target instanceof Array) {
// return [...target]
// return target.slice()
// return [].concat(target)
// return Array.from(target)
// return target.filter(value => true)
// return target.map(item => item)
return target.reduce((pre, item) => {
pre.push(item)
return pre
}, [])
} else if (target!==null && typeof target==='object') {
return {...target}
} else {// 如果不是数组或对象, 直接返回
return target
}
}
为了解决浅拷贝的痛点,于是就有了深拷贝,可以拷贝引用类型的属性,且互相独立,互不影响。
二、深拷贝(3种方法)
- JSON.parse(JSON.stringify(obj))
- 递归
- 递归+缓存池
1.JSON.parse(JSON.stringify(obj)):JSON.stringify把对象转成字符串,再用JSON.parse把字符串转成新的对象
export function deepClone1 (target) {
return JSON.parse(JSON.stringify(target))
}
这种深拷贝的方式我平时业务中也经常使用,但使用的前提是对拷贝的对象属性非常清楚,属性中不能包含函数,因为function没办法转化为json格式的对象,所以函数属性会丢失!
还有一个缺陷就是,如果拷贝的对象属性中包含自己(循环引用),在深拷贝的时候会陷入死循环。
深拷贝后:
2.利用递归来进行深拷贝
export function deepClone2 (target) {
// 被处理的目标是数组/对象
if (target instanceof Array || (target!==null && typeof target==='object')) {
const cloneTarget = target instanceof Array ? [] : {}
for (const key in target) {
if (target.hasOwnProperty(key)) {
cloneTarget[key] = deepClone2(target[key]) // 对属性值进行递归处理
}
}
return cloneTarget
} else {
return target
}
}
打印结果1:解决函数属性丢失
打印结果2:死循环问题没有解决
3.利用“缓存池”来解决循环引用造成的死循环
export function deepClone3 (target, map=new Map()) {
// 被处理的目标是数组/对象
if (target instanceof Array || (target!==null && typeof target==='object')) {
// map中存在对应的克隆对象, 形成一个缓存池,如果当前对象存在,则返回
let cloneTarget = map.get(target)
if (cloneTarget) {
return cloneTarget // 不要对同一个对象进行多次clone
}
// 创建克隆对象
if (target instanceof Array) {
cloneTarget = []
// 保存到map容器
map.set(target, cloneTarget)
// 向数组添加元素
target.forEach((item, index) => {
cloneTarget[index] = deepClone(item, map)
})
} else {
cloneTarget = {}
// 保存到map容器
map.set(target, cloneTarget)
// 向对象添加属性
for (const key in target) {
if (target.hasOwnProperty(key)) {
cloneTarget[key] = deepClone(target[key], map) // 对属性值进行递归处理
}
}
} return cloneTarget
} else {
return target
}
}
打印结果:
利用缓存池来解决引用类型的循环引用问题,每个引用类型只拷贝一次,这样就不会陷入死循环了。
以上就是我对js中引用类型深拷贝和浅拷贝的理解和封装了,如果你有更好的方案欢迎留言指教!
脚踏实地行,海阔天空飞
js引用类型深拷贝、浅拷贝方法封装的更多相关文章
- 一篇文章彻底说清JS的深拷贝/浅拷贝
一篇文章彻底说清JS的深拷贝and浅拷贝 这篇文章的受众 第一类,业务需要,急需知道如何深拷贝JS对象的开发者. 第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者. 写给第一类读者 你只需要一 ...
- iOS OC和JS的交互 javaScriptCore方法封装
一.javaScriptCore javaScriptCore是一种JavaScript引擎,主要为webKit提供脚本处理能力,javaScriptCore是开源webkit的一部分,他提供了强大的 ...
- 前端js重组树形结构数据方法封装
不知道大家平时工作中,有没有遇到这样一种情况:后端接口返回的数据,全都是一维的数组,都是平铺直叙式的数据,业务需求却要你实现树形结构的功能.那么,针对这种情况该怎么办呢?是跟后台好好沟通一下呢,还是沟 ...
- js浮点数保留位数方法封装
大家在平时业务中应该经常跟小数打交道吧,有没有被小数点的保留位数问题搞得头疼啊.比如,保留一位小数,保留俩位小数,保留三位小数,向上取整.四舍五入等等. 而我最近在项目中正好遇到类似的问题:有的地方要 ...
- js 检查登录态方法封装(闭包、状态缓存)
前端页面开发时,经常需要异步校验登录态,每次都重新copy之前写的方法,比较繁琐不好维护,固将登录态校验封装成一个js. (function(){ //登录状态 1 登录态有效 2 登录态无效 3 请 ...
- 封装getByClass(JS获取class的方法封装为一个函数)
获取方法一(普通版) 获取单一的class: function getByClass(oParent, sClass) {//两个形参,第一个对象oParent 第二个样式名class var aEl ...
- 从JS的深拷贝与浅拷贝到jq的$.extend()方法
一.堆内存与栈内存 堆和栈都是内存中划分出来的用来存储的区域,栈为自动分配的内存空间,它由系统自动释放,堆为动态分配的内存,大小不定也不会自动释放. 二.js基本数据类型与引用类型的不同 基本数据类型 ...
- js对象进行浅复制,深拷贝的方法
js对象浅拷贝和深拷贝详解 本文为大家分享了JavaScript对象的浅拷贝和深拷贝代码,供大家参考,具体内容如下 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷 ...
- JS 中深拷贝的几种实现方法
JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...
随机推荐
- 单片机引脚扩展芯片74HC595手工分解实验
我们先来看下效果 74HC595是常用的串转并芯片,支持芯片级联实现少量IO口控制多个IO口输出功能 14脚:DS,串行数据输入引脚 13脚:OE, 输出使能控制脚,它是低电才使能输出,所以接GND ...
- js 对json数据进行检索 插件 linq.js
有时界面需要很多数据.但是多次访问服务器效率很低,所以需要检索json数据,最好是像sql查询语句那种 linq.js 插件 LINQ,语言集成查询(Language Integrated Query ...
- hdu 4686 Arc of Dream 自己推 矩阵快速幂
A.mat[0][0] = 1, A.mat[0][1] = 1, A.mat[0][2] = 0, A.mat[0][3] = 0, A.mat[0][4] = 0; A.mat[1][0] = 0 ...
- Ubuntu创建图标
起因 安装一些软件时,总是没有图标,导致无法固定到docky栏,所以极为不方便,所以需要自己创建图标. 操作 以创建微信图标为例 [Desktop Entry] Name=Wecaht #名字 Com ...
- Java实验项目三——编程实现Person类,学生类的设计及其继承关系
Program: 编程实现Person类,学生类的设计及其继承关系 代码如下: 定义抽象类Person 1 /* 2 * Description:建立抽象类 3 * 4 * Written By:Ca ...
- B 站崩了,总结下「高可用」和「异地多活」
你好,我是悟空. 一.背景 不用想象一种异常场景了,这就真实发生了:B 站晚上 11 点突然挂了,网站主页直接报 404. 手机 APP 端数据加载不出来. 23:30 分,B 站做了降级页面,将 4 ...
- FreeRTOS消息队列
FreeRTOS 的一个重要的通信机制----消息队列,消息队列在实际项目中应用较多. 一.消息队列的作用及概念: 消息队列就是通过 RTOS 内核提供的服务,任务或中断服务子程序可以将一个消息(注意 ...
- Spring Cloud组件和架构图
Spring Cloud是微服务架构的集大成者,将一系列优秀的组件进行了整合. 服务网关:聚合内部服务,提供统一的对外API接口,屏蔽内部实现.可以解决跨域.认证和前端调用负责的问题,便于项目重构.可 ...
- MYSQL 连接举例
内连接:连接的多个数据必须存在才能连接select * from sjh14482条记录 create table sjha as ( select * from sjh1 limit 20 )sel ...
- java集合(5)-List集合
序章 List集合是一个元素有序且可以重复的集合,每个元素对应一个索引,类似于数组的方式,默认是按照添加顺序,所以第一次添加元素索引为0,第二次为1.... 一 Java8改进的List接口和List ...