JavaScript — 深拷贝的几种方式、手写深拷贝

废话不多说，直接上干货，走起！

1、JSON.parse 搭配 JSON.stringify

通过 JSON.stringify 将对象转换成字符串，然后再通过 JSON.parse 将字符串再解析为对象，这样就能完成一个对象的深拷贝。

let list = [
    { name: 'lisi', age: 18 },
    { name: 'wangwu', age: 19 },
]
let newList = JSON.parse(JSON.stringify(list))

注意：只能完成大约80%的深拷贝，因为对于 function 方法，转为字符串再解析回来会变成 "function" ，这就导致带有方法的对象不能进行深拷贝

2、递归调用

第一种：

// 封装深拷贝函数 source为传入的对象
function deepClone(source){
    // 准备一个容器
    // 数组的构造函数为Array（基类）、对象的构造函数为Object
    const targetObj = source.constructor === Array ? [] : {}
    // for in遍历对象
    for(let key in source) {
        // hasOwnProperty()方法用于检测一个对象是否含有特定的【自身属性】，返回一个布尔值
        // 为了过滤掉继承原型链的属性 只拿到自身的属性
        if (source.hasOwnProperty(key)) {
            // 引用数据类型
            if (source[key] && typeof source[key] === 'object') {
                // 递归
                targetObj[key] = deepClone(source[key])
            } else {
                // 基本数据类型
                targetObj[key] = source[key]
            }
        }
    }
    return targetObj
}

hasOwnProperty()方法用于检测一个对象是否含有特定的自身属性，返回一个布尔值

第二种：

// 封装函数 深拷贝
function deepCopy(newObj, oldObj) {
    for (var k in oldObj) {
        // 判断我们的属性值属于哪种数据类型
        // 1 获取属性值
        var item = oldObj[k];
        // 2 判断这个值是否是数组 先写数组后写对象，是因为数组也是对象
        if (item instanceof Array) {
            newObj[k] = [];
            // 相当于o.color=[]
            deepCopy(newObj[k], item);
        }
        // 3 判断这个值是否是对象
        else if (item instanceof Object) {
            newObj[k] = {};
            deepCopy(newObj[k], item);
        }
        // 4 属于简单数据类型
        else {
            newObj[k] = item;
        }
    }
}

3、loadsh 库的 cloneDeep(value)

如何使用这个 API 呢？我们需要先下载 lodash 包

npm i loadsh

然后需要在使用的文件中引入这个包

import _ from 'lodash'

之后便可以对这个API进行调用

const newObj = _.cloneDeep(cloneObj)

这样就完成了loadsh库实现深拷贝

---

补充：Object.assign(target, ...sources) 和 解构赋值 是浅拷贝

---