带你了解JS对象的浅拷贝和深拷贝

菜园前端
• 阅读 563

原文链接:https://note.noxussj.top/?source=helloworld


以下主要介绍了正常情况下的拷贝、浅拷贝、深拷贝三种方式的区别。

  • 正常拷贝:复制一个对象,它们的内存地址是相同的
  • 浅拷贝:拷贝对象的第一层属性
  • 深拷贝:拷贝对象多层的属性

正常拷贝

假设我们要复制一个对象,如果不对其进行深拷贝,那么改变其中一个对象后,另外一个对象也会跟着改变。

const a = {
    age: 20
}

const b = a

b.age = 30

console.log(a.age) // 30

这并不是我们想要的效果,所以想要复制一个全新的对象时,我们可以通过浅拷贝来实现。

浅拷贝

方式一

const a = {
    name: 'xiaoming',
    age: 20
}

const b = { name: a.name, age: a.age }

b.age = 30

console.log(a.age) // 20

这种方式就不太灵活,要拷贝的对象属性越多,自己手写的属性就越多。

方式二

const a = {
    name: 'xiaoming',
    age: 20
}

const b = {}

for (const key in a) {
    b[key] = a[key]
}

b.age = 30

console.log(a.age) // 20

通过遍历的方式,无论旧对象的属性有多少个,都可以自动拷贝到新的对象上。 以上方式由于是浅拷贝只能拷贝对象的一层属性,对于对象有多层属性依然是存在同样的问题。

const a = {
    name: 'xiaoming',
    age: 20,
    children: {
        name: 'libai',
        age: 20
    }
}

const b = {}

for (const key in a) {
    b[key] = a[key]
}

b.children.age = 30

console.log(a.children.age) // 30

我们把对象 b 的 children 属性改变后,对象 a 的 children 属性也会跟着改变,这也不是我们想要的效果,所以我们可以通过对象的深度拷贝实现(拷贝无限深的层级)。

深拷贝

方式一

const a = {
    name: 'xiaoming',
    age: 20,
    children: {
        name: 'libai',
        age: 20
    }
}

const b = JSON.parse(JSON.stringify(a))

b.children.age = 30

console.log(a.children.age) // 20

通过 JSON 类来实现,实现起来非常简单,首先把对象转成 JSON 字符串,然后在把 JSON 字符串转成对象。但是这种方式依然存在问题,假设我的对象里面有 function 属性等其他非值类型属性,那就无法拷贝了。

const a = {
    name: 'xiaoming',
    age: 20,
    children: {
        name: 'libai',
        age: 20
    },
    eat: function () {
        console.log('i am eat')
    }
}

const b = JSON.parse(JSON.stringify(a))

console.log(b.eat) // undefined

方式二

使用递归(深度优先搜索)方式,这种就是最稳定的一种方式,但是实现起来也是比较复杂,就是将对象的每一层属性都遍历出来,赋值给新的对象。

这里简单介绍一下什么是递归,就是在一个函数内部中再次调用自己,当达到一定条件后停止调用。

// 类型字典
function type(data) {
    let dist = {
        '[object Array]': 'array',
        '[object Object]': 'object',
        '[object Number]': 'number',
        '[object Function]': 'function',
        '[object String]': 'string',
        '[object Null]': 'null',
        '[object Undefined]': 'undefined'
    }

    return dist[Object.prototype.toString.call(data)]
}

// 深度优先遍历
function dfs(data) {
    let newData

    if (type(data) === 'array') {
        newData = []
        data.map((item, index) => {
            newData[index] = dfs(item)
        })
    } else if (type(data) === 'object') {
        newData = {}
        Object.keys(data).map((item) => {
            newData[item] = dfs(data[item])
        })
    } else {
        newData = data
    }

    return newData
}
const a = {
    name: 'xiaoming',
    age: 20,
    children: {
        name: 'libai',
        age: 20
    },
    eat: function () {
        console.log('i am eat')
    }
}

const b = dfs(a)

b.eat() // i am eat
点赞
收藏
评论区
推荐文章
翼
3年前
ES6的解构赋值是深拷贝or浅拷贝?
面试时候有面试官问到ES6的解构赋值是深拷贝还是浅拷贝?,这里做一个总结.ES6的解构赋值,大家应该都清楚,就是可以快速取出数组或者对象中的值;我们先来看一个使用案例:更多的解构赋值知识可以查看:https://es6.ruanyifeng.com/docs/destructuring那么,ES6的解构赋值到底是深拷贝还是浅拷贝呢?我们先来看一下深拷贝和浅
Wesley13 Wesley13
3年前
java 复制Map对象(深拷贝与浅拷贝)
java复制Map对象(深拷贝与浅拷贝)CreationTime2018年6月4日10点00分Author:Marydon1.深拷贝与浅拷贝  浅拷贝:只复制对象的引用,两个引用仍然指向同一个对象
Wesley13 Wesley13
3年前
java克隆之深拷贝与浅拷贝
版权声明:本文出自汪磊的博客,未经作者允许禁止转载。Java深拷贝与浅拷贝实际项目中用的不多,但是对于理解Java中值传递,引用传递十分重要,同时个人认为对于理解内存模型也有帮助,况且面试中也是经常问的,所以理解深拷贝与浅拷贝是十分重要的。一、Java中创建对象的方式①:与构造方法有关
晴空闲云 晴空闲云
3年前
也谈JavaScript浅拷贝和深拷贝
网上关于这个话题,讨论有很多了,根据各路情况我自己整理了一下,最后还是能接近完美的实现深拷贝,欢迎大家讨论。javascript中的对象是引用类型,在复制对象的时候就要考虑是用浅拷贝还是用深拷贝。直接赋值对象是引用类型,如果直接赋值给另外一个对象,那么只是赋值一个引用,实际上两个变量指向的同一个数据对象,如果其中一个对象的属性变更,那么另外一个也会变更。示
Java对象拷贝原理剖析及最佳实践
作者:宁海翔1前言对象拷贝,是我们在开发过程中,绕不开的过程,既存在于Po、Dto、Do、Vo各个表现层数据的转换,也存在于系统交互如序列化、反序列化。Java对象拷贝分为深拷贝和浅拷贝,目前常用的属性拷贝工具,包括Apache的
放学路上 放学路上
3年前
python 赋值引用 浅拷贝 深拷贝
一、基础概念1、直接赋值:其实就是对象的引用(别名)。2、浅拷贝(copy):拷贝父对象,不会拷贝对象的内部的子对象。3、深拷贝(deepcopy):copy模块的deepcopy方法,完全拷贝了父对象及其子对象。二、代码示例importcopya1,2,3,4,'a','b'原始对象ba
Souleigh ✨ Souleigh ✨
4年前
实现深拷贝的多种方式
实现深拷贝的多种方式简单来说,深拷贝主要是将另一个对象的属性值拷贝过来之后,另一个对象的属性值并不受到影响,因为此时它自己在堆中开辟了自己的内存区域,不受外界干扰。浅拷贝主要拷贝的是对象的引用值,当改变对象的值,另一个对象的值也会发生变化。1.简单深拷贝(一层浅拷贝)①for循环拷贝//只复制第一层的浅拷贝javascriptfunc
Stella981 Stella981
3年前
React之浅拷贝与深拷贝
 最近发现的一个bug让我从react框架角度重新复习了一遍浅拷贝与深拷贝。浅拷贝,就是两个变量都是指向一个地址,改变了一个变量,那另一个变量也随之改变。这就是浅拷贝带来的副作用,两个变量会相互影响到,因为它们指向同一个地址。深拷贝,就是互相独立,指向的是不同的地址,一个变量改变了,另一个变量不会被影响到。react角度:父组件传给
Wesley13 Wesley13
3年前
Java深拷贝和浅拷贝
1.浅复制与深复制概念⑴浅拷贝(浅克隆)   复制出来的对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象。⑵深拷贝(深克隆)   复制出来的所有变量都含有与原来的对象相同的值,那些引用其他对象的变量将指向复制出来的新对象,而不再是原有的那些被引用的对象。换言之,深复制
Stella981 Stella981
3年前
JavaScript基础心法——深拷贝和浅拷贝
!(https://oscimg.oschina.net/oscnet/c131215a5aaaeb7909d7398688df6ea6dcd.png)浅拷贝和深拷贝都是对于JS中的引用类型而言的,浅拷贝就只是复制对象的引用,如果拷贝后的对象发生变化,原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。前言说到深浅拷贝,必须先