记深拷贝与浅拷贝 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天

在做项目的时候想对一个对象进行赋值发现过后对新的对象的修改也会导致第一个对象的值也被改变，这是我们不想看到的如何修改便引出深拷贝与浅拷贝的概念。

深拷贝与浅拷贝是专门针对数组和对象的，普通的数字、字符等不会这样。

浅拷贝就只是将一个数据的地址指向另一个数据的地址，就像c语言的指针，数据的改变会导致两个都变化。深拷贝也就只是创建一个新的对象或数组进行赋值，数据的改变不会导致变化。

对于深拷贝我首先想到使用展开语法

let array = [1,2,3];
let newArr = [...array];

在这样后我尝试了一下在对newArr的修改并不会影响到array。

可当array数组里面含有数组或对象时对于数据的修改也导致了两者的变化

let array = [[1,2],2,3];
let newArr = [...array];
newArr[0][0]=100;

显然这样并不是真正的深拷贝

将数据转为Json格式在转回对象

let list =[
            {id:1,name:'1'},
            {id:2,name:'2'},
           ]
let newList = JSON.parse(JSON.stringify(list));
newList.push({id:888})
console.log(list,newList);

这样子也可以实现深拷贝

还有可以写一个递归函数来实现对数组对象的拷贝

首先先创建一个与传入数据cloneDate一样类型的变量，通过数据的构造方法利用三目运算符实现

const targetObj = cloneDate.constructor === Array ? [] : {} ;

遍历cloneDate的每个数据对于每个数据判断typeof是否是对象是的话进行递归不是的话直接进行赋值,typeof进行数据类型判断数组和对象都会是object。

for(let item in cloneDate){
       if(typeof cloneDate[item] === 'object'){
           targetObj[item] = cloneDate[item].constructor === Array ? [] : {};
           targetObj[item] = deeoClone(cloneDate[item])
        }else{
               targetObj[item] = cloneDate[item];
              }   
            }

通过递归函数我们便实现的对数组对象的深拷贝

如有错误还请纠正