《前端面试题》- 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' }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容