《前端面试题》- JS基础 - 深拷贝代码实现

在面试中，会被问到深拷贝和浅拷贝的区别，之后会问如何实现深拷贝。
常见的一种方式便是利用JSON进行转换，另一种方式就是利用递归的方式进行遍历赋值。
方法思路都很清楚了，那么如何编码实现呢？

JSON的实现方式

const obj = { 
            name: { firstName: 'zhang', lastName: 'zhonghua' }, 
            age: 18, 
            code:function(){ console.log('I am coding...');} 
        }
obj.code();

const newObjString = JSON.stringify(obj);
const newObj = JSON.parse(newObjString);

console.log(newObj.name);
console.log(newObj.age);

// TypeError: newObj.code is not a function
// newObj.code();

// result
//I am coding...
// { firstName: 'zhang', lastName: 'zhonghua' }
// 18

JSON实现方式的缺点

从上面的实现方式中，不难看出，JSON转换的方式，就是把对象转换成字符串，然后由字符串转换成对象。
在这个过程中，code方法的类型就被转换失效了。

递归转换的方式

const obj = { 
    name: { firstName: 'zhang', lastName: 'zhonghua' }, 
    age: 18, 
    code:function(){
    console.log('I am coding...');}
    }

obj.code();

function deepCopy(obj) {
    let result = null;
    if(typeof obj === 'object') {
        // 如果是复杂类型，遍历然后赋值，如果子类型依旧是复杂类型
        // 采用递归的方式，再次进行判断/遍历/赋值
        result = Array.isArray(obj) ? [] : {};
        for(let key in obj) {
            result[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    } else {
        // 如果是简单类型的值，直接赋值
        result = obj;
    }
    return result;
}


let newObj = deepCopy(obj);
console.log(newObj.name);
newObj.code();

// result：
// I am coding...
// { firstName: 'zhang', lastName: 'zhonghua' }