前言

拷贝这个词大家都懂,今天就聊聊什么是深拷贝和浅拷贝

一、简单了解浅拷贝和深拷贝

1.1 浅拷贝

就拿一个案例来讲:比方说我们生活中使用的信用卡，信用卡有主卡和副卡之分,在使用主卡进行消费时，副卡的额度也会发生变化,副卡进行消费时,也会影响到主卡。这就是一个浅拷贝的案例。

1.2 深拷贝

谈到深拷贝,我们就不得不聊一个人,那就是旗木卡卡西,一个copy界的大神,一生复制了无数的忍术,他复制了别人的忍术,但并不会影响到别人使用这个忍术,这就是深拷贝。

二、代码中浅拷贝和深拷贝

js中的数据类型包含：基本数据类型和引用数据类型
基本数据类型:字符串（string）、数值（number）、布尔值（boolean）、undefined、null ；
引用数据类型:对象（Object）、数组（Array）、函数（Function）；
对基本数据类型进行复制,并重新赋值,并不会影响到原来的变量,这就是深拷贝。

let myname = '提灯寻猫';
let age = myname;
age = 22;
console.log(myname); //提灯寻猫
console.log(age); //22

myname这个变量会在内存中开辟一个地址,存储一个值为提灯寻猫,age这个变量复制了myname所以他们指向的都是同一个地址,同时也指向同一个值,但对age重新赋值时,会在内存在开辟一个地址来存储另一个值22。

对引用数据类型进行复制,并重新赋值,这样会影响到原来的变量,这就是浅拷贝。

let obj1 = {myname: "提灯寻猫",age: 12
}
let obj2 = obj1;
obj2.age = 22;
//里面的age都变成22
console.log(obj1);
console.log(obj2);

对于引用数据类型来说,就有了堆和栈的说法,obj1会开辟一个内存地址,与值相对应(这就是栈),但这个内存地址的值又会被分配到另一个地址,在另一个地址中又创建了对应的值(也就是堆),obj2在进行复制时,就会通过栈一路找到堆进行复制,一旦修改,那么obj1和obj2都会受影响,因为它们指向的都是同一个地址。

三、concat、slice和Arry.form

concat、slice和Arry.form这些都是数组中的方法,使用这些方法就可以完成拷贝

concat
这个方法会创建一个拷贝当前数组的副本,然后把参数添加到副本末尾,如果不添加参数,就相当于拷贝副本,最后返回新构建的数组.

let list = ['上海', '加油'];
let copylist = [].concat(list);
copylist.push('中国')
console.log(list); //上海,加油
console.log(copylist); //上海,加油,中国

slice
不给slice传入参数,会返回一个新的数组,并且包含从头到尾的所有元素,即使后续对复制的数组进行元素添加也不会影响原数组.

let list = ['上海', '加油'];
let copylist = list.slice();
copylist.push('中国')
console.log(list);
console.log(copylist);

Arry.form
使用方式和上面的差不多,就不多做阐述.

let list = ['上海', '加油'];
let copylist = Array.from(list);
copylist.push('中国')
console.log(list);
console.log(copylist);

挖的坑
从上面的演示中,大家都以为是脱离了浅拷贝,实则不然,它们还是浅拷贝

let list = ['上海', '加油', { name: "一切都会过去的" }];
let copylist = Array.from(list);
copylist.push('中国')
copylist[2].name = '都会好起来的'
console.log(list);
console.log(copylist);

如果将数组中的数据改为引用数据类型,那么只要复制变量中修改内部的元素的值,那么原数组中的值也会发生变化,因为改为引用数据类型,里面的变量还是指向同一个地址

解决方法
使用JSON的方法完成深拷贝,先使用JSON.stringify()将JS对象转换为JSON字符串,在使用JSON.parse(),将JSON字符串转换成JS对象,这样得到的就是一个全新JS对象,与之前的内存地址不相连.

let list = ['上海', '加油', { name: "一切都会过去的" }];
let copylist = JSON.parse(JSON.stringify(list))
copylist.push('中国')
copylist[2].name = '都会好起来的'
console.log(list);
console.log(copylist);

js中的深拷贝和浅拷贝相关推荐

js中的深拷贝和浅拷贝区别
js中的深拷贝和浅拷贝与值传递和引用传递有着些许的关联,都是根据堆栈中数据的储存来传递数据. 下面主要说一下我对深拷贝和浅拷贝的理解: 简单举个例子来说明:当我们声明一个a变量并且赋值,并且让b等于a ...
重新梳理下js中的深拷贝和浅拷贝
参考链接: http://www.cnblogs.com/st-les... https://blog.csdn.net/hj7jay/... 浅拷贝: 1.最简单的浅拷贝就赋值. 由于js中的对象都 ...
JS中的深拷贝与浅拷贝
刚看完JS中的深浅拷贝,来记录分享一番,一起来开心的掉发吧. 首先了解深浅拷贝之前来看看JS中的几种数据类型,分别有String.Number.Boolean.undefined.null.Objec ...
理清JS中的深拷贝与浅拷贝
作者:Manjula Dube译者:前端小智来源:Medium 为了保证的可读性,本文采用意译而非直译. 浅拷贝是对象的逐位复制.创建一个新对象,该对象具有原始对象中值的精确副本.如果对象的任何字段是 ...
详细讲解js中的深拷贝与浅拷贝
1 概述深拷贝与浅拷贝在其它语言中也经常被提及到,在实际项目开发过程中也常常需要区分当前使用的到底是深拷贝还是浅拷贝,有时候在该使用深拷贝的地方,我们使用了浅拷贝,会导致深藏不露的bug. 2 数据 ...
python怎么避免浅拷贝_详谈Python中的深拷贝和浅拷贝
在平时工作中,经常涉及到数据的传递,在数据传递使用过程中,可能会发生数据被修改的问题.为了防止数据被修改,就需要在传递一个副本,即使副本被修改,也不会影响原数据的使用.为了生成这个副本,就产生了拷贝. ...
python中的深拷贝与浅拷贝
浅拷贝的时候,修改原来的对象,深拷贝的对象不会发生改变. 对象的赋值对象的赋值实际上是对象之间的引用:当创建一个对象,然后将这个对象赋值给另外一个变量的时候,python并没有拷贝这个对象,而只是拷 ...
C语言中的深拷贝和浅拷贝
http://www.cnblogs.com/zhanggaofeng/p/5421804.html C语言中的深拷贝和浅拷贝 //C语言中的深拷贝和浅拷贝 #define _CRT_SECURE_N ...
python中关于深拷贝和浅拷贝的详解
python中关于深拷贝和浅拷贝的详解概述在python的语法中,有两种变量的拷贝方式一种是深拷贝,一种是浅拷贝我们先说深拷贝语法这里需要通过导入系统的copy模块中的deepcopy才可 ...
vb.net中递归退到最外层_面试题被问到再也不慌，深究JavaScript中的深拷贝与浅拷贝...
" 点个关注,养成习惯,带你python爬虫的过程中学习前端 " JavaScript中的深拷贝和浅拷贝是前端面试中频繁被问到的一道题, 于是我也自己去查阅了一些资料, 然后动手敲 ...

js中的深拷贝和浅拷贝

文章目录

前言