深拷贝与浅拷贝

简单区分

深拷贝与浅拷贝的简单区分：

假设B复制了A，当修改A时，看B是否跟着改变：
若B也跟着改变，说明是浅拷贝；
若B没有变化，说明是深拷贝。

注意：一般情况下，深拷贝只针对较为复杂的object类型数据。

js数据类型

js中，有基本数据类型以及引用数据类型

基本数据类型

字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）
Symbol（ES6引入的新的原始数据类型，表示独一无二的值，主要用于解决属性名冲突的问题，作为标记）
BigInt（ES2020新增加的，是比Number类型支持范围更大的整数值）

引用数据类型

对象（Object）,其中包含了日期（Date）、函数（Function)、数组（Array）、正则（RegExp）等.

两者存储上的区别

基本数据类型：存储在栈中的简单数据段，它们的值直接存储在变量访问的位置

原因：基本类型数据占据的空间是固定的，所以将他们存储在较小的内存区域——栈，便于迅速查寻变量的值

基本数据类型的名与值都存储在栈内存中，例如：let a=1

当执行b=a时，b复制a的值，栈内存会新开辟一个内存给b

此时，b已经有了独立的存储空间，不受a的影响了，当修改a的值为a=2时，对b并不会造成影响。

虽然b不受a影响，但这也算不上深拷贝，因为深拷贝本身只针对较为复杂的object类型数据。

引用数据类型：存储在堆中的对象，存储在变量处的值是一个指针，指向存储对象的内存地址

原因：引用类型数据的大小会改变，不能把它放在栈中，否则会降低变量查寻速度，相反，地址的大小是固定的，可以存在栈中。

引用数据类型的名存储在栈内存中，值存储在堆内存中，栈内存会提供一个引用地址指向堆内存中的值。例如：

let a=[0,1,2,3],
b=a;
console.log(a===b);
a[0]=1;
console.log(a,b);

let a=[0,1,2,3]

当执行b=a时，即b复制a,b复制了a的引用地址，而并非堆内存中的值。

当使用a[0]=1进行数组修改时，由于a与b指向的是同一个地址，所以b也受影响，这也就是浅拷贝。

在实际开发中，深拷贝是非常有用的。例如后台返回了一堆数据，你需要对这堆数据做操作，但在多人开发情况下，你是没办法明确这堆数据是否有其它功能也需要使用，直接修改可能会造成隐性问题，深拷贝能帮你更安全安心的去操作数据，可以根据实际情况来使用深拷贝。

js实现深拷贝

（1）递归复制所有的层级属性（一层层地复制对象中的属性，直到值为基础类型）

//使用递归的方式实现数组、对象的深拷贝
function deepClone(obj) {//判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝var objClone = Array.isArray(obj) ? [] : {};//进行深拷贝的不能为空，并且是对象if (obj && typeof obj === "object") {for (key in obj) {if (obj.hasOwnProperty(key)) {if (obj[key] && typeof obj[key] === "object") {objClone[key] = deepClone1(obj[key]);} else {objClone[key] = obj[key];}}}}return objClone;
}

常用方法：

（1）借助JSON对象的parse和stringify方法

利用js的内置对象JSON来进行数组对象的深拷贝（无法实现对象中方法的深拷贝）

先来看看JSON对象parse和stringify的用法：

stringify() → JavaScript对象序列化为JSON字符串

parse() → 把JSON字符串解析为原生JavaScript值

例如：

let m=JSON.stringify([1,2,3])
console.log(m)
console.log(typeof(m))
let n=JSON.parse(m)
console.log(n)
console.log(typeof(n))

实现深拷贝：

function deepClone(obj) {   var _obj = JSON.stringify(obj),  console.log(_obj)   objClone = JSON.parse(_obj);   return objClone;
}
let a=[0,1,[2,3],4],b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

（2）jQuery的extend方法

$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝

target Object类型是目标对象，其他对象的成员属性将被附加到该对象上。

let a=[0,1,[2,3],4],b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

效果同上。

（3）Obiect.assign()拷贝
当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝.

let obj1 = { a: 1 };
let obj2 = Object.assign({}, obj1);
console.log(obj2)  // { a: 1 }obj1.a = 2;
console.log(obj1)  // { a: 2 }
console.log(obj2)  // { a: 1 }

Object.assign({}, obj1)的意思是先建立一个空对象{}，接着把obj1中所有的属性复制过去，所以obj2会长得跟obj1一样，这时候再修改obj2.b也不会影响obj1。

let obj1 = { a: { b : 1 }, c: 1 };
let obj2 = Object.assign({}, obj1);
console.log(obj2)  // { a: { b: 1 }, c: 1 }obj1.a.b = 2;
obj1.c = 3
console.log(obj1)  // { a: { b: 2 }, c: 3 }
console.log(obj2)  // { a: { b: 2 }, c: 1 }

可以看出，对象里面有二级属性的时候，里面的值还是会改变，这不是真正的深拷贝。

JavaScript 深拷贝与浅拷贝相关推荐

通俗易懂讲解JavaScript深拷贝和浅拷贝
基本类型和引用类型在开始讲解JavaScript的深拷贝和浅拷贝之前,先要认识JavaScript的两种基本数据类型.一种是基本类型(值类型),另外一种是引用类型.其中基本类型包括undefined ...
javascript深拷贝和浅拷贝
在JavaScript中,存在着这样的两种拷贝方式.分别是:深拷贝和浅拷贝,这两种拷贝在实际中非常的常见,如果读者是一个阅读源码的爱好者,相信多多少少对深拷贝和浅拷贝有所了解. 一.浅拷贝浅拷贝在现 ...
javaScript深拷贝和浅拷贝简单梳理
在了解深拷贝和浅拷贝之前,我们先梳理一下: JavaScript中,分为基本数据类型(原始值)和复杂类型(对象),同时它们各自的数据类型细分下又有好几种数据类型基本数据类型数字Number 字符串 ...
JavaScript深拷贝与浅拷贝
文章目录一.理解二.浅拷贝 1.用Js实现浅拷贝 2. 浅拷贝语法糖 2.1 写法 2.3 应用三.深拷贝用Js实现深拷贝一.理解浅拷贝:只是拷贝一层,更深层次对象级别的只拷贝了地址深拷 ...
详谈Javascript中的深拷贝和浅拷贝
数据复制是我们编程中经常会使用到的技术,对于普通数值数据来说,复制很简单,但是对于复杂类型比如对象的复制,就会有很多需要考虑的东西,比如我们经常说到的深拷贝和浅拷贝. 浅拷贝复制的对象和原始对象属性 ...
Javascript中的深拷贝和浅拷贝
文章目录 JavaScript中的变量类型深拷贝和浅拷贝的理解深拷贝和浅拷贝的实现方式为什么需要深拷贝和浅拷贝 JavaScript中的变量类型 (1).基本类型 JavaScript中的基本类 ...
vb.net中递归退到最外层_面试题被问到再也不慌，深究JavaScript中的深拷贝与浅拷贝...
" 点个关注,养成习惯,带你python爬虫的过程中学习前端 " JavaScript中的深拷贝和浅拷贝是前端面试中频繁被问到的一道题, 于是我也自己去查阅了一些资料, 然后动手敲 ...
javaScript对象的深拷贝和浅拷贝
深拷贝和浅拷贝定义浅拷贝:只是拷贝了基本类型的数据,而引用类型数据,复制后也是会发生引用,我们把这种拷贝叫做浅拷贝(浅复制).浅拷贝只复制指向某个对象的指针(引用地址),而不复制对象本身,新旧对象还 ...
低门槛彻底理解JavaScript中的深拷贝和浅拷贝
在说深拷贝与浅拷贝前,我们先看两个简单的案例: //案例1 var num1 = 1, num2 = num1; console.log(num1) //1 console.log(num2) //1 ...

JavaScript 深拷贝与浅拷贝

目录