Javascript经典面试之深拷贝VS浅拷贝

本文首发于我的个人网站：litgod.net

这是一道经典的面试题，相信大多数同学都有被面试官问过的经历，那么你能实现几种深拷贝和浅拷贝的方法？是不是又问到了你的知识盲区😊，那让我们来一起总结常用的深浅拷贝（克隆）的方法吧！

开始之前

在开始之前，我们要先明确一下 JS 的数据类型，以及数据存储（栈和堆）的概念：

• JS 数据类型分为基本数据类型和引用数据类型（引用数据类型又称复杂数据类型）

基本数据类型	引用数据类型
Number	Object
String	Function
Boolean	Array
Undefind	Date
Null	RegExp
Symbol（ES6 新增）	Math
BigInt（ES10 新增）	...都是Object类型的实例对象

• 基本数据类型和引用数据类型的储存方式区别：

基本数据类型：变量名和值都储存在栈内存中；

引用数据类型：变量名储存在栈内存中，值储存在堆内存中，堆内存中会提供一个引用地址指向堆内存中的值，而这个引用地址是储存在栈内存中的。

例如：

let obj = {
    a: 100,
    b: 'name',
    c:[10,20,30],
    d:{
        x:10
    },
}

obj 在内存中的储存如下：

栈内存	栈内存	堆内存
name	val	val
a	100	---
b	'name'	---
c	AAAFFF000（一个引用地址，指向堆内存的值）	[10,20,30]
d	BBBFFF000（一个引用地址，指向堆内存的值）	{ x:10 }

对这几个概念有了初步了解之后，接下来正式开始讲深浅拷贝。

浅拷贝

何为浅拷贝？当 obj2 拷贝了 obj 的数据，且当 obj2 的改变会导致 obj 的改变时，此时叫 obj2 浅拷贝了 obj。

举个例子🌰：

let obj = {
    a: '100',
}

let obj2 = obj;
obj2.a = '200';
console.log(obj.a)    // '200'

obj 直接赋值给 obj2 后，obj2 中 a 属性的改变导致了 obj 中 a 属性也发生了变化。

其实这里的原因也很简单，因为这种赋值方式只是将 obj 的堆内存地址赋值给了 obj2，obj 和 obj2 指向的是一个存储地址，是同一个内容，因此 obj2 的改变当然会引起 obj 的改变。

常见的浅拷贝

我们以下面的对象为例：

let obj = {
    a: '100',
    b: undefined,
    c: null,
    d: Symbol(2),
    e: /^\d+$/,
    f: new Date,
    g: true,
    arr:[10,20,30],
    school:{
        name:'cherry'
    },
    fn: function fn() {
        console.log('fn');    
    }
}

方法一：直接赋值

直接赋值的方法就是我们刚才所举的例子🌰，这种方式实现的就是纯粹的浅拷贝，obj2 的任何变化都会反映在 obj 上。

方法二：使用对象的解构

let obj2 = { ...obj }

方法三：使用循环

对象循环我们使用 for in 循环，但for in 循环会遍历到对象的继承属性，我们只需要它的私有属性，所以可以加一个判断方法：hasOwnProperty 保留对象私有属性。

let obj2 = {};
for(let i in obj) {
    if(!obj.hasOwnProperty(i)) break; // 这里使用 continue 也可以
    obj2[i] = obj[i];
}

方法四：Object.assign(target,source)

这是ES6中新增的对象方法，对它不了解的见ES6对象新增方法。

let obj2 = {};
Object.assign(obj2,obj); //将 obj 拷贝到 obj2

浅拷贝总结：

方法一：就是纯粹的浅拷贝，obj2 的任何变化都会反映在 obj 上。 方法二、三、四：都可以实现第一层的“深拷贝”，但无法实现多层的深拷贝。比如我们修改下 obj2 的值：

obj2.a = '200';
console.log(obj.a);  // '100'
// obj.a 属性未发生变化

obj2.school.name = 'susan';
console.log(obj.school.name);  // 'sucan'
// obj.school.name 属性随着 obj2 而变化了

这几种拷贝方法无法满足更深层级的拷贝，所以我们需要另一种万全之策--深拷贝。

深拷贝

方法一：JSON.parse()和JSON.stringify

let obj2 = JSON.parse(JSON.stringify(obj));

obj2.schoole.name= 'susan';
console.log(obj.school.name); // 'cherry'
//obj 中属性值并没有改变,说明是深拷贝

这种方法是比较简单的深拷贝，在对象属性的类型比较简单的时候，我们可以采取这种方法快速深拷贝。

但当对象属性的类型较为复杂时，就会发现这种方法虽然能实现深拷贝，但也有很多坑，运行上面的代码后发现：

• 值为 undefined 的属性在转换后丢失；
• 值为 Symbol 类型的属性在转换后丢失；
• 值为 RegExp 对象的属性在转换后变成了空对象；
• 值为 函数对象的属性在转换后丢失；
• 值为 Date 对象的属性在转换后变成了字符串；
• 会抛弃对象的 constructor,所有的构造函数会指向 Object；
• 对象的循环引用会抛出错误。

最后两种坑，我们来简单测试下：

• 会抛弃对象的 constructor,所有的构造函数会指向 Object

// 构造函数
function person(name) {
    this.name = name;
}

const Cherry = new person('Cherry');

const obj = {
    a: Cherry,
}
const obj2 = JSON.parse(JSON.stringify(obj));

console.log(obj.a.constructor, obj2.a.constructor); // [Function: person] [Function: Object]

• 对象的循环引用会抛出错误

const obj = {};
obj.a = obj;

const obj2 = JSON.parse(JSON.stringify(obj)); // TypeError: Converting circular structure to JSON

是不是觉得坑很多？所以小伙伴们在使用这种方式深拷贝的时候，还是要多多注意下。 出现这种问题的原因和 JSON.stringify 方法的序列化规则有关系，关于JSON.stringify序列化的具体规则见 JSON.stringify 指南。

下面引用了其他文档中对JSON.stringify序列化规则的描述，供大家参考：

对大多数简单值来说，JSON字符串化和toString()的效果基本相同，只不过序列化的结果总是字符串：

JSON.stringify(42); // "42"

JSON.stringify("42"); // ""42""(含有双引号的字符串)

JSON.stringify(null); // "null"

JSON.stringify(true); // "true"

所有安全的JSON值（JSON-safe）都可以使用JSON.stringify(...)字符串化。安全的JSON值是指能够呈现为有效JSON格式的值。

为了简单起见，我们来看看什么是不安全的JSON值。undefined、function、symbol（ES6+）和包含循环引用（对象之前相互引用，形成一个无限循环）的对象都不符合JSON结构标准，其他支持JSON的语言无法处理它们。

JSON.stringify(...)在对象中遇到undefined、function和symbol时会自动将其忽略，在数组中则会返回null（以保证单元位置不变）。

例如：

JSON.stringify(undefined); //undefined

JSON.stringify(function(){}); //undefined

JSON.stringify([1,undefined,function(){},4]); //"[1, null, null, 4]"

JSON.stringify({a:2, b: function(){}}); //"{"a": 2}"

对包含循环引用的对象执行JSON.stringify(...); 会报错。

关于如何去 JSON.stringify 序列化也是一个比较有意思的问题，大家可以学习一下，毕竟面试官总是喜欢问到你不会为止。。。

方法二：手写 deepClone

既然第一种方法有它的弊端，那最终极的方法，就是手写一个 deepClone 了。

用过lodash的小伙伴都知道lodash提供了_.cloneDeep 方法深克隆，想看 lodash 实现源码的可以点击这里，它的源码里实现的比较复杂，考虑的情况比较多，我们写一个简单版的深拷贝可以在自己项目中使用即可。

简单的实现思路：

1.遍历带拷贝的对象，判断是不是原始值，若是，使用浅拷贝的方式进行赋值。

2.若是引用值，将特殊类型逐一进行过滤，并且兼容引用值是数组的情况。

3.待拷贝的对象里面的若是原始值，则浅拷贝即可实现，若还有引用值，则还需要重复进行上述一系列的判断（递归赋值）。

上述思路用代码如何实现呢？

let obj = {
    a: '100',
    b: undefined,
    c: null,
    d: Symbol(2),
    e: /^\d+$/,
    f: new Date,
    g: true,
    arr: [10,20,30],
    school:{
        name: 'cherry',
    },
    fn: function fn() {
        console.log('fn');    
    }
}

function deepClone(obj) {
    // 先把特殊情况全部过滤掉 null undefined date reg
    if (obj == null) return obj;  // null 和 undefined 都不用处理
    if (obj instanceof Date) return new Date(obj);
    if (obj instanceof RegExp) return new RegExp(obj);
    if (typeof obj !== 'object') return obj;  // 普通常量直接返回

    // 不直接创建空对象的目的：克隆的结果和之前保持相同的所属类，
    // 同时也兼容了数组的情况
    let newObj = new obj.constructor;
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {  // 不拷贝原型链上的属性
            newObj[key] = deepClone(obj[key]);  // 递归赋值
        }
    }
    return newObj;
}
let obj2 = deepClone(obj);
console.log(obj2);

执行代码，得到 obj2 的结果和 obj 一致，且属性值的改变彼此互不影响。

Q：为什么 type null 会返回 object ？

A：因为在 js 的设计中，object的前三位标志是000，而 null 在32位表示中也全是0，因此，typeof null 也会打印出object。

代码写到这里，我们就实现了一种比较简单的深拷贝，面试的时候如果你能写出上面的实现方法，应该算是及格啦！但是，面对复杂的，多类型的对象，以上方法还是有诸多缺陷的。

比如我们为 obj 中的 school 对象添加一个 Symbol 类型的属性：

//==新增代码==
let s1 = Symbol('s1');

let obj = {
    a: '100',
    b: undefined,
    c: null,
    d: Symbol(2),
    e: /^\d+$/,
    f: new Date,
    g: true,
    arr: [10,20,30],
    school:{
        name: 'cherry',
        //==新增代码==
        [s1]: 's1'
    },
    fn: function fn() {
        console.log('fn');    
    }
}
let obj2 = deepClone(obj);
console.log(obj2);

执行代码后发现 school 中的 Symbol(s1): 's1'并没有拷贝成功。这是因为声明对象的 key 为 symbol 类型是不可枚举的，要解决这个问题，我们可以使用 Object 提供的 getOwnPrepertySymbols()方法来枚举对象中所有 key 是 symbol 类型的属性，这个属性的详细使用说明参见 MDN，或者用 Reflect.ownKeys() 也可以实现。

还比如：如果在我们拷贝的对象被循环引用，deepClone就会一直执行下去导致爆栈，举个例子：

let obj = {
    a: '100',
    b: undefined,
    c: null,
    d: Symbol(2),
    e: /^\d+$/,
    f: new Date,
    g: true,
    arr: [10,20,30],
    school:{
        name: 'cherry',
    },
    fn: function fn() {
        console.log('fn');    
    }
}

obj.h = obj;

let obj2 = deepClone(obj);
console.log(obj2);

执行上述代码后，控制台抛出栈溢出错误：Maximum call stack size exceeded。其实解决循环引用的思路，就是在赋值之前判断当前值是否已经存在，避免循环引用，这里我们可以使用 es6 的 WeakMap 来生成一个 hash 表。

针对以上这两个问题，我们来优化一下代码：

let s1 = Symbol('s1');

let obj = {
    a: '100',
    b: undefined,
    c: null,
    d: Symbol(2),
    e: /^\d+$/,
    f: new Date,
    g: true,
    arr: [10,20,30],
    school:{
        name:'cherry',
        [s1]: 's1'
    },
    fn: function fn() {
        console.log('fn');    
    }
}

obj.h = obj;

function deepClone(obj, hash = new WeakMap()) {
    //先把特殊情况全部过滤掉 null undefined date reg
    if (obj == null) return obj;  //null 和 undefined 都不用处理
    if (obj instanceof Date) return new Date(obj);
    if (obj instanceof RegExp) return new RegExp(obj);
    if (typeof obj !== 'object') return obj;  // 普通常量直接返回
    
    //  防止对象中的循环引用爆栈，把拷贝过的对象直接返还即可
    if (hash.has(obj)) return hash.get(obj);

    // 不直接创建空对象的目的：克隆的结果和之前保持相同的所属类
    // 同时也兼容了数组的情况
    let newObj = new obj.constructor;

    hash.set(obj, newObj)  // 制作一个映射表
    
    //判断是否有 key 为 symbol 的属性
    let symKeys = Object.getOwnPropertySymbols(obj);
    if (symKeys.length) { 
        symKeys.forEach(symKey => {
            newObj[symKey] = deepClone(obj[symKey], hash);   
        });
    }

    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {  // 不拷贝原型链上的属性
            newObj[key] = deepClone(obj[key], hash);  // 递归赋值
        }
    }
    return newObj;
}
let obj2 = deepClone(obj);
console.log(obj2);

这样，一个比较完善的深拷贝就实现啦～

不过，完善但不是完美，还有更高维度的问题需要优化，比如：1.没有考虑 es6 中 Map 和 Set 的拷贝，2.递归消耗大量的内存会导致的爆栈等等等等，想要实现一个完美的深拷贝，还是有很多内容需要我们深度学习～

小结

如果你还对深拷贝有兴趣或者想研究，可以阅读lodash 深拷贝相关代码，相信你会对深拷贝有进一步的理解～

结语

欢迎大家关注我的公众号，一起研究前端技术，期待与你共同进步。