1. 浅拷贝概念

浅拷贝的例子1：for in 进行浅拷贝

浅拷贝的例子2：定义数组进行浅拷贝

浅拷贝的例子3：利用Object.assign()方法进行拷贝

2. 深拷贝

3. 浅拷贝和深拷贝的应用：

4. jQuery的深拷贝和浅拷贝extend

1. 浅拷贝概念

针对复杂的数据类型，单独开辟新的内存空间，在栈里面会有地址指向这个空间，拷贝地址

浅拷贝：改变旧的对象的复杂数据类型的值，新的对象的对应值也会改变，借用一个博主的话，拷贝以后复杂数据类型不能够自食其力，就叫浅拷贝。

注意：深浅拷贝概念只针对于复杂数据类型，数组、对象、函数。

浅拷贝的例子1：for in 进行浅拷贝

        var obj = {name: 'a',msg: {age: 18,}}var o = {};for (var k in obj) {o[k] = obj[k];}console.log(o); // age是19 name还是aobj.name = 'b';obj.msg.age = 19;console.log(obj); // age是19 name是bconsole.log(o); // age是19 name是a

修改了obj的msg对象的age值，o对象的也发生变化，复杂数据类型无法自食其力

修改了obj的name值，o对象的没有发生变化，基本数据类型能够 “自食其力”

浅拷贝的例子2：定义数组进行浅拷贝

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

总结：

1. a数组赋值给了b数组
2. 紧接着修改a数组的一个值，b的数组也相应的变化，这个也是浅拷贝？这里存疑

浅拷贝的例子3：利用Object.assign()方法进行拷贝

        // assignlet obj11 = {name: 'Lily',age: '20',time: ['13', '15'],person: {name: 'Henry',age: '21'}};let obj12 = {age: '22'};let obj13 = Object.assign({}, obj11, obj12);// 1. 为什么age是22?obj11和obj12都是拷贝源,如果冲突 后面会覆盖前面的console.log(obj13); // 2. 不会改变obj11的ageobj13.age = '25'; console.log(obj11.age); // 20// 3. 会改变obj11的person.ageobj13.person.age = '25'; // console.log(obj11.person.age); //25// 4. 会改变obj11的time值obj13.time[1] = '25'; // console.log(obj11.time[1]); // 25

首先明确，assign可以有多个参数，第一个永远是目标对象，后面的对象是拷贝来源。

但是注意！

1. 当obj01和obj02都有基本数据类型age时，后面覆盖前面

2. 基本数据类型obj13的age改变了，不会影响obj01的age值。

3. obj13.person.age的值改变了以及obj13.time[1]的值改变了，因为是复杂数据类型对象和数组，所以都会影响obj11和obj12的值。

浅拷贝的例子4：对象的浅拷贝

        // 1、 直接赋值 是浅拷贝 数据绑定let obj01 = {name: 'Lily',age: '20',time: ['13', '15'],person: {name: 'Henry',age: '21'}};let obj02 = obj01; // 直接赋值是浅拷贝obj02.age = '25'; // 25 会改变obj01的age 无法自食其力console.log(obj01.age);obj01.name = '你好'; console.log(obj02.name); // '你好'无法自食其力 obj02.person.age = '25'; //会改变obj01的person.ageconsole.log(obj01.person.age); // 25obj02.time[1] = '25'; //会改变obj01的time值console.log(obj01.time[1]); // 25

注意对象在利用let进行拷贝赋值，也是浅拷贝

但是！，obj01.name和age改变时，也会影响obj02,本来基本数据类型应该是可以自食其力不受影响的。我也给整蒙了，明天再思考。有没有小伙伴出处注意呢？

2. 深拷贝

概念：

newObj拷贝了oldObj的值，拷贝之后，修改newObj的复杂数据类型值，oldObj的复杂数据值不会改变。能够自食其力

逻辑

1. 先判断对象里的元素是数组吗？

1.1 如果是，新对象里面的对应属性的属性值，让其创建一个新数组，递归

1.2 如果不是数组，再判断是不是对象，如果是，新对象对应的属性值，让其创建一个新对象，递归

2. 递归点， oldObj的属性值赋值给newObj对应的属性，newObj[k] = item;

        var furn = {size: '10',msg: {size: '100',msg: {size: '1000'}}};function deepCopy(newObj, oldObj) {for (var k in oldObj) {var item = oldObj[k];if (item instanceof Array) {newObj[k] = [];deepCopy(newObj[k], item);} else if (item instanceof Object) {newObj[k] = {};deepCopy(newObj[k], item);} else {newObj[k] = item;}}return newObj;}console.log(deepCopy(furn));

最终输出的结果，是拷贝之后的元素

另一种写法

        function DeepClone(obj) {if (typeof obj !== 'object' || obj === null) {debuggerreturn obj}debuggerlet result = Array.isArray(obj) ? [] : {}for (let key in obj) {debuggerif (obj.hasOwnProperty(key)) {// 保证key不是原型的属性result[key] = DeepClone(obj[key])debugger}}return result}

3. 浅拷贝和深拷贝的应用：

后台返回一些数据，需要对这些数据进行操作：比如增加、删除、修改、查询等，即便复制了数据对象，

如果是浅拷贝，复杂数据类型，拷贝后修改仍然会影响oldObj

深拷贝，不会影响，更加安全

4. jQuery的深拷贝和浅拷贝extend

如果不加参数，【记住，不加参数，而不是写false】，就是浅拷贝，复杂数据类型是传递地址，拷贝的是地址，拷贝之后新对象不能够自食其力

        var oldObj = {name: 'jmq',msg: {age: 20}}var newObj = {};// 1. 浅拷贝$.extend(newObj, oldObj);console.log(newObj); // jmq 19oldObj.name = 'syc';oldObj.msg.age = '19';console.log(oldObj); // syc 19console.log(newObj); // jmq  19

如果加了参数，true，就是深拷贝，拷贝复杂数据类型，新旧复杂数据类型指向的是不同的地址，不会同时改变

        $.extend(true, newObj1, oldObj1);console.log(newObj1); // jmq 20oldObj1.name = 'syc';oldObj1.msg.age = '19';console.log(oldObj1); // syc 19console.log(newObj1); // jmq 20

参考文章：

感觉下面这个博主写的特别的详细

js实现数组浅拷贝和深拷贝_xm1037782843的博客-CSDN博客_js 数组深拷贝

个人学习id：201903090124-26

JavaScript 浅拷贝与深拷贝概念及应用 Jquery的浅拷贝和深拷贝相关推荐

clone是深拷贝还是浅拷贝_Cloneable接口的作用与探索理解浅拷贝与深拷贝
导读:本文将主要讨论设计模式--原型模式中,关于cloneable接口及浅拷贝与深拷贝的概念. 原型模式的理解关于原型模式的理解,我在网上发现一个有趣且助于理解原型模式的例子在这里分享一下:火影忍者 ...
JavaScript入门几个概念
JavaScript入门几个概念刚刚入门JavaScript的时候,搞懂DOM.BOM以及它们的对象document和window很有必要. DOM是为了操作文档出现的API,document是它的 ...
jQuery相当于对 javascript二次开发，所以基于 jQuery实现的各种插件直接调用即可...
jQuery相当于对 javascript二次开发,所以基于 jQuery实现的各种插件直接调用即可转载于:https://www.cnblogs.com/npk19195global/p/4482 ...
JavaScript的几个概念简单理解（深入解释见You Don't know JavaScript这本书）
ES201X是JavaScript的一个版本. ES2015新的feature let, const Scope, 块作用域 Hoisting Closures DataStructures: Obj ...
js 浅拷贝直接赋值_JS中的赋值、浅拷贝与深拷贝
作者:奚杰拷贝是写代码中经常使用的方法.浅拷贝与深拷贝是指拷贝的两种情况.本文将深入探究JS的赋值.浅拷贝与深拷贝. 数据类型在探究深拷贝与浅拷贝之前,我们先梳理一下JS的数据类型.在JavaSc ...
Javascript笔记：（实践篇）从jQuery插件技术说起-分析extend方法的源码（发现extend方法里有bug）（下篇）...
1.1 分析$.extend源码在分析源码之前,我还要加一段s测试代码,代码如下: <script type="text/javascript"> $(doc ...
JavaScript实战手册（涵盖丰富的JQuery应用实例）
<JavaScript实战手册> [作者]David Sawyer McFarland 著 [译者]李强等译 [书号]978-7-111-25867-4 [定价]89.00元 [本书中的 ...
python赋值浅拷贝和深拷贝的区别_python赋值、浅拷贝、深拷贝区别
在写Python过程中,经常会遇到对象的拷贝,如果不理解浅拷贝和深拷贝的概念,你的代码就可能出现一些问题.所以,在这里按个人的理解谈谈它们之间的区别. 一.赋值(assignment) 在<Py ...
JavaScript高级程序设计基本概念
ECMAscript到底是什么?它和JavaScript的关系?(这个概念我也是百度的) 要讲清楚这个问题,需要回顾历史.1996年11月,JavaScript的创造者Netscape公司,决定将Ja ...

JavaScript 浅拷贝与深拷贝概念及应用 Jquery的浅拷贝和深拷贝

1. 浅拷贝概念

浅拷贝的例子1：for in 进行浅拷贝

浅拷贝的例子2：定义数组进行浅拷贝

浅拷贝的例子3：利用Object.assign()方法进行拷贝

2. 深拷贝

3. 浅拷贝和深拷贝的应用：

4. jQuery的深拷贝和浅拷贝extend

JavaScript 浅拷贝与深拷贝概念及应用 Jquery的浅拷贝和深拷贝相关推荐

最新文章

热门文章