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

emotion lv.1

发布时间：2022-09-19 18:42:52 339

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' }

文章来源： https://blog.51cto.com/u_11071029/5641263

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。