JavaScript 的深浅拷贝

深浅拷贝
所谓的深拷贝浅拷贝是对引用数据类型而言的
如果变量储存的数据是基本数据类型例如字符串,数值,布尔值等
没有所谓的深浅拷贝

浅拷贝所谓的 浅拷贝 只是 复制变量中存储的内存地址效果是 多个变量 存储相同的 内存地址, 操作相同的存储空间一个变量的操作 会影响所有的变量

// a储存数值100
var a = 100;
// 将 a 储存的数据100赋值给b
var b = a;
// 将 a 储存的数值修改为北京 不影响b储存的数据
a = '北京';// c 储存的是 数组的内存地址
var c = [1,2,3,4,5];
// 将 c 储存的数组的内存地址 赋值给 变量d储存
// 也就是 变量c 和 变量d 储存的是 相同的内存地址
// 浅拷贝
var d = c;
// 本质上 通过 变量c 和 通过 变量d 操作的是 同一个内存地址中存储的数组
//  通过变量c 修改 数组 也会影响 变量d
c[0] = '北京';
console.log( d )

深拷贝所谓的 深拷贝 是 全完复制 引用数据类型存储的数据不仅仅是 复制 引用数据类型的内存地址一般的操作方式是 循环遍历 引用数据类型 完全复制 数据数值

 // c 储存的是 数组的内存地址
var c = [1,2,3,4,5];// 深拷贝
//给e一个空数组
var e = [];
//把c数组forEach循环遍历  item 拿他的数值
c.forEach( item=>{//把这个数值全部写入到e数组中e.push(item);
});
// 通过c的修改,不会影响e存储的数据
c[0] = '北京';console.log(c);
console.log(e);

 总结:1,  只有 引用数据类型才有 深浅拷贝     基本数据类型没有2,  浅拷贝 复制 引用数据类型的内存地址效果: 多个变量,都存储相同的 内存地址,操作同一个内存空间中存储的引用数据类型一个变量操作,所有变量都受影响3,  深拷贝 复制 引用数据类型存储的具体的数据数值效果: 多个变量,存储不同的内存地址 一个变量操作,不会影响其他变量实际项目中 原生 JavaScript 深浅拷贝 要使用 递归函数实现循环遍历变量 如果 存储的数据 数据类型是:对象,数组,函数就执行 递归函数 进行 深拷贝如果不是 引用类型 就直接 赋值浅拷贝 你变我也变   始终是有一个引用数据类型 拷贝的是地址深拷贝 你变我不变   多个引用数据类型 拷贝的数据数值

** jQuery的深拷贝**

 语法:$.extend( 变量1 , 变量2 , 变量3 );           $.extend( true , 变量1 , 变量2 , 变量3 ); 将 变量1  之后 所有变量的数据 都 拷贝 至 变量1中理论上 所有变量 都应该存储 引用书类型也就是 变量2 变量3 都应该是 引用数据类型如果变量2变量3 数据单元存储的是 基本数据类型执行的默认都是 深拷贝 如果变量2变量3 数据单元存储的是 引用数据类型默认执行的是 浅拷贝添加第一个参数是 true 执行的是 深拷贝

<script src="../../../jquery.min.js"></script>
<script>// 原始的 arr 数组var arr = [1,2,3,4,5,{name:'张三',age:18}];// 创建的新数组arr1var arr1 = [];// 将 arr的数据 复制 给 新数组 arr1// 如果arr数据单元存储的是 引用数据类型 执行浅拷贝$.extend( arr1 , arr );var arr2 = [];// 如果arr数据单元存储的是 引用数据类型 执行深拷贝$.extend( true , arr2 , arr );// 索引0 原始存储的是 数值1 是基本数据类型// 默认都是执行 深拷贝 // 也就是 原始arr 操作 arr1 和 arr2 拷贝的数据 不受影响arr[0] = '北京';// 索引5 原始存储的是 对象 是 引用数据类型// 默认执行的是 浅拷贝// 添加第一个参数true 执行的才是深拷贝// arr操作对象,不会对深拷贝产生影响arr[5].name = '李四';console.log( arr );console.log( arr1 );console.log( arr2 );</script>

JavaScript 的深浅拷贝相关推荐

JavaScript的深浅拷贝
首先,要知道基本类型是没有深浅拷贝之分的,因为基本类型在进行复制时,就是将值直接复制给另一个: 而引用类型在进行复制时,由于占用内存比较大,只会复制引用地址,相当于复制只是共用了同一个对象/数组. 这 ...
Java三维数组深度复制,JavaScript —— 如何深浅拷贝数组
这两天遇到了一个问题,如何复制数组,所以就从各个地方找了很多的解决办法.算是整理一下,这样以便于自己以后的学习: 目录浅拷贝数组深拷贝数组 1.使用数组遍历赋值原理代码实现 2.返回新数组方法 ...
数组深拷贝_JavaScript之深浅拷贝
前面给大家分享过了JavaScript的类型判断,今天来跟大家分享一下JavaScript的深浅拷贝. 1. 数组的浅拷贝如果是数组,我们可以利用数组的一些方法比如:slice.concat 返回一 ...
php深浅拷贝,JavaScript 中的深浅拷贝
工作中经常会遇到需要复制 JavaScript 数据的时候,遇到 bug 时实在令人头疼:面试中也经常会被问到如何实现一个数据的深浅拷贝,但是你对其中的原理清晰吗?一起来看一下吧! 一.为什么会有深浅 ...
JS（JavaScript）中实现深浅拷贝的几种方式（详细阅读非常重要）。
在了解深浅拷贝之前,我们先一起来简单来了解一下,JavaScript 数据存储的方式,以及数据类型(). JavaScript 中数据存储分为简单数据类型和复杂数据类型(引用数据类型) 其中 5 种 ...
JavaScript进阶教程(6)—硬核动图让你轻松弄懂递归与深浅拷贝
目录一.递归 1.1 概念 1.2 出口 1.3 递归经典问题:递归求斐波那契数列 1.4 递归经典问题:递归求阶乘 1.5 递归求一个数字各个位数上的数字的和 1.6 递归遍历DOM树二深浅拷 ...
JavaScript学习笔记（四）---闭包、递归、柯里化函数、继承、深浅拷贝、设计模式
JavaScript学习笔记(四)---闭包.递归.柯里化函数.继承.深浅拷贝.设计模式 1. 匿名函数的使用场景 2.自运行 3.闭包 3.1前提: 3.2闭包 4.函数对象的三种定义方式 5.th ...
JavaScript专题（五）深浅拷贝
JavaScript专题之深浅拷贝了解拷贝背后的过程,避免不必要的错误,Js专题系列之深浅拷贝,我们一起加油- 目录一.拷贝示例二.浅拷贝三.深拷贝的方法? 四.自己实现深浅拷贝一.拷贝示例 ...
boolean类型_JS核心理论之《数据类型、类型转换、深浅拷贝与参数传递》
数据类型基本类型:共7种,也被称为值类型,是一种既非对象也无方法的数据.包括:string.number.bigint.boolean.null.undefined.symbol. 除了 null ...

JavaScript 的深浅拷贝

JavaScript 的深浅拷贝相关推荐

最新文章

热门文章

JavaScript 的 深浅 拷贝

JavaScript 的 深浅 拷贝相关推荐

最新文章

热门文章

JavaScript 的深浅拷贝

JavaScript 的深浅拷贝相关推荐