JavaScript最完整的深浅拷贝实现方式详解


Posted in Javascript onFebruary 28, 2022

深浅拷贝:

内存中一共分为栈内存和堆内存两大区域,所谓深浅拷贝主要是对js引用类型数据进行拷贝一份,浅拷贝就是引用类型数据相互赋值之后,例obj1=obj2;如果后面的操作中修改obj1或者obj2,这个时候数据是会进行相应的变化的,因为在内存中引用类型数据是存储在堆内存中,堆内存中存放的是引用类型的值,同时会有一个指针地址指向栈内存,两个引用类型数据地址一样,如果其中一个发生变化另外一个都会有影响;而深拷贝则不会,深拷贝是会在堆内存中重新开辟一块空间进行存放;

简单来说就是B复制了A,如果A发生了改变,如果B随之变化,那么是浅拷贝,如果B并没有发生变化,则是深拷贝。

基本类型拷贝

let a = 1;
let b = a;
b = 2;
console.log(a);//1
console.log(b);//2

a,b都是属于基本类型,基本类型的复制是不会影响对方的,因为基本类型是每一次创建变量都会在栈内存中开辟一块内存,用来存放值,所以对基本类型进行拷贝是不会对另外一个变量有影响的,属于深拷贝。

数组拷贝 

concat() slice()

//  concat()
let list = ['a','b','c'];
let list2 = list.concat();
list2.push('d')
console.log(list);//['a','b','c']
console.log(list2);//['a','b','c','d']
//  slice()
let list = ['a','b','c'];
let list2 = list.slice();
list2.push('d')
console.log(list);//['a','b','c']
console.log(list2);//['a','b','c','d']

上面两种方法只能实现数组类型里面的单层深拷贝,如果是多层无法实现深拷贝。

//二维数组
let list = ['a','b','c',['d','e','f']];
let list2 = list.concat();
list2[3][0] = 'a';
console.log(list);
console.log(list2);

JavaScript最完整的深浅拷贝实现方式详解

可以看到原二维数组的值也发生了变化,说明没有实现深拷贝。

由此总结,concat和slice只能实现一维数组的深拷贝,不能对多维数组进行深拷贝,所以并不是一个完美的深拷贝方式。

对象拷贝

new Object()

let a = {id:1,name:'a',obj:{id:999}};
let b = new Object();
b.id = a.id;
b.name = a.name;
b.obj = a.obj;
a.name = 'b';
a.obj.id = 888;
console.log(a);
console.log(b);

 

JavaScript最完整的深浅拷贝实现方式详解

a.name更改并没有影响到b.name,好像可以看作深拷贝,但第二层obj里面里面的id随之更改了,因此其实并不是深拷贝。

Object.assign

let a = {id:1,name:'a',obj:{id:999}};
function fun(obj){
    let o = {};
    Object.assign(o,obj);
    return o;
}
let a2 = fun(a);
a2.name ='a2';
a2.obj.id = 888;
console.log(a);
console.log(a2);

JavaScript最完整的深浅拷贝实现方式详解

以上两种方法,对于一层对象都能实现深拷贝,但对于多层对象则无法实现,因此也不是一种完美的深拷贝方式。

JSON.parse(JSON.stringify( ))

let a = {
    name : 'a',
    age : 20,
    obj : {id:999},
    action : function(){
        console.log(this.name);
    }
}
let b = JSON.parse(JSON.stringify(a));
a.name = 'b';
a.obj.id = 888;
console.log(a);
console.log(b);

JavaScript最完整的深浅拷贝实现方式详解

单层对象name和多层对象obj.id的改变都没影响到原对象,因此是一个比较完美的深拷贝,但是能看到function好像并没有被拷贝。

可以看出这个方法对于一层和多层都能实现深拷贝,但是这个方法的缺陷是不能拷贝Function,所以在使用时,一定要注意数据类型。

递归

let a = {
    name:'a',
    skin:["red","blue","yellow",["123","456"]],
    child:{
        work:'none',
        obj:{
            id:999
        }
    },
    action:function(){
        console.log(this.name);
    }
}
//封装的递归方法
    function copyWid(obj){
        let newObj = Array.isArray(obj)?[]:{};
        for (var i in obj){
            if(typeof obj[i] === 'object'){  //判断是不是对象(数组或对象)
               newObj[i] = copyWid(obj[i])  //递归解决多层拷贝
            }else{
                newObj[i] = obj[i]   
            }
        }
        return newObj;
    };
    let b = copyWid(a);
    b.child.obj.id =888;
    b.skin[3][0] = "pink";
    console.log(a);
    console.log(b);

JavaScript最完整的深浅拷贝实现方式详解

可以看到,无论是多层的对象还是多层的数组,都能实现深拷贝,而且能拷贝函数,这个是目前来说最完美的深拷贝方法。

通过这个递归能实现一个比较完美的深拷贝,能弥补上述提到的所有方法中的缺点。

展开运算符

let a = {name:'a',id:99};//如果是数组[xx,xx,xx],{...a}需要改成[...a]
let b ={...a};  //[...a]
a.id =88;
console.log(a);
console.log(b);

JavaScript最完整的深浅拷贝实现方式详解

这个方法能实现对象数组单层时的深拷贝,但是多层无法实现深拷贝。

以上这么多方法,最优解应该属于JSON和递归的方法(递归解决了JSON无法拷贝函数方法的问题),但是根据需求数据类型的不同,可以选择更简单的方式。

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容! 

Javascript 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
uniapp开发小程序的经验总结
Apr 08 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
Vue全局事件总线你了解吗
Feb 24 #Vue.js
Vue的生命周期一起来看看
Vue的过滤器你真了解吗
Feb 24 #Vue.js
Vue监视数据的原理详解
Feb 24 #Vue.js
Vue的列表之渲染,排序,过滤详解
一篇文章了解正则表达式的替换技巧
Feb 24 #Javascript
最新最全的手机号验证正则表达式
Feb 24 #Javascript
You might like
ADODB的数据库封包程序库
2006/12/31 PHP
php文件操作相关类实例
2015/06/18 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
smarty自定义函数用法示例
2016/05/20 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python实现整数的二进制循环移位
2019/03/08 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
python numpy 反转 reverse示例
2019/12/04 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
python实现吃苹果小游戏
2020/03/21 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
python实现定时发送邮件
2020/12/23 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
教师师德考核自我评价
2014/09/13 职场文书
数学教师求职信范文
2015/03/20 职场文书
员工年度工作总结2015
2015/05/18 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis