文章目录
一、浅拷贝(修改新对象会改到原对象)
只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存,
修改新对象会改到原对象
。
【1】通过= 直接赋值
var obj1 = {
name: '诸葛亮',
gender: '男',
age: 20
};
var obj2 = obj1;
obj2.age = 30;
console.log(obj2); //name: '诸葛亮', gender: '男', age: 30
console.log(obj1); //name: '诸葛亮', gender: '男', age: 30
【2】Object.assign()方法
var obj1 = {
name: '诸葛亮',
gender: '男',
age: 20
};
var obj2=Object.assign(obj1)
obj2.age = 30;
console.log(obj2.age); // age: 30
console.log(obj1.age); // age: 30
二、深拷贝(修改新对象不会改到原对象)
会另外创造一个一模一样的对象,新对象跟原对象不共享内存,
修改新对象不会改到原对象
。
【1】通过JSON对象来实现深拷贝
JSON.stringify()
方法将一个 JavaScript 值(对象或者数组)转换为一个 JSON 字符串。
JSON.parse()
方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。返回值为Object 类型, 对应给定 JSON 文本的对象/值。
该方法的原理是先将引用类型的对象转换为基础类型的字符串,然后将其从字符串再重新转换为对应的引用类型对象,在进行转换为引用对象的时候,会为对象的每个属性重新分配堆内存,即进行了深拷贝
var obj3 = {
number: 1111,
city: '西安'
}
var obj4 = JSON.parse(JSON.stringify(obj3));
obj4.city = '深圳';
console.log(obj3.city); //'西安'
console.log(obj4.city); //'深圳'
【2】 Object.create()方法
var obj3 = {
number: 1111,
city: '杭州'
}
var obj4 = Object.create(obj3)
obj4.city = '深圳';
console.log(obj3.city); //'杭州'
console.log(obj4.city); //'深圳'
【3】使用扩展运算符实现深拷贝
// 当value是
基本数据
类型,比如String,Number,Boolean时,是可以使用拓展运算符进行深拷贝
的
// 当value是引用类型
的值,比如Object,Array,引用类型进行深拷贝也只是拷贝了引用地址,所以属于浅拷贝
var obj3 = {
number: 1111,
city: '杭州'
}
var obj4 = { ...obj3, number: 2021 }
console.log(obj3.number); //1111
console.log(obj4.number); //2021
三、要点:
深浅拷贝,都是进行复制,那么区别主要在于复制出来的新对象和原来的对象
是否会互相影响
,改一个,另一个也会变。
新旧对象共享内存,修改其中一个则会影响另外一个,则为浅拷贝
;
新旧对象不共享内存,修改其中一个不会影响另一个,则为深拷贝
。