概念
-
浅拷贝:只拷贝最外面一层的数据;更深层次的对象,只拷贝引用。
-
深拷贝:拷贝多层数据;每一层级别的数据都会拷贝。
总结:
拷贝引用的时候,是属于传址,而非传值。
深拷贝会把对象里所有的数据重新复制到新的内存空间,是最彻底的拷贝。
传值和传址的区别
对象保存在哪里
1、基本数据类型的值直接保存在栈内存中,变量与变量之间是独立的,值与值之间是独立的,修改一个变量不会影响其他的变量。
2、对象是保存到堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间。变量保存的是对象的内存地址(对象的引用)。换而言之,对象的值是保存在堆内存中的,而对象的引用(即变量)是保存在栈内存中的。
如果两个变量保存的是同一个对象引用,当一个通过一个变量修改属性时,另一个也会受到影响。这句话很重要,我们来看看下面的例子。
传值 值传递:内置基本类型作为实参,单向传递,只能由实参改变形参,反之不行
代码举例:
let a = 1;
let b = a; // 将 a 赋值给 b
b = 2; // 修改 b 的值
上方代码中,当我修改 b 的值之后,a 的值并不会发生改变。这个大家都知道。我们继续往下看。
传址(一个经典的例子) 引用传递:引用数据类型作为实参,双向传递,形参的改变可以形象实参
代码举例:
var obj1 = new Object();
obj1.name = '孙悟空';
var obj2 = obj1; // 将 obj1 的地址赋值给 obj2。从此, obj1 和 obj2 指向了同一个堆内存空间
//修改obj2的name属性
obj2.name = '猪八戒';
上面的代码中,当我修改 obj2 的 name 属性后,会发现,obj1 的 name 属性也会被修改。因为 obj1 和 obj2 指向的是堆内存中的同一个地址。
这个例子要尤其注意,实战开发中,很容易忽略。
对于引用类型的数据,赋值相当于地址拷贝,a、b 指向了同一个堆内存地址。所以改了 b,a 也会变;本质上 a、b 就是一个东西。
如果你打算把引用类型 A 的值赋值给 B,让 A 和 B 相互不受影响的话,可以通过 Object.assign() 来复制对象。效果如下:
var obj1 = { name: '孙悟空' };
// 复制对象:把 obj1 赋值给 obj3。两者之间互不影响
var obj3 = Object.assign({}, obj1);
浅拷贝:只拷贝栈空间的地址,但是不开辟空间
两个对象共享同一块堆空间,任何一个对象都可以修改堆空间的内容
深拷贝:即拷贝数值,也需要开辟空间
浅拷贝的实现方式
用 for in 实现浅拷贝(比较繁琐)
const obj1 = {
name: 'qianguyihao',
age: 28,
info: {
desc: '很厉害',
},
};
const obj2 = {};
// 用 for in 将 obj1 的值拷贝给 obj2
for (let key in obj1) {
obj2[key] = obj1[key];
}
console.log('obj2:' + JSON.stringify(obj2));
obj1.info.desc = '永不止步'; // 当修改 obj1 的第二层数据时,obj2的值也会被改变。所以 for in 是浅拷贝
console.log('obj2:' + JSON.stringify(obj2));
上方代码中,用 for in 做拷贝时,只能做到浅拷贝。也就是说,在 obj2 中, name 和 age 这两个属性会单独存放在新的内存地址中,和 obj1 没有关系。但是,obj2.info
属性,跟 obj1.info
属性,它俩指向的是同一个堆内存地址。所以,当我修改 obj1.info
里的值之后,obj2.info
的值也会被修改。
打印结果如下:
obj2:{"name":"qianguyihao","age":28,"info":{"desc":"很厉害"}}
obj2:{"name":"qianguyihao","age":28,"info":{"desc":"永不止步"}}
用 Object.assgin() 实现浅拷贝(推荐的方式)
上面的 for in 方法做浅拷贝过于繁琐。ES6 给我们提供了新的语法糖,通过 Object.assgin()
可以实现浅拷贝。
Object.assgin()
在日常开发中,使用得相当频繁,非掌握不可。
语法:
// 语法1
obj2 = Object.assgin(obj2, obj1);
// 语法2
Object.assign(目标对象, 源对象1, 源对象2...);
解释:将obj1
拷贝给 obj2
。执行完毕后,obj2 的值会被更新。
作用:将 obj1 的值追加到 obj2 中。如果对象里的属性名相同,会被覆盖。
从语法2中可以看出,Object.assign() 可以将多个“源对象”拷贝到“目标对象”中。
例 1:
const obj1 = {
name: 'qianguyihao',
age: 28,
info: {
desc: 'hello',
},
};
// 浅拷贝:把 obj1 拷贝给 obj2。如果 obj1 只有一层数据,那么,obj1 和 obj2 则互不影响
const obj2 = Object.assign({}, obj1);
console.log('obj2:' + JSON.stringify(obj2));
obj1.info.desc = '永不止步'; // 由于 Object.assign() 只是浅拷贝,所以当修改 obj1 的第二层数据时,obj2 对应的值也会被改变。
console.log('obj2:' + JSON.stringify(obj2));
代码解释:由于 Object.assign() 只是浅拷贝,所以在当前这个案例中, obj2 中的 name 属性和 age 属性是单独存放在新的堆内存地址中的,和 obj1 没有关系;但是,obj2.info
属性,跟 obj1.info
属性,它俩指向的是同一个堆内存地址。所以,当我修改 obj1.info
里的值之后,obj2.info
的值也会被修改。
打印结果:
obj2:{"name":"qianguyihao","age":28,"info":{"desc":"hello"}}
obj2:{"name":"qianguyihao","age":28,"info":{"desc":"永不止步"}}
例 2:
const myObj = {
name: 'qianguyihao',
age: 28,
};
// 【写法1】浅拷贝:把 myObj 拷贝给 obj1
const obj1 = {};
Object.assign(obj1, myObj);
// 【写法2】浅拷贝:把 myObj 拷贝给 obj2
const obj2 = Object.assign({}, myObj);
// 【写法3】浅拷贝:把 myObj 拷贝给 obj31。注意,这里的 obj31 和 obj32 其实是等价的,他们指向了同一个内存地址
const obj31 = {};
const obj32 = Object.assign(obj31, myObj);
上面这三种写法,是等价的。所以,当我们需要将对象 A 复制(拷贝)给对象 B,不要直接使用 B = A
,而是要使用 Object.assign(B, A)。
例 3:
let obj1 = { name: 'qianguyihao', age: 26 };
let obj2 = { city: 'shenzhen', age: 28 };
let obj3 = {};
Object.assign(obj3, obj1, obj2); // 将 obj1、obj2的内容赋值给 obj3
console.log(obj3); // {name: "qianguyihao", age: 28, city: "shenzhen"}
上面的代码,可以理解成:将多个对象(obj1和obj2)合并成一个对象 obj3。
例4:【重要】
const obj1 = {
name: 'qianguyihao',
age: 28,
desc: 'hello world',
};
const obj2 = {
name: '许嵩',
sex: '男',
};
// 浅拷贝:把 obj1 赋值给 obj2。这一行,是关键代码。这行代码的返回值也是 obj2
Object.assign(obj2, obj1);
console.log(JSON.stringify(obj2));
打印结果:
{
"name":"qianguyihao",
"sex":"男",
"age":28,
"desc":"hello world"
}
注意,例 4 在实际开发中,会经常遇到,一定要掌握。它的作用是:将 obj1 的值追加到 obj2 中。如果两个对象里的属性名相同,则 obj2 中的值会被 obj1 中的值覆盖。
深拷贝的实现方式
深拷贝其实就是将浅拷贝进行递归。
用 for in 递归实现深拷贝
代码实现:
let obj1 = {
name: 'qianguyihao',
age: 28,
info: {
desc: 'hello',
},
color: ['red', 'blue', 'green'],
};
let obj2 = {};
deepCopy(obj2, obj1);
console.log(obj2);
obj1.info.desc = 'github';
console.log(obj2);
// 方法:深拷贝
function deepCopy(newObj, oldObj) {
for (let key in oldObj) {
// 获取属性值 oldObj[key]
let item = oldObj[key];
// 判断这个值是否是数组
if (item instanceof Array) {
newObj[key] = [];
deepCopy(newObj[key], item);
} else if (item instanceof Object) {
// 判断这个值是否是对象
newObj[key] = {};
deepCopy(newObj[key], item);
} else {
// 简单数据类型,直接赋值
newObj[key] = item;
}
}
}
标签:obj1,info,obj2,name,23,Object,深浅,拷贝
From: https://www.cnblogs.com/qianfanqf/p/16969922.html