JavaScript 的浅拷贝与深拷贝，栈与堆，深拷贝的多种方法，最全讲解

栈与堆

在 JavaScript 中也会将基本类型与对象类型称为值类型与引用类型。这个是因为基本类型中存储的是数据完整的值，而在引用类型中存储的仅是指向数据的一个地址。

在大部分编程语言中，变量会被存放在两个地方，栈（stack）和堆（heap）。在 JavaScript 中栈存放的就是值类型的数据和引用类型的地址，而引用类型真正的数据被存放在堆中。

当我们定义以下变量时，它们在内存中的栈堆中的存在如图所示：

let name = "鸣人"
let age = 18function sayHello() {alert("你好~")
}let person = {name: "宁次",age: 20,
}let students = ["鸣人", "路飞", "柯南"]

深拷贝与浅拷贝

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

let name = "鸣人"let person = {name: "宁次",age: 20,
}let name2 = name
let person2 = person

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

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

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

浅拷贝

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

let person = {name: "宁次",age: 20,
}let person2 = personperson2.name = "柯南"alert(person.name) // 柯南

数组也是对象，因此同样存在浅拷贝的特性。

let arr = [1, 2, 3]
let arr2 = arrarr2[0] = "x"alert(arr[0]) // x

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

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

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

let mingren = {name: "鸣人",score: 40,
}function mark(person) {if (person.score < 60) {person.status = "不及格"} else {person.status = "及格"}
}mark(mingren)alert(mingren.status) // 不及格

深拷贝

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

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

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

let person = {name: "宁次",age: 20,
}let person2 = { ...person }person2.name = "鸣人"alert(person.name)

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

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

解构赋值

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

let person = {name: "宁次",age: 20,sister: {name: "雏田",age: 18,},
}let person2 = { ...person }person2.name = "鸣人"alert(person.name) // 宁次, 第一层 okperson2.sister.name = "鸣妹"
alert(person.sister.name) // 鸣妹，第二层仍是浅拷贝

// 数组的解构赋值深拷贝
let arr = [1, 2, 3]
let arr2 = [...arr]arr2[0] = "x"alert(arr[0]) // 1

Object.create

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

详情参考 Object.create - MDN。

let person = {name: "宁次",age: 20,sister: {name: "雏田",age: 18,},
}let person2 = Object.create(person)person2.name = "鸣人"alert(person.name) // 宁次, 第一层 okperson2.sister.name = "鸣妹"
alert(person.sister.name) // 鸣妹，第二层仍是浅拷贝

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

JSON.parse 和 JSON.stringify

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

let person = {name: "宁次",age: 20,sister: {name: "雏田",age: 18,},
}let person2 = JSON.parse(JSON.stringify(person))person2.name = "鸣人"
alert(person.name) // 宁次, 第一层 okperson2.sister.name = "鸣妹"
alert(person.sister.name) // 雏田，多层对象依旧 OK

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

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 是内置的一个方法，对于多层对象也能很好地执行拷贝，但同样对方法或自定义对象无力。

详情请参考 structuredClone - MDN。

let person = {name: "宁次",age: 20,sister: {name: "雏田",age: 18,},
}let person2 = structuredClone(person)person2.name = "鸣人"alert(person.name) // 宁次, 第一层 okperson2.sister.name = "鸣妹"
alert(person.sister.name) // 雏田，多层对象依旧 OK

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

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)

自己实现

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

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

// 深拷贝
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) // 宁次, 第一层 okperson2.sister.name = "鸣妹"
alert(person.sister.name) // 雏田，多层对象依旧 OKperson2.arr[0] = "x"
alert(person.arr[0]) // 1， 数组也 okperson2.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

更多详情参考 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) // 宁次, 第一层 okperson2.sister.name = "鸣妹"
alert(person.sister.name) // 雏田，多层对象依旧 OKperson2.arr[0] = "x"
alert(person.arr[0]) // 1， 数组也 okperson2.sayHello() // 你好，方法也 ok

总结

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

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

每日名言

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” – Martin Fowler

菜鸟写机器能理解的代码，大佬写人能理解的代码。 – Martin Fowler

谢谢你的点赞，三眼鸭祝你编程学习顺利。