浅拷贝
对象的合并
es6专门为合并对象提供了Object.assign()方法。这个方法==接收一个目标对象和一个或多个源对象作为参数==,然后==将每个源对象中可枚举和自有属性复制到目标对象==。对每个符合条件的属性,==这个方法会使用源对象上的get方法取得属性的值,然后使用目标对象上的get方法设置属性的值。==
let dest, src, result;
/**
* 简单复制
*/
dest = {};
src = { id: 'src' };
result = Object.assign(dest, src);
//Object.assign修改目标对象
//也会返回修改后的目标对象
console.log(dest === result); //true
console.log(dest !== src); //true
console.log(result); //{ id: 'src' }
console.log(dest); //{ id: 'src' }
Object.assign()
实际上对每个源对象执行的是浅复制。 ==如果多个源对象都有相同的属性,则使用最后一个复制的值。==
浅拷贝
先了解什么是拷贝:
简单来说就是一个对象B复制另一个对象A,当改变B对象的值是A对象的值不会改变。
1.for in只循环第一层
// 只复制第一层的浅拷贝
function simpleCopy(obj1) {
var obj2 = Array.isArray(obj1) ? [] : {};
for (let i in obj1) {
obj2[i] = obj1[i];
}
return obj2;
}
var obj1 = {
a: 1,
b: 2,
c: {
d: 3
}
}
var obj2 = simpleCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;
console.log(obj1.a); // 1
console.log(obj2.a); // 3
console.log(obj1.c.d); // 4
console.log(obj2.c.d); // 4
2.Object.assign()方法
let dest, src;
dest = {};
src = {
id: 'src',
person: {
name: 'tom'
}
};
Object.assign(dest, src);
dest.id = "dest";
dest.person.name = 'jack'
console.log(dest.id); // dest
console.log(src.id); // src
console.log(dest.person.name); // jack
console.log(src.person.name); // jack
3.扩展运算符:...
var a = { name: "hello" };
var b = { ...a };
b.name = "hi";
console.log(a); // { name: 'hello' }
console.log(b); // { name: 'hi' }
从上述例子可以看出,浅拷贝只是拷贝了基本类型的数据,对于引用的类型数据,复制后也是会发生引用,这种拷贝就叫做浅拷贝
==就是拷贝对象的引用,而不深层次的拷贝对象的值,==多个对象指向堆内存中的同一对象,,任何一个修改都会是使得所有对象的值被修改,因为它们公用一条数据。
深拷贝
==深拷贝不会拷贝引用类型的引用,拷贝的是引用类型的值,形成一个新的引用类型。==
1.用JSON对象实现
let dest, src;
dest = {};
src = {
id: 'src',
person: {
name: 'tom'
}
};
dest = JSON.parse(JSON.stringify(src));
dest.id = "dest";
dest.person.name = 'jack'
console.log(dest.id); // dest
console.log(src.id); // src
console.log(dest.person.name); // jack
console.log(src.person.name); // tom
2.使用递归的方式实现
//使用递归的方式实现数组、对象的深拷贝
function deepClone(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] = deepClone(obj[key]);
} else {
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
3.lodash函数库实现深拷贝
lodash很热门的函数库,提供了 lodash.cloneDeep()实现深拷贝