Javascript和jQuery的深浅拷贝详解

这篇文章主要为大家详细介绍了Javascript和jQuery的深浅拷贝，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

JS的浅拷贝

直接复制拷贝的是数组/对象的内存地址，本质上是一个引用数据类型，所有的变量存储的是相同的内存地址，操作的是同一个存储空间，任意一个变量的操作，其他变量都会受影响。如下所示：

const arr1 = ['北京', '上海', '广州', '深圳', '武汉']; const arr2 = arr1; console.log(arr1); console.log(arr2);

变量arr1中存储的是数组的内存地址，浅拷贝是将变量arr1中存储的数组的内存地址赋值给变量arr2存储，也就是变量arr2和变量arr1存储的是相同的内存地址，通过其中一个变量操作数组，另一个变量也受影响，将arr1里的北京改为天津，那么arr2里的北京也就变成了天津。

JS的深拷贝

复制拷贝的是数组/对象存储的数值数据，本质上执行几次深拷贝就有几个独立的引用数据类型，存储的是不同的内存地址，操作的是不同的存储空间，一个变量操作引用数据类型对其他变量没有影响，如下所示：

const arr1 = ['北京', '上海', '广州', '深圳', '武汉']; //创建一个新的引用数据类型 const arr3 = []; //循环遍历arr1将arr1中的存储获取之后，存储到arr3中 arr1.forEach(item => { arr3.push( item ); })

arr3是新的内存地址，只是存储的数据数值和arr1相同，arr1的操作是arr1内存地址对应的存储空间，和arr3的存储空间没有关系，也没有影响。arr1里的上海改为成都，arr3里面的数值不发生任何变化，所以，修改arr3里的数据，arr1里也同样没有变化。

jQuery的深浅拷贝

jQuery中的深浅拷贝比较特殊

1、jQuery中没有封装传统意义上的浅拷贝的函数

2、jQuery中封装的$.extend()默认执行的就是传统意义上的深拷贝

3、jQuery中的所谓的深浅拷贝，指的是一维数据深拷贝，二维数据浅拷贝

4、jQuery中深浅拷贝的语法形式

const 变量 = 数组/对象; $.extend(变量 , 原始数组/对象); //浅拷贝，一维数据 深拷贝，多维数据  浅拷贝 $.extend(true, 变量, 原始数组/对象); //深拷贝，一维数据 多维数据 都是深拷贝

如下所示：

//原始数组 const arr1 = ['北京' , '上海' , '广州' , '深圳' , '武汉' , [100,200,300,400] , {name:'王昭没有君啊' , age:22 , sex:'男'} ]; //jQuery的浅拷贝 //创建一个arr2 const arr2 = []; //将arr1中的数据按照jQuery的浅拷贝语法复制到arr2中 //执行的是jQuery的浅拷贝 $.extend( arr2 , arr1 ); //创建一个arr2 const arr3 = []; //将arr1中的数据按照jQuery的深拷贝语法复制到arr3中 //执行的是jQuery的深拷贝 $.extend(true, arr3, arr1);