JavaScript-带你手写深拷贝与浅拷贝

案例

let person = {
    
    
    name: 'lhg',
    sex: '男',
    friends: {
    
    
        name: '张三',
        sex: '男'
    }
}
let newPerson = person
newPerson.name = '前端的炮灰'
console.log(person);
console.log(newPerson);

输出结果：

这里输出的结果和我们大家想的都是一样的，修改newPerson的name属性，把person的name属性值也给改了。这其实很好解释，二者指向了同一个对象。

浅拷贝

我们不妨写个函数

let person = {
    
    
    name: 'lhg',
    sex: '男',
    friends: {
    
    
        name: '张三',
        sex: '男'
    }
}
/**
 * 浅拷贝
 * @param {*} obj 
 * @returns 
 */
function clone(obj) {
    
    
    if (typeof obj !== 'object' || obj == null) {
    
    
        console.log(1);
        return obj
    }
    let result
    if (obj instanceof Array) {
    
    
        result = []
    } else {
    
    
        result = {
    
    }
    }
    for (let key in obj) {
    
     
        result[key] = obj[key] 
    }
    return result
}
let newPerson = clone(person)
newPerson.name = '前端的炮灰'
console.log(person);
console.log(newPerson);

输出结果

在这里我们可以看到我们要的效果出现了，但是又有新的问题出现了
我们把原来的修改

newPerson.name = '前端的炮灰'

改为修改子属性对象中的属性

newPerson.friends.name = '前端的炮灰'

结果为

可见我们只是拷贝了一层，所以我们要采用递归的形式实现拷贝，也就是深拷贝，才能实现拷贝完全

深拷贝

 let person = {
    
    
    name: 'lhg',
    sex: '男',
    friends: {
    
    
        name: '张三',
        sex: '男'
    }
}
/**
 * 深拷贝
 * @param {*} obj 
 * @returns 
 */

function clone(obj) {
    
    
    if (typeof obj !== 'object' || obj == null) {
    
    
        return obj
    }
    let result
    if (obj instanceof Array) {
    
    
        result = []
    } else {
    
    
        result = {
    
    }
    }
    for (let key in obj) {
    
    
        //递归处理，我们在这里可以进行处理，可以只拷贝obj上有的属性
        //在这里就不这样写了
        //if (obj.hasOwnProperty(key)) {
    
    
        //  result[key] = clone(obj[key])
        //}
        result[key] = clone(obj[key])
    }
    return result
}
let newPerson = clone(person)
newPerson.friends.name = '前端的炮灰'
console.log(person);
console.log(newPerson);

结果为

可见这回达到了我们所想要的结果

lodash（cloneDeep）

lodash里面已经实现了深拷贝，我们直接进行引入调用就可以了
lodash-cloneDeep
还有其他几种拷贝方式，你可以上去看看