当前位置:主页 > 网页前端 > JavaScript代码 >

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);

总结

您可能感兴趣的文章:

相关文章