JS面试题中深拷贝的实现讲解

让我来详细讲解一下“JS面试题中深拷贝的实现讲解”的完整攻略。

什么是深拷贝

深拷贝是创建一个新的对象，复制原始数据的所有属性，并且递归地复制该对象的所有属性，原始对象中的所有嵌套对象也被递归复制，即所有的嵌套对象都得到相同的值的一个全新的独立的拷贝，与原始对象没有任何联系。

深拷贝的实现

实现方式

• 递归拷贝
• JSON.parse && JSON.stringify

递归拷贝

递归拷贝对象

function deepClone(obj) {
    // 判断是否是对象或者数组
    if (typeof obj !== 'object' || obj === null) {
        return obj
    }
    // 判断是数组还是对象
    const newObj = Array.isArray(obj) ? [] : {}
    for (let key in obj) {
        newObj[key] = deepClone(obj[key])
    }
    return newObj
}

递归拷贝函数

function fnDeepClone(obj) {
    // 判断是否可执行
    if (typeof obj !== 'function') {
        return obj
    }
    // 判断是箭头函数还是普通函数
    let fn = obj.toString().match(/function\s*([^\(]*)\(/);
    let result = new Function(`return ${obj.toString()}`)();
    if (fn) {
        Object.defineProperty(result, 'name', { value: fn[1] });
    }
    return result;
}

JSON.parse && JSON.stringify

使用 JSON.stringify 将对象序列化为字符串，再用 JSON.parse 将字符串再解析回对象，由于 JSON 中的所有值都只能是对象，数组，字符串，数字，true，false，null，所以如果对象中有函数，undefined 这样无法被序列化的对象时，这种方法就不太可行了，实际应用中需要注意。

function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj))
}

支持类型

• 数组
• 对象
• 嵌套的数组、对象
• 嵌套的函数

代码示例

递归拷贝示例

const obj = {
    a: 1,
    b: [1, 2, 3],
    c: {
        d: 2,
        e: {
            f: function () {
                console.log('f');
            }
        }
    }
}

const newObj = deepClone(obj)
console.log(newObj) // {a: 1, b: [1, 2, 3], c: {…}}
newObj.a = 2
newObj.b.push(4)
newObj.c.e.f = null
console.log(obj) // {a: 1, b: [1, 2, 3], c: {…}}
console.log(newObj) // {a: 2, b: [1, 2, 3, 4], c: {…}}

JSON.parse && JSON.stringify示例

const obj = {
    a: 1,
    b: [1, 2, 3],
    c: {
        d: 2,
        e: {
            f: function () {
                console.log('f');
            }
        }
    }
}

const newObj = deepClone(obj)
console.log(newObj) // {a: 1, b: [1, 2, 3], c: {…}}
newObj.a = 2
newObj.b.push(4)
newObj.c.e.f = null
console.log(obj) // {a: 1, b: [1, 2, 3], c: {…}}
console.log(newObj) // {a: 2, b: [1, 2, 3, 4], c: {…}}