关于javascript:JavaScript-的浅拷贝与深拷贝栈与堆深拷贝的多种方法

4次阅读

共计 4821 个字符，预计需要花费 13 分钟才能阅读完成。

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

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

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

let name = "鸣人"
let age = 18

function 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 = person

person2.name = "柯南"

alert(person.name) // 柯南

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

let arr = [1, 2, 3]
let arr2 = arr

arr2[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) // 宁次, 第一层 ok

person2.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 – MDN。

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) // 鸣妹，第二层仍是浅拷贝

留神：Object.create 对于数组的深拷贝不现实。

先用 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) // 宁次, 第一层 ok

person2.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 – MDN。

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

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

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) // 宁次, 第一层 ok

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

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

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

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) // 宁次, 第一层 ok

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

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

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

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

应用浅拷贝的状况下要注意对数据的批改，要想分明批改后影响到所有援用的对象这个后果是否是你想要的，不是的话请应用深拷贝。
对于函数外部的代码则要尽量避免批改传入进来的对象，如果必须要批改，则要在函数阐明中醒目提醒。
也不要自觉频繁地应用深拷贝，免得造成大量的内存节约。
对于深拷贝也不用抉择大而全地齐全拷贝的办法，如果只是单层对象或数组，简略地应用解构赋值就是最好的办法。

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

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

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

正文完

javascript

发表至： javascript

2022-05-03

0

TypeScript，初次见面，请多指教 ?

js数据结构-二叉树（二叉搜索树）

关于javascript:排名前十的-10-大顶级前端开源项目1534K-Star

关于javascript:jsonp-原理详解及-jsonppro-源码解析

关于java:spring项目applicationproperties文件无法识别为叶子

关于javascript:JavaScript-的浅拷贝与深拷贝栈与堆深拷贝的多种方法

栈与堆

深拷贝与浅拷贝

浅拷贝

深拷贝

解构赋值

Object.create

JSON.parse 和 JSON.stringify

structuredClone

本人实现

应用 lodash

总结

每日名言

站内搜索