阅读 243

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 深拷贝相关代码,相信你会对深拷贝有进一步的理解~

结语

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