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

栈与堆

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

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

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

let name = "鸣人"
let age = 18

function sayHello() {
    alert("你好~")
}

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

let students = ["鸣人", "路飞", "柯南"]

image.png

深拷贝与浅拷贝

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

let name = "鸣人"

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

let name2 = name
let person2 = person

image.png

对于引用（对象）类型来说，这种只是复制对象引用地址被称为浅拷贝（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 }

image.png

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

image.png

// 数组的解构赋值深拷贝
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) // 宁次, 第一层 ok

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

详情请参考 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

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

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

?著作权归作者所有,转载或内容合作请联系作者

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,992评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,212评论 3赞 388
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,535评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,197评论 1赞 287
?港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,310评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,383评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,409评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,191评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,621评论 1赞 306
?护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,910评论 2赞 328
?白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,084评论 1赞 342
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,763评论 4赞 337
?日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,403评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,083评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,318评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,946评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,967评论 2赞 351

传奇手游全部平台_三端传奇开服网址大全下载_三端传奇版本下载教程

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

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

栈与堆

深拷贝与浅拷贝

浅拷贝

深拷贝

解构赋值

Object.create

JSON.parse 和 JSON.stringify

structuredClone

自己实现

使用 lodash

总结

每日名言

推荐阅读更多精彩内容

传奇手游全部平台_三端传奇开服网址大全下载_三端传奇版本下载教程

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

栈与堆

深拷贝与浅拷贝

浅拷贝

深拷贝

解构赋值

Object.create

JSON.parse 和 JSON.stringify

structuredClone

自己实现

使用 lodash

总结

每日名言

推荐阅读更多精彩内容

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