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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
JavaScript获取GridView选择的行内容
Apr 14 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
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
php 常用算法和时间复杂度
2013/07/01 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
js拦截alert对话框另类应用
2013/01/16 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
Python随机读取文件实现实例
2017/05/25 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
pandas如何处理缺失值
2019/07/31 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
linux面试题参考答案(10)
2016/10/26 面试题
中科创达面试题
2016/12/28 面试题
医学生个人求职信范文
2013/09/24 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
民族学专业求职信
2014/07/28 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python