#今日说码栏目# 深拷贝与浅拷贝
创始人
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';

相关内容

热门资讯

保存时出现了1个错误,导致这篇... 当保存文章时出现错误时,可以通过以下步骤解决问题:查看错误信息:查看错误提示信息可以帮助我们了解具体...
汇川伺服电机位置控制模式参数配... 1. 基本控制参数设置 1)设置位置控制模式   2)绝对值位置线性模...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
表格中数据未显示 当表格中的数据未显示时,可能是由于以下几个原因导致的:HTML代码问题:检查表格的HTML代码是否正...
本地主机上的图像未显示 问题描述:在本地主机上显示图像时,图像未能正常显示。解决方法:以下是一些可能的解决方法,具体取决于问...
表格列调整大小出现问题 问题描述:表格列调整大小出现问题,无法正常调整列宽。解决方法:检查表格的布局方式是否正确。确保表格使...
不一致的条件格式 要解决不一致的条件格式问题,可以按照以下步骤进行:确定条件格式的规则:首先,需要明确条件格式的规则是...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限:此外...
【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...