「引言」

❝

臣闻求木之长者，必固其根本；欲流之远者，必浚其泉源。

                                      ---- 魏征 《谏太宗十思疏》

❞

或许你会问到，网上已经把深浅拷贝(算一个面试的高频考点了吧)的文章都快写烂了，为什么自己还要重新操刀写一遍呢！？

❝

首先，一些文章，讲不清也道不明本质；另外，确实有很优秀的人写的很是生动，让我直接看到了风景，却不知道沿途是不是也有自己错过的美景，唯有尝试过，才会真正成为自己的~

❞

首先，我们先来看一张笔者整理的脑图，梳理一下~

希望通过本文的总结，你会有以下几点收获：

• 什么是深浅拷贝？他们与赋值有何区别？
• 浅拷贝的实现方式有哪些？
• 深拷贝的实现方式有哪些？

本章节直接从拷贝开始说起,对于基本数据类型，引用数据类型之前的区别,可以看看上面的思维导图

引用数据类型拷贝

我们从以下三个方面来看看这块的内容

• 赋值
• 浅拷贝
• 深拷贝

赋值

引用类型的赋值是传址。其引用指向堆中的同一个对象，因此操作其中一个对象，另一个对象是会跟着一起变的。

举个栗子：

let lucy = {
    name: 'lucy',
    age: 23
}
let lilei = lucy
lilei.name = 'lilei'
lilei.age = 24
console.log('lucy', lucy)  // lucy {name: "lilei", age: 24}
console.log('lilei', lilei) // lilei {name: "lilei", age: 24}

上面栗子中可以看出来，修改了 lilei 的数据，lucy也会跟着变。这是初学者(笔者也曾这样)经常犯的一个错，后来深刻理解了对象内存的重要性！改掉了这个恶习~

那么我们该如何不让彼此之间不影响呢？

接下来我们引出了 拷贝这个概念，拷贝又分深拷贝和浅拷贝。

来看一看具体是什么和相关区别吧。

「注意：」

1. 对于基本数据类型而言，并没有深浅拷贝的区别
2. 深浅拷贝都是对于引用数据类型而言的
3. 如果我们要赋值对象的所有属性都不是引用类型时，我们可以使用浅拷贝，遍历并复制，最后返回一个对象

「本质&使用场景」：都是复杂对象，就是说对象的属性还是对象

浅拷贝

「本质」：只复制一层对象，当对象的属性是引用类型时，实质复制的是其引用，当引用值指向发生改变时也会跟着改变

「原理」：遍历并复制，最后返回一个对象

来动手实现一个简单的浅拷贝吧

// 实现浅拷贝 for  in 
let shallowCopy = (obj) => {
    let rst = {}
    for (let key in obj) {
        // 只复制本身拥有的属性(非继承过来的属性)
        if (obj.hasOwnProperty(key)) {
            rst[key] = obj[key]
        }
    }
    return rst
}

let lucy = {
    name: 'lucy',
    age: 23,
    hobby: ['running', 'swimming']
}
let lilei = shallowCopy(lucy)
lilei.name = 'lilei'
lilei.age = 24
lilei.hobby[0] = 'reading'
console.log('lucy', lucy)
// lucy {name: "lucy", age: 23, hobby: ['reading', 'swimming']}
console.log('lilei', lilei)
// lilei {name: "lilei", age: 24, hobby: ['reading', 'swimming']}

我们可以看到，当对象的属性是引用类型时，实质复制的是其引用，当引用值指向发生改变时也会跟着改变。

深拷贝

「实质」：深拷贝出来的对象会互不影响

「原理」：对对象中子对象进行递归拷贝

我们下面会手写一个深拷贝哈~接着往下看，会有不一样的收货！

浅拷贝的实现方式

平常用到的浅拷贝有以下几种(欢迎评论补充，互相分享进步)

• Object.assign()
• 扩展运算符(...)
• Array.prototype.slice()

Object.assign()

首先 Object.assign(target, source)可以把n个源对象拷贝到目标对象中去(这不是本节重点讨论的内容，先一笔带过)

然后呢，Object.assign 是 ES6新增的对象方法，那么它到底是一个深拷贝还是一个浅拷贝的方法呢？

告诉你一个绝招吧(小点声)！

「拷贝对象时，第一级属性是深拷贝，以后级别浅拷贝」

举个栗子你就知道了

let lucy = {
    name: 'lucy',
    age: 23,
    hobby: ['running', 'swimming']
}
let lilei = Object.assign({}, lucy)
lilei.name = 'lilei'
lilei.age = 24
lilei.hobby[0] = 'reading'
console.log('lucy', lucy)
// lucy {name: "lucy", age: 23, hobby: ['reading', 'swimming']}
console.log('lilei', lilei)
// lilei {name: "lilei", age: 24, hobby: ['reading', 'swimming']}

可以看出这个和咱们上面实现的那个浅拷贝的结果是一样的。

还是那句话：「拷贝对象时，第一级属性是深拷贝，以后级别浅拷贝」

是不是简简单单呢~

扩展运算符(...)

这个和 Object.assign 一样，我们来看个栗子验证一下

let lucy = {
    name: 'lucy',
    age: 23,
    hobby: ['running', 'swimming']
}
let lilei = {...lucy}
lilei.name = 'lilei'
lilei.age = 24
lilei.hobby[0] = 'reading'
console.log('lucy', lucy)
// lucy {name: "lucy", age: 23, hobby: ['reading', 'swimming']}
console.log('lilei', lilei)
// lilei {name: "lilei", age: 24, hobby: ['reading', 'swimming']}

哦~一毛一样啊和上面。

Array.prototype.slice()

说到这个方法，我第一次看见的时候是在看 vue 源码的时候，那个时候真是涨见识(姿势)了

话不多说，看一下就知道

// Dep notify 方法
Dep.prototype.notify = function notify() {
    var subs = this.subs.slice()
    // ...
}

利用了slice() 方法会返回一个新的数组对象，但也是一个浅拷贝的方法。

即「拷贝对象时，第一级属性是深拷贝，以后级别浅拷贝」

看一个具体的栗子

let a1 = [1, 2, [3, 4]]
let a2 = a1.slice()

a2[1] = 3
a2[2][0] = 5
console.log('a1', a1) // a1 (3) [1, 2, [5, 4]]
console.log('a2', a2) // a2 (3) [1, 3, [5, 4]]

是不是验证了这个道理呢~

同时也要去「注意」 concat这些会返回一个新的数组对象方法等，避免造成一些工作开发者不必要的困扰~

深拷贝的实现方式

深拷贝拷贝出来的对象互不影响，但深拷贝相比于浅拷贝速度会比较慢且开销会较大，所以考虑清楚数据结构有几层，不是很复杂的数据结构建议浅拷贝来节省性能。

看一种最简单的深拷贝实现方式

JSON.parse(JSON.stringify())

**原理：**能将json的值json化

就是指纯JSON数据，不包含循环引用，循环引用会报错

拿之前的栗子改造一下看看有哪些需要注意的地方

let lucy = {
    name: 'lucy',
    age: 23,
    hobby: ['running', 'swimming'],
    say: function() {
        return this.name
    },
    other: undefined
}
let lilei = JSON.parse(JSON.stringify(lucy))
lilei.name = 'lilei'
lilei.age = 24
lilei.hobby[0] = 'reading'
console.log('lucy', lucy)
// lucy {
//    name: 'lucy',
//    age: 23,
//    hobby: ['running', 'swimming'],
//    say: function() {
//        return this.name
//     },
//    other: undefined
//   }
console.log('lilei', lilei)
// lilei {age: 24, hobby: ['reading', swimming], name: 'lilei'}

可以看出来这个方法还是挺强大的。

但是也能发现一些问题

• 会忽略 undefined  Symbol
• 不能序列化函数
• 不能解决循环引用的对象
• 不能处理正则
• 不能正确处理 new Date() (转换成时间戳可以拷贝)

此外，深拷贝的其他方法还有 jQuery.extend()以及一些三方库实现的深拷贝 lodash.cloneDeep()等等。大家感兴趣可自行了解，继续深造~

重头戏，面试常考，手写一个深拷贝，哈哈哈是不是就等这个呢~

我们改造一下上面的浅拷贝

递归实现深拷贝

// 判断边界， null 这个特殊情况
let isObject = obj => typeof obj === 'object' && obj !== null

// 递归实现深拷贝
let deepClone = (obj) => {
    // 先判断是数组还是对象
    let newObj = Array.isArray(obj) ? [] : {}
    if (isObject(obj)) {
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                if (isObject(obj[key])) {
                    // 递归调用每一层
                    newObj[key] = deepClone(obj[key])
                } else {
                    newObj[key] = obj[key]
                }
            }
        }
    }
    return newObj
}

let aa = {
    name: 'aa',
    car: ['宝马', '奔驰'],
    driver: function () { },
    age: undefined
}
let bb = deepClone(aa) // 全部拷贝了一份

bb.name = 'bb'
bb.age = 20
bb.driver = 'xxx'
console.log(bb) 
// { name: 'bb', car: [ '宝马', '奔驰' ], driver: 'xxx', age: 20 }
console.log(aa)
// { name: 'aa', car: [ '宝马', '奔驰' ], driver: function() {}, age: undefined }

可以看出来，咱们这个递归实现的深拷贝，规避掉了 上面 JSON.parse(JSON.stringify())的一些弊端。但是还存在一些问题

1. 循环检测的问题
2. 拷贝一个Symbol类型的值又该怎么解决？
3. 如何解决递归爆栈的问题

哈希表

针对于循环检测，我们可以使用哈希检测的方法，比如设置一个数组或者是已经拷贝的对象，当检测到对象已经存在哈希表时，就去除该值。

let isObject = obj => typeof obj === 'object' && obj !== null;
let deepClone = (source, hash = new WeakMap()) => {
    if (!isObject(source)) return source // 非对象返回自身
    if (hash.has(source)) return hash.get(source) // 新增检测, 查哈希表
    let target = Array.isArray(source) ? [] : {}
    hash.set(source, target) // 设置哈希表值
    for (let key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = isObject(source[key]) ? deepClone(source[key], hash) : source[key]; // 传入哈希表
        }
    }
    return target
}
let obj = {
    a: 1,
    b: {
        c: 2,
        d: 3
    }
}
obj.a = obj.b;
obj.b.c = obj.a;
let clone_obj = deepClone(obj)
console.log(clone_obj)

上面实现有点难度，如果未能一下看透，不妨先跳过，完成之前的那个深拷贝就够了，当然，我喜欢不惧困难的人~

剩下的两个就交给喜欢深度思考的人来去头脑风暴一下吧。

最后总结一下

写在最后

❝

享受过程带来的喜悦，学会去克服自己的缺点！

❞