Javascript和jQuery的深浅拷贝详解

2022-03-20

目录

JS的浅拷贝
JS的深拷贝
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的浅拷贝//创建一个arr2const arr2 = []; //将arr1中的数据按照jQuery的浅拷贝语法复制到arr2中//执行的是jQuery的浅拷贝$.extend( arr2 , arr1 ); //创建一个arr2const arr3 = []; //将arr1中的数据按照jQuery的深拷贝语法复制到arr3中//执行的是jQuery的深拷贝$.extend(true, arr3, arr1);

总结本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

推荐阅读

上一篇：LazyCaptcha自定义随机验证码和字体的示例详解

下一篇：.Net|.Net Core应用增强型跨平台串口类库CustomSerialPort()详解