#今日说码栏目# 深拷贝与浅拷贝
创始人
2024-02-17 04:34:55
0

 1、深拷贝

深拷贝的定义:在JS中,数据类型分为基本数据类型和引用数据类型两种,对于基本数据类型来说,它的值直接存储在栈内存中,而对于引用类型来说,它在栈内存中仅仅存储了一个引用,而真正的数据存储在堆内存中中。

深拷贝作用在引用类型上!例如:Object对象,Array数组
深拷贝不会拷贝引用类型的引用,而是将引用类型的值全部拷贝一份,形成一个新的引用类型,这样就不会发生引用错乱的问题,使得我们可以多次使用同样的数据,而不用担心数据之间会起冲突。

基本数据类型

var a = 1;
var b = a;
b = 2;
console.log(a); // 1
console.log(b); // 2

引用数据类型

var obj1 = {a:  1,b:  2,c:  3
}
var obj2 = obj1;
obj2.a = 5;
console.log(obj1.a);  // 5
console.log(obj2.a);  // 5

使用深拷贝的原因:我们希望在改变新的数组(或者原对象)的时候,不改变原数组(或者原对象)

深拷贝的四种方法

1、使用JSON.stringify() 使对象字符串化和  JSON.parse()  使字符串对象化  相互转换

①let _tmp = JSON.stringify(obj);//将对象转换为json字符串形式

②let result = JSON.parse(_tmp);//将转换而来的字符串转换为原生js对象

 var obj1 = {a: 1,b: 2,c: 3
}
var objString = JSON.stringify(obj1);
var obj2 = JSON.parse(objString);
obj2.a = 5;
console.log(obj1.a);  // 1
console.log(obj2.a); // 5

可以看到没有发生引用问题,修改obj2的数据,并不会对obj1造成任何影响
但是使用JSON.stringify()以及JSON.parse()它是不可以拷贝 undefined , function, RegExp 等等类型的

2、通过for in实现

function deepCopy1(obj) {let o = {}for(let key in obj) {o[key] = obj[key]}return o
}let obj = {a:1,b: undefined,c:function() {},
}
console.log(deepCopy1(obj))

 3、递归 (自身调用自身)

使用递归的方式实现数组、对象的深拷贝

function deepClone1(obj) {//判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝var objClone = Array.isArray(obj) ? [] : {};//进行深拷贝的不能为空,并且是对象或者是if (obj && typeof obj === "object") {for (key in obj) {if (obj.hasOwnProperty(key)) {if (obj[key] && typeof obj[key] === "object") {objClone[key] = deepClone1(obj[key]);} else {objClone[key] = obj[key];}}}}return objClone;
}

4.concat(数组的深拷贝)

使用concat合并数组,会返回一个新的数组。
对象是一个引用数据类型 普通的复制是一个浅拷贝

let arr_1 = [1, 2, false, 'a']
let arr_2 = [].concat(arr_1)arr_1[1] = 3  //给下标为1的地址重新赋值为3// arr_1中的数据更改,并不会影响arr_2
console.log(arr_1) // -> [1, 3, false, 'a']
console.log(arr_2) // -> [1, 2, false, 'a']

2、浅拷贝

浅拷贝的定义:自己创建一个新的对象,来接受你要重新复制或引用的对象值。如果对象属性是基本的数据类型,复制的就是基本类型的值给新对象;但如果属性是引用数据类型,复制的就是内存中的地址,如果其中一个对象改变了这个内存中的地址,肯定会影响到另一个对象。

浅拷贝的四种方法

1、Object.assign

Object.assign 是 对象的一个方法,该方法可以用于 JS 对象的合并等多个用途,其中一个用途就是可以进行浅拷贝。该方法的第一个参数是拷贝的目标对象,后面的参数是拷贝的来源对象(也可以是多个来源)。

const obj = {};
const source = {name: 'nordon',info: {age: 18}
};Object.assign(obj, source);
console.log(obj); // {name: 'nordon', info: {…}}
source.info.age = 20;
console.log(obj);
console.log(source);

2、扩展运算符

const source = {name: 'nordon',info: {age: 18}
};
const obj = {...source};Object.assign(obj, source);
source.info.age = 20;
console.log(obj);
console.log(source);

3、Array.prototype.concat

数组的 concat 方法其实也是浅拷贝,使用场景比较少,使用concat连接一个含有引用类型的数组时,需要注意修改原数组中的元素的属性,因为它会影响拷贝之后连接的数组

const arr = [1, 2, {name: 'nordon'}];
const newArr = arr.concat();
newArr[2].name = 'wy';
console.log(arr); 
console.log(newArr);

4、Array.prototype.slice

数组的 slice 方法其实也是浅拷贝,使用场景比较少,同concat

const arr = [1, 2, {name: 'nordon'}];
const newArr = arr.slice();
newArr[2].name = 'mike';

相关内容

热门资讯

AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
AWR报告解读 WORKLOAD REPOSITORY PDB report (PDB snapshots) AW...
AWS管理控制台菜单和权限 要在AWS管理控制台中创建菜单和权限,您可以使用AWS Identity and Access Ma...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
群晖外网访问终极解决方法:IP... 写在前面的话 受够了群晖的quickconnet的小水管了,急需一个新的解决方法&#x...
​ToDesk 远程工具安装及... 目录 前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示 文件传输 设备链接 ...
Azure构建流程(Power... 这可能是由于配置错误导致的问题。请检查构建流程任务中的“发布构建制品”步骤,确保正确配置了“Arti...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...