深拷贝与浅拷贝

459 阅读1分钟

前言

最近闲来无事复习一下基础知识,身边的同事要去头条了,我深感恐慌啊。再不学习就只能去送外卖了。

btw,深拷贝和浅拷贝的概念只存在与引用类型之间,所以以下的讨论都是对象类型。

赋值

赋值操作就是让一个对象指向另一个对象,两个对象共享一块内存(!只讨论对象类型,基础类型不是酱紫)。如下:

var a = { x: 5, y: { z: 6 } };
var b = a;

对象a的任一属性的修改都会导致对象b的更改,这个很简单,就不赘述了。

浅拷贝

浅拷贝是两个对象指向两块的不同的内存,对象的属性为基础类型时,拥有不同的内存,当对象的属性为对象类型时,指向同一块内存。

上图:

实现方法

  1. Object.assign
var a = { x: 5, y: { z: 6 } };
var b = Object.assign({}, a);
  1. 解构语法
var a = { x: 5, y: { z: 6 } };
var b = {...a};
  1. 数组的concat、slice方法

这里要注意的是,如果我不去改b.y.z的值,而是最直接去改b.y的值,那么a对象就不会受影响。

深拷贝

深拷贝是两块独立空间,大家之间互不影响,如图。

实现方法

  1. JSON.stringify & JSON.parse
var a = { x: 5, y: { z: 6 } };
var b = JSON.stringify(a);
b = JSON.parse(b);

但是这个方法有坑!! 如果对象的属性是 undefinedfunction 或者是new Date() 就会出问题。undefinedfunction会直接被过滤掉,new Date()的输出有问题。

直接在控制台输出的new Date()长这个样子: 2. lodash 的cloneDeep

var a = { x: 5, y: { z: 6 } };
var b = cloneDeep(a);

最后

以上,如有错漏,恳请指正!