对象深拷贝和浅拷贝

izimu
280 阅读4分钟

对象深拷贝和浅拷贝

JavaScript的变量中包含两种类型的值

1、基本类型值：指存储在栈中的一些简单数据段。

共7种，包括：String, Number, Undefined, Null, Boolean，ES6中定义的 Symbol, bigInt。

2、引用类型值：引用类型值是引用类型的实例。是保存在堆内存中的一个对象。

​ 引用类型是一种数据结构，最常用的是Object,Array,function, 另外还有Date,RegExp,Error等，ES6提供了Set,Map2种新的数据结构 .

JavaScript是如何复制引用类型的?

基本类型与引用类型的赋值方式不一样。

​ 当变量复制引用类型值的时候，同样和基本类型值一样会将变量的值复制到新变量上，不同的是对于变量的值，它是一个指针，指向存储在堆内存中的对象。

JS规定放在堆内存中的对象无法直接访问，必须要访问这个对象在堆内存中的地址，然后再按照这个地址去获得这个对象中的值，所以引用类型的值是按引用访问。

let obj1 = {a:1};
let obj2 = obj1;
obj2.a = 2;
console.log(obj1); //{a:2}
console.log(obj2); //{a:2}

变量的值也就是这个指针是存储在栈上的，当变量obj1复制变量的值给变量obj2时，obj1,obj2只是一个保存在栈中的指针,指向同一个存储在堆内存中的对象，所以当通过变量obj1操作堆内存的对象时，obj2也会一起改变 。

浅拷贝

​ 创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

JavaScript提供的浅拷贝方法：

  1. Object.assign()
let target = {};
let source = { a: { b: 2 } };
Object.assign(target, source);
console.log(target); // { a: { b: 2 } };

Object.assign 只是在根属性(对象的第一层级)创建了一个新的对象，但是对于属性的值是对象的话只会拷贝一份相同的内存地址

  1. 不会拷贝对象继承的属性

  2. 不可枚举的属性

  3. 属性的数据属性/访问器属性

  4. 可以拷贝Symbol类型

  5. 扩展运算符 (...)

let obj = {a:1,b:{c:1}}
let obj2 = {...obj};
obj.a=2;
console.log(obj); //{a:2,b:{c:1}}
console.log(obj2); //{a:1,b:{c:1}}

obj.b.c = 2;
console.log(obj); //{a:2,b:{c:2}}
console.log(obj2); //{a:1,b:{c:2}}

对于值是对象的属性无法完全拷贝成2个不同对象,但是如果属性都是基本类型的值的话,使用扩展运算符更加方便

  1. Array.prototype.slice

slice()方法返回一个新的数组对象，原始数组不会被改变。

这一对象是一个由 begin和 end（不包括end）决定的原数组的浅拷贝。

  1. Array.prototype.concat

数组的concat方法其实也是浅拷贝.

连接一个含有引用类型的数组需要注意修改原数组中的元素的属性会反映到连接后的数组 。

let arr=[{ a:1},{a:1},{a:1}] 
let arr2=[{b:1},{b:1},{b:1}]
let arr3=arr.concat(arr2)
arr2[0].b=123
console.1og(arr3) //[{"a":1},{"a":1),("a":1},("b":123},("b":1},("b":1}]

深拷贝

浅拷贝只是在堆内存中创建了一个新的对象，复制了基本类型的值,但是复杂数据类型也就是对象则是拷贝相同的地址。

深拷贝则是在复杂数据类型在堆内存中开辟了一块内存地址用于存放复制的对象并且把原有的对象复制过来，这2个对象是相互独立的,也就是2个不同的地址 。

将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象 .

深拷贝方法：

  1. JSON.stringify()、JSON.parse() 序列化和反序列

    JSON.stringify()是目前前端开发过程中最常用的深拷贝方式。

    原理是把一个对象序列化成为一个JSON字符串，将对象的内容转换成字符串的形式再保存在磁盘上，再用JSON.parse()反序列化将JSON字符串变成一个新的对象 。

let obj1 = {
    a:1,
    b:[1,2,3]
}
let str = JSON.stringify(obj1)
let obj2 = JSON.parse(str)
console.log(obj2); //{a:1,b:[1,2,3]}
obj1.a = 2
obj1.b.push(4);
console.log(obj1); //{a:2,b:[1,2,3,4]}
console.log(obj2); //{a:1,b:[1,2,3]}

通过JSON.stringify实现深拷贝有几点要注意

  1. 拷贝的对象的值中如果有函数、undefined、symbol，则经过JSON.stringify()序列化后的JSON字符串中这个键值对会消失
  2. 无法拷贝不可枚举的属性，无法拷贝对象的原型链
  3. 拷贝Date引用类型会变成字符串
  4. 拷贝RegExp引用类型会变成空对象
  5. 对象中含有NaN、Infinity和-Infinity，则序列化的结果会变成null
  6. 无法拷贝对象的循环应用(即obj[key] = obj)

转载声明：

作者：yeyan1996

链接：juejin.cn/post/684490…

avatar
文章
阅读
粉丝