JavaScript的浅拷贝 VS 深拷贝

意识上传
• 阅读 1289

我们常常会用到拷贝对象的功能,而拷贝有浅拷贝和深拷贝2种。这篇文章会着重讲2个方面:

1: 浅拷贝和深拷贝的区别
2: 浅拷贝和深拷贝的具体实现

拷贝,我们常常用在把A对象的属性copy到B对象,这样B对象就拥有了A对象的属性。当B对象的属性不是基本数据类型,而是数组或者对象的时候,就会出现浅拷贝和深拷贝的区别,具体看下文的解释:

1: 什么是浅拷贝?
紧接上文,当B对象的属性是数组或者对象的时候,浅拷贝是通过使A对象的同名属性指向B对象的属性的内存地址,从而达到copy的目的。这样的做法会造成一个问题,当我们改变B对象这个属性时,A对象的这个属性也会被改变,因为它们是指向同一段内存地址的。

我们直接看例子:

function shallowCopy(origin, destination) {
    for (let i in origin) {
        if (origin.hasOwnProperty(i)) {
            destination[i] = origin[i];
        }
    }
    return destination;
}

let origin = {age: 20, name: {firstName: 'nana'}};
let destination = {};

let result = shallowCopy(origin, destination);
console.log(result.name.firstName); // 'nana'
result.name.firstName = 'Lian';
console.log(origin.name.firstName); // 'Lian'

上面就是一个浅拷贝的实现。我们可以看到,因为name属性是一个对象,由于浅拷贝的实现机制,当我们改变result的name属性之后,origin对象的name属性也被影响了,这种结果可能不是我们想看到的。那我们来看一下深拷贝是怎么做的:

2: 深拷贝的实现机制
和浅拷贝不同的是,当源对象的属性是一个对象或者数组时,深拷贝会为目标对象开辟一段新的内存地址,然后把源对象属性的值一一拷贝到目标对象,而不是直接使二者指向同一段内存地址。我们来看代码实现:

function deepCopy(origin, destination) {
    for(let i in origin){
        if(typeof origin[i] === 'object'){
            if(origin[i].constructor === 'Array'){
                destination[i] = [];
            }else{
                destination[i] = {};
            }
            deepCopy(origin[i], destination[i]);
        }else{
            destination[i] = origin[i];
        }
    }

    return destination;
}

let destination = {class: '1-1'};
let origin = {age: 22, name: {firstName: 'nana'}};
let result = deepCopy(origin, destination);
console.log(result.name.firstName); // 'nana'
result.name.firstName = 'Lian';
console.log(result.name.firstName); // 'Lian'
console.log(origin.name.firstName);// 'nana'

当我们使用深拷贝来拷贝属性为对象或者数组的对象时,当我们改变结果对象的属性值时,源对象的同名属性并不会因此而改变。

深拷贝看起来似乎很完美,但是当源对象层级很深的时候,却面临一个性能的问题。所以在实际的使用中,要根据自己的需求来选择是采用浅拷贝还是深拷贝。

点赞
收藏
评论区
推荐文章
翼
4年前
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.深拷贝与浅拷贝  浅拷贝:只复制对象的引用,两个引用仍然指向同一个对象
晴空闲云 晴空闲云
3年前
也谈JavaScript浅拷贝和深拷贝
网上关于这个话题,讨论有很多了,根据各路情况我自己整理了一下,最后还是能接近完美的实现深拷贝,欢迎大家讨论。javascript中的对象是引用类型,在复制对象的时候就要考虑是用浅拷贝还是用深拷贝。直接赋值对象是引用类型,如果直接赋值给另外一个对象,那么只是赋值一个引用,实际上两个变量指向的同一个数据对象,如果其中一个对象的属性变更,那么另外一个也会变更。示
Java对象拷贝原理剖析及最佳实践
作者:宁海翔1前言对象拷贝,是我们在开发过程中,绕不开的过程,既存在于Po、Dto、Do、Vo各个表现层数据的转换,也存在于系统交互如序列化、反序列化。Java对象拷贝分为深拷贝和浅拷贝,目前常用的属性拷贝工具,包括Apache的
菜园前端 菜园前端
2年前
带你了解JS对象的浅拷贝和深拷贝
以下主要介绍了正常情况下的拷贝、浅拷贝、深拷贝三种方式的区别。正常拷贝:复制一个对象,它们的内存地址是相同的浅拷贝:拷贝对象的第一层属性深拷贝:拷贝对象多层的属性正常拷贝假设我们要复制一个对象,如果不对其进行深拷贝,那么改变其中一个对象后,另外一个对象也会
放学路上 放学路上
4年前
python 赋值引用 浅拷贝 深拷贝
一、基础概念1、直接赋值:其实就是对象的引用(别名)。2、浅拷贝(copy):拷贝父对象,不会拷贝对象的内部的子对象。3、深拷贝(deepcopy):copy模块的deepcopy方法,完全拷贝了父对象及其子对象。二、代码示例importcopya1,2,3,4,'a','b'原始对象ba
Souleigh ✨ Souleigh ✨
4年前
实现深拷贝的多种方式
实现深拷贝的多种方式简单来说,深拷贝主要是将另一个对象的属性值拷贝过来之后,另一个对象的属性值并不受到影响,因为此时它自己在堆中开辟了自己的内存区域,不受外界干扰。浅拷贝主要拷贝的是对象的引用值,当改变对象的值,另一个对象的值也会发生变化。1.简单深拷贝(一层浅拷贝)①for循环拷贝//只复制第一层的浅拷贝javascriptfunc
Wesley13 Wesley13
3年前
Java深拷贝和浅拷贝
1.浅复制与深复制概念⑴浅拷贝(浅克隆)   复制出来的对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象。⑵深拷贝(深克隆)   复制出来的所有变量都含有与原来的对象相同的值,那些引用其他对象的变量将指向复制出来的新对象,而不再是原有的那些被引用的对象。换言之,深复制
Stella981 Stella981
3年前
JavaScript的深拷贝和浅拷贝
一、数据类型数据分为基本数据类型(String,Number,Boolean,Null,Undefined,Symbol)和对象数据类型。、1.基本数据类型的特点:直接存储在栈(stack)中的数据2.引用数据类型的特点:存储的是该对象在栈中引用,真实的数据放在堆内存里。引用数据类型在栈中存储了指针,该指针指向堆中该实
Stella981 Stella981
3年前
Python Shallow Copy VS. Deep Copy (Python浅拷贝和深拷贝)
今天电面遇到Python中浅拷贝和深拷贝的区别,平时不经常用当然不知道了,回来就补个课。先举个非常常见的例子:import copylist1  1, 2, 3, 'a', 'b'list2  list1list3  copy.copy(list1)list4  copy.
Stella981 Stella981
3年前
JavaScript基础心法——深拷贝和浅拷贝
!(https://oscimg.oschina.net/oscnet/c131215a5aaaeb7909d7398688df6ea6dcd.png)浅拷贝和深拷贝都是对于JS中的引用类型而言的,浅拷贝就只是复制对象的引用,如果拷贝后的对象发生变化,原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。前言说到深浅拷贝,必须先