Javascript和jQuery的深浅拷贝详解
时间：2022-10-26 09:57:06|栏目：JavaScript代码|点击： 次
深浅拷贝在引用数据类型（数组对象）复制过程中产生的问题。
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);
总结
上一篇：ES6 13个新特性总结
栏 目：JavaScript代码
下一篇：javascript陷阱 一不小心你就中招了(字符运算)
本文地址：http://www.codeinn.net/misctech/217351.html
