js深浅拷贝理解与实现

最新推荐文章于 2024-11-02 19:19:35 发布

小灰灰学编程

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量144

点赞数

分类专栏： JavaScript 文章标签： javascript 深浅拷贝

本文链接：https://blog.csdn.net/chen_ac/article/details/130821130

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在前端开发中，为了处理接口返回的数据，常需要进行数据拷贝。浅拷贝通过遍历对象复制属性，能快速创建新对象，但无法处理引用类型的深层数据，可能导致原对象受影响。深拷贝则通过递归复制解决此问题，确保修改拷贝后的对象不会影响原始对象。

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

在实际开发应用中，前端接到接口返回的引用类型数据时，为更好的应用于不同的业务和功能，常常需要对数据进行深浅拷贝，避免在操作过程中数据相互影响导致出现问题。

1、浅拷贝

let obj = {name: 'james', age: '38'}
let newObj = {}
for(let i in obj){
    if(obj.hasOwnProperty(i)){
        newObj[i] = obj[i]
    }
}
newObj.age = 23
console.log(obj, newObj)

从结果图可以看出，通过浅拷贝，能实现修改newObj的属性但不影响obj

弊端：浅拷贝存在的弊端在于：只能拷贝基本数据类型的数据，对于引用数据类型的数据，依然能造成影响

let obj = {name: 'james', age: '38', number: [6,23]}
let newObj = {}
for(let i in obj){
    if(obj.hasOwnProperty(i)){
        newObj[i] = obj[i]
    }
}
newObj.number[0] = 66
console.log(obj, newObj)

2、深拷贝

通过判断元素是否属于引用数据类型来进行递归，深拷贝后的newObj，修改其中的属性都不会对obj的属性造成影响

let obj = {name: 'james', age: '38', number: [6,23]}
function deepClone(item){
    if(!item || typeof item != 'object') return item
    let newObj = Object.prototype.toString.call(item) == '[object Array]' ? [] : {}
    for(let i in item){
        if(item.hasOwnProperty(i)){
            newObj[i] = deepClone(item[i])
        }
    }
    return newObj
}
let newObj = deepClone(obj)
newObj.age = 23
newObj.number[0] = 66
console.log(obj, newObj)