JS中深浅拷贝 函数封装代码

2023-04-24,,

一、了解

基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问。

二、浅拷贝

浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一个值,另一个也会动态改变。

三、深拷贝

深拷贝是真正意义上实现了数组和对象的拷贝,它创建了另外一个一模一样的对象,和原对象不是一个内存地址,修改一个值不会影响另一个的值。

使用JSON.stringify()和JSON.parse()也可以实现深拷贝。当值为undefined、任意函数、symbol时会被忽略。

let newobj = JSON.parse(JSON.stringify(obj));

四、封装实现深浅拷贝的函数

//封装函数 实现深浅拷贝  deep为true深拷贝 false浅拷贝
function copy(oldObj,deep){
let newObj = {};
if (oldObj instanceof Array){
newObj = [];
}
for (let key in oldObj){
let value = oldObj[key];
if (!!deep && typeof value === "object" && value !== null){ //如果原对象的某个属性是引用类型数据,递归调用copy
newObj[key] = copy(value,deep);
} else{ //如果原对象的某个属性是基本类型数据,直接将此属性赋值给新对象的相应属性
newObj[key] = value;
}
}
return newObj;
}

效果如下:

let obj1 = {a:1,b:{c:2}};
let obj2 = copy(obj1,true); //深拷贝
let obj3 = copy(obj1,false); //浅拷贝
obj1.b.c = 3;
console.log(obj2); //{a:1,b:{c:2}}
console.log(obj3); //{a:1,b:{c:3}}

本文仅仅简述了js深浅拷贝,以及实现深浅拷贝的简单代码,如有不当之处,请各位指正!谢谢!

2018-11-14

<!--
.notice:hover{color:orange;text-indent:2em;transition:0.5s}
h3 span:hover{color:purple}
-->

JS中深浅拷贝 函数封装代码的相关教程结束。

《JS中深浅拷贝 函数封装代码.doc》

下载本文的Word格式文档,以方便收藏与打印。