深拷贝的方法及其应用

发布时间：2023-05-20

一、深拷贝的概念

深拷贝，顾名思义，是在拷贝时将对象完全复制一份，而不是只复制其地址。当修改其中一个对象时，另一个对象不会受到影响。深拷贝是非常有用的，可以在很多场景中使用，包括在模板制作、数组操作、日期对象等场景中。

二、浅拷贝与深拷贝之间的区别

浅拷贝与深拷贝是两种常见的拷贝方法，但它们的作用是不同的。浅拷贝只是复制了对象的地址，指向了同一块内存空间，修改其中一个对象会影响到另一个对象。而深拷贝则会复制整个对象，指向不同的内存空间，不会相互影响。

// 浅拷贝示例
let obj1 = {a: {b: 1}}
let obj2 = Object.assign({}, obj1)
obj1.a.b = 2
console.log(obj2.a.b) // 2
// 深拷贝示例
let obj1 = {a: {b: 1}}
let obj2 = JSON.parse(JSON.stringify(obj1))
obj1.a.b = 2
console.log(obj2.a.b) // 1

三、使用JSON实现深拷贝

使用JSON实现深拷贝是最常见的方法之一。JSON对象有两个方法可以实现深拷贝，分别是JSON.stringify()和JSON.parse()方法。 在使用JSON.stringify()方法时，首先需要将对象转化为字符串，然后再将字符串转化为新的对象。这个过程中，所有的对象都会被完全复制，包括嵌套的对象和数组。 在使用JSON.parse()方法时，首先需要将对象转化为字符串，然后再将字符串转化为新的对象。这个过程中，所有的对象都会被完全复制，包括嵌套的对象和数组。 需要注意的是，JSON.stringify()和JSON.parse()方法有一些局限性，它们不能复制函数、Date对象等特殊的对象。因此，在使用深拷贝时，需要仔细考虑对象的类型，确保能够正确复制。

let obj1 = {a: {b: 1}}
let obj2 = JSON.parse(JSON.stringify(obj1))
console.log(obj2) // {a: {b: 1}}
obj1.a.b = 2
console.log(obj2) // {a: {b: 1}}

四、使用递归实现深拷贝

递归也是实现深拷贝的方法之一。递归的过程，在遇到对象或数组时，将其递归至最里层，然后复制回来。这种方法不需要考虑像JSON方法一样的局限性，因为它是通过遍历整个对象和数组来复制，包括函数和Date对象等特殊的对象。

function deepClone(obj) {
    if (typeof obj !== 'object') {
        return obj
    }
    let newObj = obj instanceof Array ? [] : {}
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = deepClone(obj[key])
        }
    }
    return newObj
}
let obj1 = {a: {b: 1}}
let obj2 = deepClone(obj1)
console.log(obj2) // {a: {b: 1}}
obj1.a.b = 2
console.log(obj2) // {a: {b: 1}}

五、应用场景

深拷贝是非常有用的，可以在很多场景中使用，包括在模板制作、数组操作、日期对象等场景中。 在模板制作中，如果我们需要制作一个动态的模板，用于在不同的页面中使用。由于页面数量是动态的，因此我们需要复制模板而不影响原模板。 在数组操作中，如果我们需要制作一个函数，用于复制数组并删除其中的重复元素。由于数组元素可能包含对象或数组，因此我们需要一个能够递归复制的函数。 在日期对象中，如果我们需要制作一个日历选择器，用于选择日期。由于用户可能选择不同的日期范围，因此我们需要复制日历而不影响原日期对象。

六、总结

在深拷贝的过程中，我们可以使用JSON和递归这两种方法，这两种方法各有优劣，需要根据实际需求来选择。深拷贝是非常有用的，在实际应用中有广泛的应用场景，可以提高代码的可读性和可维护性。

推荐文章