对象、数组深拷贝与浅拷贝

最新推荐文章于 2024-01-26 18:07:16 发布

造梦者FZ

最新推荐文章于 2024-01-26 18:07:16 发布

阅读量923

点赞数 4

分类专栏：前端面试题 javascript简单入门案例文章标签：前端 javascript json

本文链接：https://blog.csdn.net/qq_43923146/article/details/125959478

版权

javascript简单入门案例同时被 2 个专栏收录

23 篇文章 2 订阅

订阅专栏

前端面试题

7 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中对象和数组深拷贝与浅拷贝的几种常见方法，包括JSON.parse/JSON.stringify、Object.assign、扩展运算符以及递归实现。每种方法的优缺点和适用场景进行了分析，特别是针对数据层级复杂的情况，递归拷贝提供了较为完善的解决方案。

摘要由CSDN通过智能技术生成

对象深拷贝与浅拷贝

1、使用JSON方法
缺点：数据类型为undefined和函数时不能进行拷贝

let  obj1={
    a:1,
    b:[1,2,3],
    c:undefined,
    fun:()=>{}
}
let obj2=JSON.parse(JSON.stringify(obj1))
obj2.a=222
obj2.b[1]=666
console.log(obj1,obj2)

在这里插入图片描述

2、使用Object.assign
缺点：只能深拷贝一级属性，二级属性会成为浅拷贝

let  obj1={
    a:1,
    b:[1,2,3],
    c:undefined,
    fun:()=>{}
}
let obj2=Object.assign({},obj1)
obj2.a=222
obj2.b[1]=666
console.log(obj1,obj2)

在这里插入图片描述
3、使用扩展运算符
缺点：只能深拷贝一级属性，二级属性会成为浅拷贝

let  obj1={
    a:1,
    b:[1,2,3],
    c:undefined,
    fun:()=>{}
}
let obj2={...obj1}
obj2.a=222
obj2.b[1]=666
console.log(obj1,obj2)

在这里插入图片描述
4、递归（比较完美解决方案）

function cloneDeep(data){
    let newData=Array.isArray(data)?[]:{}
    for(let key in data){
        if(data[key]&&typeof data[key]==='object'){
            newData[key]=cloneDeep(data[key])
        }else{
            newData[key]=data[key]
        }
    }
    return newData
}

let  obj1={
    a:1,
    b:[1,2,3],
    c:undefined,
    fun:()=>{}
}
let obj2=cloneDeep(obj1)
obj2.a=222
obj2.b[1]=666
console.log(obj1,obj2)

数组深拷贝与浅拷贝

1、使用JSON方法
缺点：数据类型为undefined和函数时不能进行拷贝。
2、使用Object.assign
缺点：只能深拷贝一级属性，二级属性会成为浅拷贝。
3、使用扩展运算符
缺点：只能深拷贝一级属性，二级属性会成为浅拷贝。
4、slice、concat
缺点：只能深拷贝一级属性，二级属性会成为浅拷贝。
5、递归（比较完美解决方案）