21、js - 面试 - 深拷贝

原创已于 2023-06-13 20:37:19 修改 · 231 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #ecmascript #javascript #前端框架 #开发语言

于 2023-06-06 14:55:27 首次发布

文章探讨了JavaScript中实现深拷贝的几种方法，包括使用JSON.parse和JSON.stringify、lodash的_.cloneDeep方法、全局的structuredClone以及自定义递归函数。每种方法的优缺点也被详细说明，例如JSON.stringify会丢失undefined和函数属性，而_.cloneDeep需要引入额外库，structuredClone无法克隆方法，递归函数则可以灵活处理复杂对象和数组。

<script src="./lodash.min.js"></script>

<script>

    // 深拷贝
    const obj = {
        name: 'hello',
        age: 14,
        hi: undefined,
        eat: () => { },
        arr: [1, 2, 3, 4],
        min: {
            son: 'vite'
        }
    }

    // 1、序列化  反序列化  JSON.parse(JSON.stringify())
    // 缺点：属性值是undefined和function的属性会删除
    const newObj1 = JSON.parse(JSON.stringify(obj));
    newObj1.min.son = "pinia";
    // hi属性和eat属性被删掉了
    console.log(newObj1); // { "name": "hello", "age": 14, "arr": [1,2,3,4], "min": { "son": "pinia" } }

    // 2、lodash的 _.cloneDeep()
    // 不会删除属性
    // 缺点：需要引入第三方库
    const newObj2 = _.cloneDeep(obj);
    newObj2.min.son = "ts";
    console.log(newObj2);

    // 3、全局的structuredClone()
    // 缺点：对象的属性值时方法时会报错
    // const newObj3 = structuredClone(obj);
    // newObj3.min.son = "js";
    // console.log(newObj3); // Uncaught DOMException: Failed to execute 'structuredClone' on 'Window': () => { } could not be cloned.
    console.log(obj);
 
    // 4、自己手写递归函数实现深拷贝
    const obj1 = {
        name: 'hello',
        test: {
            age: 12
        }
    }
    const arr = [1, 2, 3, { name: 'vite' }];

    function cloneDeep(oldObj) {
        const newObj = Array.isArray(oldObj) ? [] : {};

        for (let i in oldObj) {
            if (typeof oldObj[i] === 'object') {
                newObj[i] = cloneDeep(oldObj[i]);
            } else {
                newObj[i] = oldObj[i];
            }
        }

        return newObj;
    }

    const result1 = cloneDeep(obj1);
    result1.test.age = 15;
    console.log(result1);
    console.log(obj1);


    const result2 = cloneDeep(arr);
    result2[3].name = "ts";
    console.log(result2);
    console.log(obj);

</script>