JS的深拷贝和浅拷贝以及如何深拷贝

糖糖糖小雅

已于 2022-12-02 10:13:27 修改

阅读量218

点赞数

文章标签： javascript 前端

于 2022-12-01 15:16:18 首次发布

本文链接：https://blog.csdn.net/weixin_44435242/article/details/127978928

版权

js数据类型

基本类型：

number， boolean，string，symbol，bigint，undefined，null

引用类型：

object 以及一些标准内置对象 Array、String、Map、Set..

基本类型的数据是值类型，存储在栈内存中，每次赋值都是一次复制的过程.

引用类型数据拷贝： key存在栈内存中，value存在堆内存中，栈会提供一个value的引用地址指向堆内存

一、什么是浅拷贝

浅拷贝对内存地址的复制，让目标对象指针和源对象指向同一片内存空间。

let arr1 = [1, 2, 3, 4, 5, 6, 7,8,9]
let arr2 = arr1
arr2[0] = 66
console.log(arr1) // [66, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr2) // [66, 2, 3, 4, 5, 6, 7, 8, 9]

浅拷贝是一个传址,也就是把arr1的值赋给arr2的时候同时也把arr1的址赋给了arr2，当arr2（arr1）的值改变的时候，arr1（arr2）的值同时也会改变

二、什么是深拷贝

深拷贝：深拷贝是指拷贝对象的具体内容，二内存地址是自主分配的，拷贝结束之后俩个对象虽然存的值是一样的，但是内存地址不一样，俩个对象页互相不影响，互不干涉

三、深拷贝方法

1、JSON内置的方法

    let obj1 = {a:'111',b:'2222'}
    let obj2 = JSON.parse(JSON.stringify(obj1))
    console.log(JSON.stringify(obj2)) //{"a":"111","b":"2222"}
    obj2.a = '3333'
    console.log(JSON.stringify(obj1)) // {"a":"111","b":"2222"}
    console.log(JSON.stringify(obj2)) //{"a":"3333","b":"2222"}

2、Object的内置方法assign

注：对象嵌套层次过深，超过2层，就会出现浅拷贝的状况，比如echarts组件的option对象

    let obj1 = {a:'111',b:'2222'}
    let obj2 = Object.assign({}, obj1);
    console.log(JSON.stringify(obj2)) //{"a":"111","b":"2222"}
    obj2.a = '3333'
    console.log(JSON.stringify(obj1)) // {"a":"111","b":"2222"}
    console.log(JSON.stringify(obj2)) //{"a":"3333","b":"2222"}

3、递归实现

function extendDeepCopy(obj,newobj){

var newobj=newobj||{};

for(var i in obj){

if(typeof obj[i]=='object'){ //确定类型

newobj[i]=(obj[i].constructor==="Array")?[]:{};

extendDeepCopy(obj[i],newobj[i]); //递归回调

}else{

newobj[i]=obj[i];

}

}

return newobj;//结束函数完成深拷贝

}