前端阿里面试—— 实现一个深拷贝

曾经终败给现在 2022-12-22 10:00 111阅读 0赞

## 前言 ##

深拷贝这个功能在开发中经常使用到，特别在对引用类型的数据进行操作时，一般会先深拷贝一份赋值给一个变量，然后在对其操作，防止影响到其它使用该数据的地方。

如何实现一个深拷贝，在面试中出现频率一直居高不下。因为在实现一个深拷贝过程中，可以看出应聘者很多方面的能力。

本专栏将从青铜到王者来介绍怎么实现一个深拷贝，以及每个段位对应的能力。

## 青铜段位 ##

JSON.parse(JSON.stringify(data))
    复制代码

这种写法非常简单，而且可以应对大部分的应用场景，但是它有很大缺陷的。如果你不知道它有那些缺陷，而且这种实现方法体现不出你任何能力，所以这种实现方法处于青铜段位。

*  如果对象中存在循环引用的情况也无法正确实现深拷贝。

const a = {
        b: 1,
    }
    a.c = a;
    JSON.parse(JSON.stringify(a));

![a843cab8b0245b95c557b72946212dcd.png][]

*  如果 `data` 里面有时间对象，则`JSON.stringify`后再`JSON.parse`的结果，时间将只是字符串的形式。而不是时间对象。

const a = {
        b: new Date(1536627600000),
    }
    console.log(JSON.parse(JSON.stringify(a)))

![871439a79db845798f5711f0db84e540.png][]

*  如果 `data` 里有RegExp、Error对象，则序列化的结果将只得到空对象；

const a = {
        b: new RegExp(/\d/),
        c: new Error('错误')
    }
    console.log(JSON.parse(JSON.stringify(a)))

![834229ab36be9ac3ae810a6e6bb61089.png][]

*  如果 `data` 里有函数，`undefined`，则序列化的结果会把函数置为undefined或丢失；

const a = {
        b: function (){
            console.log(1)
        },
        c:1,
    	d:undefined
    }
    console.log(JSON.parse(JSON.stringify(a)))

![33ddb81f3f8b9e3ac68602b9d0714ef0.png][]

*  如果 `data` 里有NaN、Infinity和-Infinity，则序列化的结果会变成null

const a = {
        b: NaN,
        c: 1.7976931348623157E+10308,
        d: -1.7976931348623157E+10308,
    }
    console.log(JSON.parse(JSON.stringify(a)))

![8472fd8c6bbffbbba206eab700d7ef96.png][]

## 白银段位 ##

**深拷贝的核心就是对引用类型的数据的拷贝处理。**

function deepClone(target){
        if(target !== null && typeof target === 'object'){
            let result = {}
            for (let k in target){
                if (target.hasOwnProperty(k)) {
                    result[k] = deepClone(target[k])
                }
            }
            return result;
        }else{
            return target;
        }
    }

以上代码中，`deepClone`函数的参数 `target` 是要深拷贝的数据。

执行 `target !== null && typeof target === 'object'` 判断 `target` 是不是引用类型。

若不是，直接返回 `target`。

若是，创建一个变量 `result` 作为深拷贝的结果，遍历 `target`，执行 `deepClone(target[k])` 把 `target` 每个属性的值深拷贝后赋值到深拷贝的结果对应的属性 `result[k]` 上，遍历完毕后返回 `result`。

在执行 `deepClone(target[k])` 中，又会对 `target[k]` 进行类型判断，重复上述流程，形成了一个递归调用 `deepClone` 函数的过程。就可以层层遍历要拷贝的数据，不管要拷贝的数据有多少子属性，只要子属性的值的类型是引用类型，就会调用 `deepClone` 函数将其深拷贝后赋值到深拷贝的结果对应的属性上。

另外使用 `for...in` 循环遍历对象的属性时，其原型链上的所有属性都将被访问，如果只要只遍历对象自身的属性，而不遍历继承于原型链上的属性，要使用 `hasOwnProperty` 方法过滤一下。

在这里可以向面试官展示你的三个编程能力。

*  **对原始类型和引用类型数据的判断能力。**
 *  **对递归思维的应用的能力。**
 *  **深入理解`for...in`的用法。**

## 黄金段位 ##

白银段位的代码中只考虑到了引用类型的数据是对象的情况，漏了对引用类型的数据是数组的情况。

以上代码中，只是额外增加对参数 `target` 是否是数组的判断。执行 `Object.prototype.toString.call(target) === "[object Array]"` 判断 `target` 是不是数组，若是数组，变量`result` 为 `[]`，若不是数组，变量`result` 为 `{}`。

在这里可以向面试官展示你的两个编程能力。

*  **正确理解引用类型概念的能力。**
 *  **精确判断数据类型的能力。**

## 铂金段位 ##

假设要深拷贝以下数据 `data`

let data = {
        a: 1
    };
    data.f=data

执行 `deepClone(data)`，会发现控制台报错，错误信息如下所示。 ![image][]

这是因为递归进入死循环导致栈内存溢出了。根本原因是 `data` 数据存在循环引用，即对象的属性间接或直接的引用了自身。

以上代码中利用额外的变量 `map` 来存储当前对象和拷贝对象的对应关系，当需要拷贝当前对象时，先去 `map` 中找，有没有拷贝过这个对象，如果有的话直接返回，如果没有的话继续拷贝，这样就巧妙化解的循环引用的问题。最后需要把变量 `map` 置为 `null` ，释放内存，防止内存泄露。

在这里可以向面试官展示你的两个编程能力。

*  **对循环引用的理解，如何解决循环引用引起的问题的能力。**
 *  **对内存泄露的认识和避免泄露的能力。**

## 砖石段位 ##

该段位要考虑性能问题了。在上面的代码中，我们遍历数组和对象都使用了 `for...in` 这种方式，实际上 `for...in` 在遍历时效率是非常低的，故用效率比较高的 `while` 来遍历。

用 `while` 遍历的深拷贝记为 `deepClone`，把用 `for ... in` 遍历的深拷贝记为 `deepClone1`。利用 `console.time()` 和 `console.timeEnd()` 来计算执行时间。

let arr = [];
    for (let i = 0; i < 1000000; i++) {
        arr.push(i)
    }
    let data = {
        a: arr
    };
    console.time();
    const result = deepClone(data);
    console.timeEnd();
    console.time();
    const result1 = deepClone1(data);
    console.timeEnd();

![e223c1ebf69166869caf9f608ac4481b.png][]

从上图明显可以看到用 `while` 遍历的深拷贝的性能远优于用 `for ... in` 遍历的深拷贝。

在这里可以向面试官展示你的四个编程能力。

*  **具有优化代码运行性能的能力。**
 *  **了解遍历的效率的能力。**
 *  **了解 `++i` 和 `i++` 的区别。**
 *  **代码抽象的能力。**

## 星耀段位 ##

在这个阶段应该考虑代码逻辑的严谨性。在上面段位的代码虽然已经满足平时开发的需求，但是还是有几处逻辑不严谨的地方。

*  判断数据不是引用类型时就直接返回 `target`，但是原始类型中还有 Symbol 这一特殊类型的数据，因为其每个 Symbol 都是独一无二，需要额外拷贝处理，不能直接返回。
 *  判断数据是不是引用类型时不严谨，漏了 `typeof target === function'` 的判断。
 *  只考虑了 Array、Object 两种引用类型数据的处理，引用类型的数据还有Function 函数、Date 日期、RegExp 正则、Map 数据结构、Set 数据机构，其中 Map 、Set 属于 ES6 的。

废话不多说，直接贴上全部代码，代码中有注释。

在这里可以向面试官展示你的六个编程能力。

*  **代码逻辑的严谨性。**
 *  **深入了解数据类型的能力。**
 *  **JS Api 的熟练使用的能力。**
 *  **了解箭头函数和普通函数的区别。**
 *  **熟练使用正则表达式的能力。**
 *  **模块化开发的能力**

## 王者段位 ##

以上代码中还有很多数据类型的拷贝，没有实现，有兴趣的话可以在评论中实现一下，王者属于你哦！

## 总结 ##

综上所述，面试官叫你实现一个深拷贝，其实是要考察你各方面的能力。例如

*  白银段位
    
     *  **对原始类型和引用类型数据的判断能力。**
     *  **对递归思维的应用的能力。**
 *  黄金段位
    
     *  **正确理解引用类型概念的能力。**
     *  **精确判断数据类型的能力。**
 *  铂金段位
    
     *  **对循环引用的理解，如何解决循环引用引起的问题的能力。**
     *  **对内存泄露的认识和避免泄露的能力。**
 *  砖石段位
    
     *  **具有优化代码运行性能的能力。**
     *  **了解遍历的效率的能力。**
     *  **了解 `++i` 和 `i++` 的区别。**
     *  **代码抽象的能力。**
 *  星耀段位
    
     *  **代码逻辑的严谨性。**
     *  **深入了解数据类型的能力。**
     *  **JS Api 的熟练使用的能力。**
     *  **了解箭头函数和普通函数的区别。**
     *  **熟练使用正则表达式的能力。**
     *  **模块化开发的能力**

所以不要去死记硬背一些手写代码的面试题，最好自己动手写一下，看看自己达到那个段位了。

## 最后 ##

对于大厂面试，我最后想要强调的一点就是心态真的很重要，是决定你在面试过程中发挥的关键，若不能正常发挥，很可能就因为一个小失误与offer失之交臂，所以一定要重视起来。另外提醒一点，充分复习，是消除你紧张的心理状态的关键，但你复习充分了，自然面试过程中就要有底气得多。

#### 我平时一直有整理面试题的习惯，有随时跳出舒适圈的准备，不知不觉整理了229页了，在这里分享给大家，有需要的[点击这里免费领取题目+解析PDF][PDF] ####

**篇幅有限，仅展示部分内容**

![ac0b1c2376da47d727e0dc8a77e76478.png][]

![b871b45fb2e6d5442144c863cbcff965.png][]

![f5c18f4b2878302f1f53a8c393e7eb0d.png][]

### 如果你需要这份完整版的面试题+解析，[**【点击我】**][Link 1]就可以了。 ###

希望大家明年的金三银四面试顺利，拿下自己心仪的offer！

[a843cab8b0245b95c557b72946212dcd.png]: /images/20221120/b75397d3b5124755b6b0a69792225aa1.png
[871439a79db845798f5711f0db84e540.png]: /images/20221120/248d8d8943d04097a67c24c977b33567.png
[834229ab36be9ac3ae810a6e6bb61089.png]: /images/20221120/c1360eac8bb344d4a51a5861727ad35d.png
[33ddb81f3f8b9e3ac68602b9d0714ef0.png]: /images/20221120/ed5b331603f64856a76456705c14d1e6.png
[8472fd8c6bbffbbba206eab700d7ef96.png]: /images/20221120/6f85c2cf473d49939c2068937fcdc903.png
[image]: /images/20221120/c03bbdfd044e44969834b737991abe56.png
[e223c1ebf69166869caf9f608ac4481b.png]: https://img-blog.csdnimg.cn/img_convert/e223c1ebf69166869caf9f608ac4481b.png
[PDF]: https://links.jianshu.com/go?to=https%3A%2F%2Fjq.qq.com%2F%3F_wv%3D1027%26k%3DhCLQP3CQ
[ac0b1c2376da47d727e0dc8a77e76478.png]: https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png
[b871b45fb2e6d5442144c863cbcff965.png]: https://img-blog.csdnimg.cn/img_convert/b871b45fb2e6d5442144c863cbcff965.png
[f5c18f4b2878302f1f53a8c393e7eb0d.png]: https://img-blog.csdnimg.cn/img_convert/f5c18f4b2878302f1f53a8c393e7eb0d.png
[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Fjq.qq.com%2F%3F_wv%3D1027%26k%3DCNNxKtKV