面试题：如何实现一个深拷贝

引言

上篇文章详细介绍了浅拷贝 Object.assign，并对其进行了模拟实现，在实现的过程中，介绍了很多基础知识。今天这篇文章我们来看看一道必会面试题，即如何实现一个深拷贝。

第一步：简单实现

其实深拷贝可以拆分成 2 步，浅拷贝 + 递归，浅拷贝时判断属性值是否是对象，如果是对象就进行递归操作，两个一结合就实现了深拷贝。

根据上篇文章内容，我们可以写出简单浅拷贝代码如下。

// 木易杨
function cloneShallow(source) {
    var target = {};
    for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
        }
    }
    return target;
}

// 测试用例
var a = {
    name: "muyiy",
    book: {
        title: "You Don't Know JS",
        price: "45"
    },
    a1: undefined,
    a2: null,
    a3: 123
}
var b = cloneShallow(a);

a.name = "高级前端进阶";
a.book.price = "55";

console.log(b);
// { 
//   name: 'muyiy', 
//   book: { title: 'You Don\'t Know JS', price: '55' },
//   a1: undefined,
//   a2: null,
//   a3: 123
// }

上面代码是浅拷贝实现，只要稍微改动下，加上是否是对象的判断并在相应的位置使用递归就可以实现简单深拷贝。

 

这里还是要推荐下小编的web前端学习 群 : 569146385，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括 小编自己整理的一份最新的web前端资料和0基础入门教程，欢迎初学和进 阶中的小伙伴。在不忙的时间我会给大家解惑。

// 木易杨
function cloneDeep1(source) {
    var target = {};
    for(var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (typeof source[key] === 'object') {
                target[key] = cloneDeep1(source[key]); // 注意这里
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

// 使用上面测试用例测试一下
var b = cloneDeep1(a);
console.log(b);
// { 
//   name: 'muyiy', 
//   book: { title: 'You Don\'t Know JS', price: '45' }, 
//   a1: undefined,
//   a2: {},
//   a3: 123
// }

一个简单的深拷贝就完成了，但是这个实现还存在很多问题。

• 1、没有对传入参数进行校验，传入 null 时应该返回 null 而不是 {}

• 2、对于对象的判断逻辑不严谨，因为 typeof null === 'object'

• 3、没有考虑数组的兼容

第二步：拷贝数组

我们来看下对于对象的判断，之前在【进阶3-3期】有过介绍，判断方案如下。

// 木易杨
function isObject(obj) {
    return Object.prototype.toString.call(obj) === '[object Object]';
}

但是用在这里并不合适，因为我们要保留数组这种情况，所以这里使用 typeof 来处理。

// 木易杨
typeof null //"object"
typeof {} //"object"
typeof [] //"object"
typeof function foo(){} //"function" (特殊情况)

改动过后的 isObject 判断逻辑如下。

// 木易杨
function isObject(obj) {
    return typeof obj === 'object' && obj != null;
}

所以兼容数组的写法如下。

// 木易杨
function cloneDeep2(source) {

    if (!isObject(source)) return source; // 非对象返回自身

    var target = Array.isArray(source) ? [] : {};
    for(var key in source) {
        if (Object.prototype.h