深拷贝的定义:在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']
浅拷贝的定义:自己创建一个新的对象,来接受你要重新复制或引用的对象值。如果对象属性是基本的数据类型,复制的就是基本类型的值给新对象;但如果属性是引用数据类型,复制的就是内存中的地址,如果其中一个对象改变了这个内存中的地址,肯定会影响到另一个对象。
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);
const source = {name: 'nordon',info: {age: 18}
};
const obj = {...source};Object.assign(obj, source);
source.info.age = 20;
console.log(obj);
console.log(source);
数组的 concat 方法其实也是浅拷贝,使用场景比较少,使用concat连接一个含有引用类型的数组时,需要注意修改原数组中的元素的属性,因为它会影响拷贝之后连接的数组
const arr = [1, 2, {name: 'nordon'}];
const newArr = arr.concat();
newArr[2].name = 'wy';
console.log(arr);
console.log(newArr);
数组的 slice 方法其实也是浅拷贝,使用场景比较少,同concat
const arr = [1, 2, {name: 'nordon'}];
const newArr = arr.slice();
newArr[2].name = 'mike';