js深浅拷贝理解与实现

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

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)