深拷贝与浅拷贝
2021-08-16 本文已影响0人
lvyweb
数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和对象数据(object)类型。
1、基本数据类型的特点:直接存储在栈(stack)中的数据
2、引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里
深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。
深拷贝的实现方式
- 手写深拷贝
递归方法实现深度克隆原理:遍历对象、数组直到里边都是基本数据类型,然后再去复制,就是深度拷贝。
function deepClone(obj = {}){
if(typeof obj!='object' || obj == null){
return obj;
}
let result;
if(obj instanceof Array){
result = []
}else{
result = {};
}
for(let key in obj ){
if(obj.hasOwnProperty(key)){
result[key] = deepClone(obj[key]);
}
}
return result;
}
var obj1 = {
'name' : 'August',
'age' : '18',
'language' : [1,[2,3],[4,5]],
};
var obj2= deepClone(obj1);
console.log('obj2===',obj2);
obj2.name = 'September';
console.log('obj1===',obj1,'obj2====',obj2);
JSON.parse(JSON.stringify())
let arr = [1, 3, {
username: 'August'
}];
let newArr = JSON.parse(JSON.stringify(arr));
newArr[2].username = 'September';
console.log(arr, newArr)
原理: 用JSON.stringify将对象转成JSON字符串,再用JSON.parse()把字符串解析成对象,一去一来,新的对象产生了,而且对象会开辟新的栈,实现深拷贝。
这种方法虽然可以实现数组或对象深拷贝,但不能处理函数。
这是因为 JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,不能接受函数。
- 函数库lodash
该函数库也有提供_.cloneDeep
用来做Deep Copy
var arr = require('lodash');
var obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
var obj2 = arr .cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);
// false
浅拷贝的实现方式
-
Object.assign()
Object.assign()
方法可以把任意多个的源对象自身可枚举属性给目标对象,然后返回目标对象。但是Object.assign()
进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。
eg:
let obj = { a: {name: "August", b: 18} };
let initalObj = Object.assign({}, obj);
initalObj.a.name= "September";
console.log(obj.a.name); // September
当object 只有一层的时候,是深拷贝
Array.prototype.concat()
let arr = [1, 3, {
username: 'August'
}];
let arr2 = arr.concat();
//修改新对象会改到原对象:
arr2[2].username = 'September';
console.log(arr);
-
Array.prototype.slice()
用法同concat
关于Array的slice和concat方法的补充说明:Array的slice和concat方法不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组