php深浅拷贝,JavaScript 中的深浅拷贝

工作中经常会遇到需要复制 JavaScript 数据的时候,遇到 bug 时实在令人头疼;面试中也经常会被问到如何实现一个数据的深浅拷贝,但是你对其中的原理清晰吗?一起来看一下吧!

一、为什么会有深浅拷贝

想要更加透彻的理解为什么 JavaScript 会有深浅拷贝,需要先了解下 JavaScript 的数据类型有哪些,一般分为基本类型(Number、String、Null、Undefined、Boolean、Symbol )和引用类型(对象、数组、函数)。

基本类型是不可变的,任何方法都无法改变一个基本类型的值,也不可以给基本类型添加属性或者方法。但是可以为引用类型添加属性和方法,也可以删除其属性和方法。

基本类型和引用类型在内存中的存储方式也大不相同,基本类型保存在栈内存中,而引用类型保存在堆内存中。为什么要分两种保存方式呢? 因为保存在栈内存的必须是大小固定的数据,引用类型的大小不固定,只能保存在堆内存中,但是我们可以把它的地址写在栈内存中以供我们访问。

说来这么多,我们来看个示例:

let num1 = 10;

let obj1 = {

name: "hh"

}

let num2 = num1;

let obj2 = obj1;

num2 = 20;

obj2.name = "kk";

console.log(num1); // 10

console.log(obj1.name); // kk

执行完这段代码,内存空间里是这样的:

bVblqXC?w=1112&h=626

可以看到 obj1 和 obj2 都保存了一个指向该对象的指针,所有的操作都是对该引用的操作,所以对 obj2 的修改会影响 obj1。

小结:

之所以会出现深浅拷贝,是由于 JS 对基本类型和引用类型的处理不同。基本类型指的是简单的数据段,而引用类型指的是一个对象保存在堆内存中的地址,JS 不允许我们直接操作内存中的地址,也就是说不能操作对象的内存空间,所以,我们对对象的操作都只是在操作它的引用而已。

在复制时也是一样,如果我们复制一个基本类型的值时,会创建一个新值,并把它保存在新的变量的位置上。而如果我们复制一个引用类型时,同样会把变量中的值复制一份放到新的变量空间里,但此时复制的东西并不是对象本身,而是指向该对象的指针。所以我们复制引用类型后,两个变量其实指向同一个对象,所以改变其中的一个对象,会影响到另外一个。

二、深浅拷贝

1. 浅拷贝

浅拷贝只是复制基本类型的数据或者指向某个对象的指针,而不是复制对象本身,源对象和目标对象共享同一块内存;若对目标对象进行修改,存在源对象被篡改的可能。

我们来看下浅拷贝的实现:

/* sourceObj 表示源对象

* 执行完函数,返回目标对象

*/

function shadowClone (sourceObj = {}) {

let targetObj = Array.isArray(sourceObj) ? [] : {};

let copy;

for (var key in sourceObj) {

copy = sourceObj[key];

targetObj[key] = copy;

}

return targetObj;

}

// 定义 source

let sourceObj = {

number: 1,

string: 'source1',

boolean: true,

null: null,

undefined: undefined,

arr: [{name: 'arr1'}, 1],

func: () => 'sourceFunc1',

obj: {

string: 'obj1',

func: () => 'objFunc1'

}

}

// 拷贝sourceObj

let copyObj = shadowClone(sourceObj);

// 修改 sourceObj

copyObj.number = 2;

copyObj.string = 'source2';

copyObj.boolean = false;

copyObj.arr[0].name = 'arr2';

copyObj.func = () => 'sourceFunc2';

copyObj.obj.string = 'obj2';

copyObj.obj.func = () => 'objFunc2';

// 执行

console.log(sourceObj);

/* {

number: 1,

string: 'source1',

boolean: true,

null: null,

undefined: undefined,

arr: [{name: 'arr2'}],

func: () => 'sourceFunc1',

obj: {

func: () => 'objFunc2',

string: 'obj2'

}

}

*/

2. 深拷贝

深拷贝能够实现真正意义上的对象的拷贝,实现方法就是递归调用“浅拷贝”。深拷贝会创造一个一模一样的对象,其内容地址是自助分配的,拷贝结束之后,内存中的值是完全相同的,但是内存地址是不一样的,目标对象跟源对象不共享内存,修改任何一方的值,不会对另外一方造成影响。

/* sourceObj 表示源对象

* 执行完函数,返回目标对象

*/

function deepClone (sourceObj = {}) {

let targetObj = Array.isArray(sourceObj) ? [] : {};

let copy;

for (var key in sourceObj) {

copy = sourceObj[key];

if (typeof(copy) === 'object') {

if (copy instanceof Object) {

targetObj[key] = deepClone(copy);

} else {

targetObj[key] = copy;

}

} else if (typeof(copy) === 'function') {

targetObj[key] = eval(copy.toString());

} else {

targetObj[key] = copy;

}

}

return targetObj;

}

// 定义 sourceObj

let sourceObj = {

number: 1,

string: 'source1',

boolean: true,

null: null,

undefined: undefined,

arr: [{name: 'arr1'}],

func: () => 'sourceFunc1',

obj: {

string: 'obj1',

func: () => 'objFunc1'

}

}

// 拷贝sourceObj

let copyObj = deepClone(sourceObj);

// 修改 source

copyObj.number = 2;

copyObj.string = 'source2';

copyObj.boolean = false;

copyObj.arr[0].name = 'arr2';

copyObj.func = () => 'sourceFunc2';

copyObj.obj.string = 'obj2';

copyObj.obj.func = () => 'objFunc2';

// 执行

console.log(sourceObj);

/* {

number: 1,

string: 'source1',

boolean: true,

null: null,

undefined: undefined,

arr: [{name: 'arr1'}],

func: () => 'sourceFunc1',

obj: {

func: () => 'objFunc1',

string: 'obj1'

}

}

*/

两个方法可以合并在一起:

/* deep 为 true 表示深复制,为 false 表示浅复制

* sourceObj 表示源对象

* 执行完函数,返回目标对象

*/

function clone (deep = true, sourceObj = {}) {

let targetObj = Array.isArray(sourceObj) ? [] : {};

let copy;

for (var key in sourceObj) {

copy = sourceObj[key];

if (deep && typeof(copy) === 'object') {

if (copy instanceof Object) {

targetObj[key] = clone(deep, copy);

} else {

targetObj[key] = copy;

}

} else if (deep && typeof(copy) === 'function') {

targetObj[key] = eval(copy.toString());

} else {

targetObj[key] = copy;

}

}

return targetObj;

}

三、使用技巧

1. concat()、slice()

(1)若拷贝数组是纯数据(不含对象),可以通过concat() 和 slice() 来实现深拷贝;

let a = [1, 2];

let b = [3, 4];

let copy = a.concat(b);

a[1] = 5;

b[1] = 6;

console.log(copy);

// [1, 2, 3, 4]

let a = [1, 2];

let copy = a.slice();

copy[0] = 3;

console.log(a);

// [1, 2]

(2)若拷贝数组中有对象,可以使用 concat() 和 slice() 方法来实现数组的浅拷贝。

let a = [1, {name: 'hh1'}];

let b = [2, {name: 'kk1'}];

let copy = a.concat(b);

copy[1].name = 'hh2';

copy[3].name = 'kk2';

console.log(copy);

// [1, {name: 'hh2'}, 2, {name: 'kk2'}]

无论 a[1].name 或者 b[1].name 改变,copy[1].name 的值都会改变。

let a = [1, {name: 'hh1'}];

let copy = a.slice();

copy[1].name = 'hh2';

console.log(a);

// [1, {name: 'hh2'}]

改变了 a[1].name 后,copy[1].name 的值也改变了。

2. Object.assign()、Object.create()

Object.assign()、Object.create() 都是一层(根级)深拷贝,之下的级别为浅拷贝。

(1) 若拷贝对象只有一级,可以通过 Object.assign()、Object.create() 来实现对象的深拷贝;

let sourceObj = {

str: 'hh1',

number: 10

}

let targetObj = Object.assign({}, sourceObj)

targetObj.str = 'hh2'

console.log(sourceObj);

// {str: 'hh1', number: 10}

let sourceObj = {

str: 'hh1',

number: 10

}

let targetObj = Object.create(sourceObj)

targetObj.str = 'hh2'

console.log(sourceObj);

// {str: 'hh1', number: 10}

(2) 若拷贝对象有多级, Object.assign()、Object.create() 实现的是对象的浅拷贝。

let sourceObj = {

str: 'hh',

number: 10,

obj: {

str: 'kk1'

}

}

let targetObj = Object.assign({}, sourceObj)

targetObj.obj.str = 'kk2'

console.log(sourceObj);

// {

// str: 'hh',

// number: 10,

// obj: {

// str: 'kk2'

// }

// }

let sourceObj = {

str: 'hh',

number: 10,

obj: {

str: 'kk1'

}

}

let targetObj = Object.create(sourceObj)

targetObj.obj.str = 'kk2'

console.log(sourceObj);

// {

// str: 'hh',

// number: 10,

// obj: {

// str: 'kk2'

// }

// }

修改了 targetObj.obj.str 的值之后,sourceObj.obj.str 的值也改变了。

3. 对象的解构

对象的解构同 Object.assign() 和 Object.create(),都是一层(根级)深拷贝,之下的级别为浅拷贝。

(1)若拷贝对象只有一层,可以通过对象的解构来实现深拷贝;

let sourceObj = {

str: 'hh1',

number: 10

}

let targetObj = {...sourceObj};

targetObj.str = 'hh2'

console.log(sourceObj);

// {str: 'hh1', number: 10}

(2)若拷贝对象有多层,通过对象的解构实现的是对象的浅拷贝。

let sourceObj = {

str: 'hh',

number: 10,

obj: {

str: 'kk1'

}

}

let targetObj = {...sourceObj};

targetObj.obj.str = 'kk2'

console.log(sourceObj);

// {

// str: 'hh',

// number: 10,

// obj: {

// str: 'kk2'

// }

// }

4. JSON.parse()

用 JSON.stringify() 把对象转成字符串,再用 JSON.parse() 把字符串转成新的对象,可以实现对象的深复制。

let source = ['hh', 1, [2, 3], {name: 'kk1'}];

let copy = JSON.parse(JSON.stringify(source));

copy[2][1] = 4;

copy[3].name = 'kk2';

console.log(source);

// ['hh', 1, [2, 3], {name: 'kk1'}]

可以看出,虽然改变了 copy[2].name 的值,但是 source[2].name 的值没有改变。

JSON.parse(JSON.stringify(obj)) 不仅能复制数组还可以复制对象,但是几个弊端:

1)它会抛弃对象的 constructor,深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成 Object;

2)这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象,即那些能够被 json 直接表示的数据结构。RegExp 对象是无法通过这种方式深拷贝。

3)只有可以转成 JSON 格式的对象才可以这样用,像 function 没办法转成 JSON。

5. 可以使用的库

以下两种库都能实现深浅拷贝,有各自的使用方法。

jQuery

具体使用可以参考:官方文档

Lodash

具体使用可以参考:官方文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/392289.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Python进行地理编码和反向地理编码

Geocoding is the process of taking input text, such as an address or the name of a place, and returning a latitude/longitude location. To put it simply, Geocoding is converting physical address to latitude and longitude.地理编码是获取输入文本(例如地址或地点…

[Object-C语言随笔之三] 类的创建和实例化以及函数的添加和调用!

上一小节的随笔写了常用的打印以及很基础的数据类型的定义方式,今天就来一起学习下如何创建类与函数的一些随笔; 首先类的创建:在Xcode下,菜单File-New File,然后出现选择class模板,如下图&…

2024-AI人工智能学习-安装了pip install pydot但是还是报错

2024-AI人工智能学习-安装了pip install pydot但是还是报错 出现这样子的错误: /usr/local/bin/python3.11 /Users/wangyang/PycharmProjects/studyPython/tf_model.py 2023-12-24 22:59:02.238366: I tensorflow/core/platform/cpu_feature_guard.cc:182] This …

带彩色字体的man pages(debian centos)

1234567891011121314151617181920212223242526272829303132333435363738我的博客已迁移到xdoujiang.com请去那边和我交流简介most is a paging program that displays,one windowful at a time,the contents of a file on a terminal. It pauses after each windowful and prin…

Zabbix 3.0 从入门到精通(zabbix使用详解)

第1章 zabbix监控 1.1 为什么要监控 在需要的时刻,提前提醒我们服务器出问题了 当出问题之后,可以找到问题的根源 网站/服务器 的可用性 1.1.1 网站可用性 在软件系统的高可靠性(也称为可用性,英文描述为HA,High Avail…

Maven基础。

---恢复内容开始--- Maven: 1、概念。 * maven 是一个项目管理工具。 * maven的作用。 1、jar包。依赖管理。将jar包放在jar包仓库(pom.xml),不需要每个项目都添加jar包。 2、测试。 3、项目发布。 2、使用。 * 下载解压即可。 * 环境变量配置…

Dinosaur Run - Dinosaur world Games

转载于:https://www.cnblogs.com/hotmanapp/p/7092669.html

Go_ go mod 命令解决墙的问题

简介 由于众所周知的原因,在下载一些库的时候会下载不了,比如 golang.org/x/... 相关的库。为此,网上出现了很多解决方案。 从 Go1.11 开始,Go 引入了 module,对包进行管理,通过 go mod 命令来进行相关操作…

用导函数的图像判断原函数的单调性

前言 典例剖析 例1(给定\(f(x)\)的图像,确定\(f(x)\)的单调性,最简单层次) 题目暂略。 例2(用图像确定\(f(x)\)的正负,确定\(f(x)\)的单调性,2017聊城模拟) 已知函数\(yxf(x)\)的图像如图所示(其中\(f(x)\)是函数\(f(x)\)的导函数…

朴素贝叶斯 半朴素贝叶斯_使用朴素贝叶斯和N-Gram的Twitter情绪分析

朴素贝叶斯 半朴素贝叶斯In this article, we’ll show you how to classify a tweet into either positive or negative, using two famous machine learning algorithms: Naive Bayes and N-Gram.在本文中,我们将向您展示如何使用两种著名的机器学习算法&#xff…

python3:面向对象(多态和继承、方法重载及模块)

1、多态 同一个方法在不同的类中最终呈现出不同的效果,即为多态。 class Triangle:def __init__(self,width,height):self.width widthself.height heightdef getArea(self):areaself.width* self.height / 2return areaclass Square:def __init__(self,size):sel…

深入单例模式 java,深入单例模式四

Java代码 privatestaticClass getClass(String classname)throwsClassNotFoundException {ClassLoader classLoader Thread.currentThread().getContextClassLoader();if(classLoader null)classLoader Singleton.class.getClassLoader();return(classLoader.loadClass(class…

linux下配置SS5(SOCK5)代理服务

SOCK5代理服务器 官网: http://ss5.sourceforge.net/ yum -y install gcc gcc-c automake make pam-devel openldap-devel cyrus-sasl-devel 一、安装 # tar xvf ss5-3.8.9-5.tar.gz # cd ss5-3.8.9-5 # ./configure && make && make install 二、修改配置文…

去除list集合中重复项的几种方法

因为用到list&#xff0c;要去除重复数据&#xff0c;尝试了几种方法。记录于此。。。 测试数据&#xff1a; List<string> li1 new List<string> { "8", "8", "9", "9" ,"0","9"};List<string&g…

Crystal Reports第一张报表

新建一个网站项目&#xff0c;1. 设置数据库 从服务器资源管理器中&#xff0c;数据连接中添加新连接&#xff0c;用Microsoft Access数据库文件作为数据提供程序&#xff0c;连接上Crystal Reports的用例的数据库Xtreme2. 创建新Crystal Reports报表 在工程项目中添加一个…

品牌推广前期要进行哪些针对性的步骤?

企业在品牌推广前需要制订一系列有针对性和连续性的步骤&#xff0c;这些步骤定睛于长期策略&#xff0c;而且要适应目标客户的使用方式和习惯。在企业内部导入品牌VI是前提&#xff0c;外部的宣传则是强调品牌所宣扬的内涵和精神实质&#xff0c;总体来说&#xff0c;这只是一…

php的set 容器,关于STL中set容器的一些总结

1.关于setC STL 之所以得到广泛的赞誉&#xff0c;也被很多人使用&#xff0c;不只是提供了像vector, string, list等方便的容器&#xff0c;更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构操作。vector封装数组&#xff0c;list封装了链表&#xff0c;map和set…

导入导出报错

导入导出报错&#xff1a;另&#xff1a;右键--共享&#xff1a;停止共享&#xff1b;可能无效。此时&#xff0c;可以通过修改文件夹的权限&#xff0c;来达到停止共享的目的&#xff1b;转载于:https://www.cnblogs.com/chenjx/p/7107336.html

mysql复制的工作原理及主从复制的实现

mysql的复制功能主要有3个步骤主服务器将改变记录到二进制日志中&#xff0c;&#xff08;这些记录叫做二进制日志事件&#xff09;从服务器将主服务器的二进制日志事件拷贝到它的中继日志中从服务器重做中继日志中的事件。该过程的第一部分就是主服务器记录二进制日志&#xf…

Office 365 系列之九:配置和体验 Exchange 和 Lync

在之前的篇章中&#xff0c;我们已经安装好 Office 365 Pro Plus 和通过 O365 订阅激活了。接下来我们来看看具体怎么配置和使用 Exchange 和 Skype, 这部分内容对于学习过 Exchange Server 2016 和 Skype For Business 2015 的同学来说就很简单了。通过 OWA 访问 Exchange 对于…