上个章节讲了，值（基本）类型与引用（对象）类型分别被存储在栈与堆当中。

这导致对于值类型与引用类型复制时会产生不一样的结果，值类型的复制是完全拷贝同一份值，而引用类型是拷贝引用地址。

let name = "鸣人"

let person = {
    name: "宁次",
    age: 20,
}

let name2 = name
let person2 = person

$$warning string 类型数据实际上应该是存放在堆中，但因其内部实现细节被隐藏了，使用时与栈中的数据无异，所以上图将其放在栈的一列。 $$

对于引用（对象）类型来说，这种只是复制对象引用地址被称为浅拷贝，与之对应的，如果在堆中拷贝了一模一样的数据则被称为深拷贝。

$$tip

将对象数据保存在堆中能大大节省内存空间，如果整个中国的名单保存在变量中，使用栈来保存则每次复制会拷贝整个数据（每次调用函数传参也属于执行了一次复制），内存会根本不够用。

保存在堆中的数据每次复制只是复制一个引用地址，会大大节省内存的使用。

浅拷贝

当我们修改浅拷贝对象内数据时，会造成多个指向此数据地址的变量都受到影响。注意有时这个特性会造成意料之外的问题。

$$jsdemo$$
$$edit$$
let person = {
    name: "宁次",
    age: 20,
}

let person2 = person

person2.name = "柯南"

alert(person.name) // 柯南

$$jsdemo$$
$$edit$$
let arr = [1, 2, 3]
let arr2 = arr

arr2[0] = "x"

alert(arr[0]) // x

$$tip

浅拷贝只是一个特性，它也存在好的一面与坏的一面。

假设我们有一个人的对象在代码中有多处使用，这个人改了一个名字，那么其他地方使用这个人的名字时会使用的是新的名字，我们不用修改每个对象的名字。

这是很符合生活场景的，具有现实意义。

$$jsdemo$$
$$edit$$
let mingren = {
    name: "鸣人",
    score: 40,
}

function mark(person) {
    if (person.score < 60) {
        person.status = "不及格"
    } else {
        person.status = "及格"
    }
}

mark(mingren)

alert(mingren.status) // 不及格

深拷贝

深拷贝就是将数据在堆中进行了拷贝的结果，这样对复制过后的对象的操作便不会影响到原对象。

$$jsdemo$$
$$edit$$
let person = {
    name: "宁次",
    age: 20,
}

let person2 = { ...person }

我们再修改 person2，也不会对 person 有任何影响了。

$$jsdemo$$
$$edit$$
let person = {
    name: "宁次",
    age: 20,
}

let person2 = { ...person }

person2.name = "鸣人"

alert(person.name) // 宁次

深拷贝一般有以下几种方法：

使用解构赋值
使用 Object.create
使用 JSON.parse 和 JSON.stringify
structuredClone
自己实现
使用第三方库，例如 lodash

解构赋值

解构赋值有个问题，只能复制对象内第一层的值，更深一层便无能为力了。

$$jsdemo$$
$$edit$$
let person = {
    name: "宁次",
    age: 20,
    sister: {
        name: "雏田",
        age: 18,
    },
}

let person2 = { ...person }

person2.name = "鸣人"

alert(person.name) // 宁次, 第一层 ok

person2.sister.name = "鸣妹"
alert(person.sister.name) // 鸣妹，第二层仍是浅拷贝

$$jsdemo$$
$$edit$$
// 数组的解构赋值深拷贝
let arr = [1, 2, 3]
let arr2 = [...arr]

arr2[0] = "x"

alert(arr[0]) // 1

Object.create

Object.create 使用现有的对象来创建一个新的对象。同样的，也只能解决第一层的复制。

$$tip

详情参考 Object.create - MDN。

$$jsdemo$$
$$edit$$
let person = {
    name: "宁次",
    age: 20,
    sister: {
        name: "雏田",
        age: 18,
    },
}

let person2 = Object.create(person)

person2.name = "鸣人"

alert(person.name) // 宁次, 第一层 ok

person2.sister.name = "鸣妹"
alert(person.sister.name) // 鸣妹，第二层仍是浅拷贝

$$tip

Object.create 对于数组的深拷贝不理想。

JSON.parse 和 JSON.stringify

先用 JSON.stringify 将对象序列化成字符串，再用 JSON.parse 解析回来，可以达到深拷贝的效果，并且对于多层对象同样有效。

$$jsdemo$$
$$edit$$
let person = {
    name: "宁次",
    age: 20,
    sister: {
        name: "雏田",
        age: 18,
    },
}

let person2 = JSON.parse(JSON.stringify(person))

person2.name = "鸣人"
alert(person.name) // 宁次, 第一层 ok

person2.sister.name = "鸣妹"
alert(person.sister.name) // 雏田，多层对象依旧 OK

$$warning

JSON.parse 和 JSON.stringify 依旧不是完美的，像一些方法或用户自定义的类型则不能有效的拷贝。

$$jsdemo$$
$$edit$$
let person = {
    name: "宁次",
    age: 20,
    sayHello() {
        alert("你好~")
    },
}

let person2 = JSON.parse(JSON.stringify(person))

person2.sayHello() // error：person2.sayHello is not a function

structuredClone

structuredClone 是内置的一个方法，对于多层对象也能很好地执行拷贝，但同样对方法或自定义对象无力。

$$tip

详情请参考 structuredClone - MDN。

$$jsdemo$$
$$edit$$
let person = {
    name: "宁次",
    age: 20,
    sister: {
        name: "雏田",
        age: 18,
    },
}

let person2 = structuredClone(person)

person2.name = "鸣人"

alert(person.name) // 宁次, 第一层 ok

person2.sister.name = "鸣妹"
alert(person.sister.name) // 雏田，多层对象依旧 OK

对于方法或自定义对象同样无能为力。

$$jsdemo$$
$$edit$$
let person = {
    name: "宁次",
    age: 20,
    sayHello() {
        alert("你好~")
    },
}

// Uncaught DOMException: Failed to execute 'structuredClone' on 'Window': sayHello() {alert("你好~")} could not be cloned
let person2 = structuredClone(person)

自己实现

自己实现的灵活度就很高，根据代码实现不同达到的效果与运行效率也会有所不同。

以下是通过递归实现的一个深拷贝函数，经测试能正确拷贝常见的多层对象、数组、方法。

$$jsdemo$$
$$edit$$
// 深拷贝
function deepclone(obj) {
    function copyList(arr) {
        let result = []
        for (let item of arr) {
            result.push(this.deepclone(item))
        }
        return result
    }

    if (typeof obj === "object") {
        if (Array.isArray(obj)) {
            return copyList(obj)
        } else {
            let result = {}
            for (let key in obj) {
                result[key] = deepclone(obj[key])
            }
            return result
        }
    } else {
        return obj
    }
}

let person = {
    name: "宁次",
    age: 20,
    sayHello() {
        alert("你好")
    },
    sister: {
        name: "雏田",
        age: 18,
    },
    arr: [1, 2, 3],
}

let person2 = deepclone(person)

person2.name = "鸣人"

alert(person.name) // 宁次, 第一层 ok

person2.sister.name = "鸣妹"
alert(person.sister.name) // 雏田，多层对象依旧 OK

person2.arr[0] = "x"
alert(person.arr[0]) // 1， 数组也 ok

person2.sayHello() // 你好，方法也 ok

使用 lodash

lodash 是一个扩展了 JavaScript 中多个类型的功能的一个第三方库。

引用官方介绍：

Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.Lodash’s modular methods are great for:

Iterating arrays, objects, & strings
Manipulating & testing values
Creating composite functions

$$tip

更多详情参考 lodash 官方文档。

引入 lodash 的方法有很多，以下使用外部链接的方法引入。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

let person = {
    name: "宁次",
    age: 20,
    sayHello() {
        alert("你好")
    },
    sister: {
        name: "雏田",
        age: 18,
    },
    arr: [1, 2, 3],
}

let person2 = _.cloneDeep(person)

person2.name = "鸣人"

alert(person.name) // 宁次, 第一层 ok

person2.sister.name = "鸣妹"
alert(person.sister.name) // 雏田，多层对象依旧 OK

person2.arr[0] = "x"
alert(person.arr[0]) // 1， 数组也 ok

person2.sayHello() // 你好，方法也 ok

总结

使用浅拷贝和深拷贝要取决于当时的场景，这里总结了以下几个要点：

使用浅拷贝的情况下要留意对数据的修改，要想清楚修改后影响到所有引用的对象这个结果是否是你想要的，不是的话请使用深拷贝。
对于函数内部的代码则要尽量避免修改传入进来的对象，如果必须要修改，则要在函数说明中醒目提示。
也不要盲目且频繁地使用深拷贝，以免造成大量的内存浪费。
对于深拷贝也不必选择大而全地完全拷贝的方法，如果只是单层对象或数组，简单地使用解构赋值就是最好的方法