jquery深拷贝,js 深拷贝

赋值，浅拷贝，深拷贝

对于引用类型来说：

1、【赋值】是相当于赋值了指针，并没有重新开辟一个新的内存空间。

也就是说：不管是多深的层次，只要有变化都会相互影响。

举例子：

2、【浅拷贝】：会开辟新的内存空间，但是只是对于引用类型里属性类型为简单类型的数据来说的（不会相互影响）。对于属性类型为引用类型的数据来说是会复制他的指针指向，不会开辟新的内存空间（改变引用类型的值，会相互影响）。

例子：

做了一个例子以为concat是深拷贝，因为都没有相互影响，其实是写错了，b[4]是引用类型，但是我直接给他赋值了，相当于给这个引用类型重新开辟了一个新的内存空间，所以不会影响到arr[4]。

例子如下：

对象的浅拷贝例子如下：

【深拷贝】:从里到外不管啥类型 都会重新开辟内存空间，所以不会相互影响。可以递归，可以loadsh里的方法，jquery的extend(深浅都可以)

相关问答

Q1: 如何实现数组深拷贝和浅拷贝？

如何实现数组深拷贝和浅拷贝？

1.背景介绍

javascript分原始类型与引用类型。Array是引用类型，直接用“=”号赋值的话，只是把源数组的地址(或叫指针)赋值给目的数组，并没有实现数组的数据的拷贝。这种方式的实现属于浅拷贝。

深拷贝是开辟新的储存空间，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。

2.知识剖析

一维数组的深拷贝方法：slice()和concat()

slice()的使用方法

slice()语法：arrayObj.slice(start,)

slice方法是通过参数start和end的传入值来返回数组中的一段，该方法不对原数组进行操作，而是返回一个子数组

start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值:返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素（如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素）。

concat()的使用方法

concat()语法：arrayObject.concat(arrayX,arrayX,......,arrayX)

arrayX：必需，可以是具体的值，也可以是数组对象。可以是任意多个。

concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组，而仅仅会返回一个新的数组。如果要进行 concat() 操作的参 数是数组，那么添加的是数组中的元素，而不是数组。

3.常见问题

1、jquery中数组深拷贝办法

语法：jQuery.extend( [deep ], target, object1 [, objectN ] )

将两个或更多对象的内容合并到第一个对象。

deep：可选。 Boolean类型 指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并。

2、什么是深拷贝？

深拷贝：指的是拷贝一个对象时，不仅仅把对象的引用进行复制，还把该对象引用的值也一起拷贝。这样进行深拷贝后的拷贝对象就和源对象互相独立，其中任何一个对象的改动都不会对另外一个对象造成影响。举个例子，一个人叫张三，然后使用克隆技术以张三来克隆另外一个人叫李四，这样张三和李四就是相互独立的，不管张三缺胳膊还是李四少腿了都不会影响另外一个人。在.NET领域，值对象就是典型的例子，如int, Double以及结构体和枚举等。

3、什么是浅拷贝呢？

浅拷贝：指的是拷贝一个对象时，仅仅拷贝对象的引用进行拷贝，但是拷贝对象和源对象还是引用同一份实体。此时，其中一个对象的改变都会影响到另一个对象。例如，一个人一开始叫张三，后来改名字为张老三了，可是他们还是同一个人，不管张三缺胳膊还是张老三少腿，都反应在同一个人身上。在.NET中引用类型就是一个例子。

4 解决方案

jquery.extend()

语法：jQuery.extend( [deep ], target, object1 [, objectN ] )

将两个或更多对象的内容合并到第一个对象。

deep：可选。 Boolean类型 指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并。

5.编码实战

6.扩展思考

slice和concat对数组深拷贝的局限性

slice和concat这两个方法，仅适用于对不包含引用对象的一维数组的深拷贝。对于数组内部存在对象和数组，当改变对象属性和内部数组的元素后，深拷贝的数组同样也发生了改变。

Q2: 深拷贝与浅拷贝的实现（一）

最近的学习中，仔细研究了下深拷贝和浅拷贝，下面就来简单的总结下。

首先我们了解下两种 数据类型 ：

1、基本类型：像Number、String、Boolean等这种为基本类型

2、复杂类型：Object和Array

接着我们分别来了解下浅拷贝和深拷贝，深拷贝和浅拷贝是只针对Object和Array这样的复杂类型的。

浅拷贝 ：

可以看出，对于对象或数组类型，当我们将a赋值给b，然后更改b中的属性，a也会随着变化。也就是说a和b指向了同一块内存，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝。

深拷贝 ：

刚刚我们了解了什么是浅拷贝，那么相应的，如果给b放到新的内存中，将a的各个属性都复制到新内存里，就是深拷贝。

也就是说，当b中的属性有变化的时候，a内的属性不会发生变化。

那么除了上面简单的赋值引用，还有哪些方法使用了 浅拷贝 呢？

Object.assign()

在MDN上介绍Object.assign()：”Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。”

复制一个对象

可以看到，Object.assign()拷贝的只是属性值，假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。所以Object.assign()只能用于浅拷贝或是合并对象。这是Object.assign()值得注意的地方。

那么下面我们就来说说复杂的 深拷贝 。

jQuery.extend()

说到深拷贝，第一想到的就是jQuery.extend()方法，下面我们简单看下jQuery.extend()的使用。

jQuery.extend( [deep ], target, object1 [, objectN ] )，其中deep为Boolean类型，如果是true，则进行深拷贝。

我们还是用上面的数据来看下extend()方法。

通过上面的对比可以看出，当使用extend()进行深拷贝的时候，对象的所有属性都添加到target中了。

我们知道了extend()可以进行深拷贝，那么extend()是如何实现深拷贝的呢？

先来看下jQuery.extend()源码

主要看下关于深拷贝的部分，取第一个参数，如果是boolean类型的，就赋值给deep，下面如果deep为true（也就是进行深拷贝），就递归调用extend()，这样就将对象的所有属性都添加到了target中实现了深拷贝。

JSON.parse()和JSON.stringify()

上面的jQuery源码是否让你眼花缭乱？有没有什么办法无脑实现深拷贝呢？JSON.parse()和JSON.stringify()给了我们一个基本的解决办法。

可以看到改变targetCopy并没有改变原始的target，继承的属性也没有丢失，因此实现了基本的深拷贝。

但是用JSON.parse()和JSON.stringify()会有一个问题。

JSON.parse()和JSON.stringify()能正确处理的对象只有Number、String、Array等能够被json表示的数据结构，因此函数这种不能被json表示的类型将不能被正确处理。

上面的例子可以看出，hello这个属性由于是函数类型，使用JSON.parse()和JSON.stringify()后丢失了。

因此JSON.parse()和JSON.stringify()还是需要谨慎使用。

Q3: JS 中深拷贝的几种实现方法

JS 中深拷贝的几种实现方法

1、使用递归的方式实现深拷贝

//使用递归的方式实现数组、对象的深拷贝

function deepClone1(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;

}

2、通过 JSON 对象实现深拷贝

//通过js的内置对象JSON来进行数组对象的深拷贝

function deepClone2(obj) {

var _obj = JSON.stringify(obj),

objClone = JSON.parse(_obj);

return objClone;

}

JSON对象实现深拷贝的一些问题

* 无法实现对对象中方法的深拷贝

3、通过jQuery的extend方法实现深拷贝

var array = [1,2,3,4];

var newArray = $.extend(true,[],array);

4、Object.assign()拷贝

当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝。

5、lodash函数库实现深拷贝

lodash很热门的函数库，提供了 lodash.cloneDeep()实现深拷贝