Javascript和jQuery的深浅拷贝详解

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

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