浅拷贝和深拷贝的理解

最新推荐文章于 2024-08-10 16:15:00 发布

weixin_45849565

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量97

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_45849565/article/details/140065164

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浅拷贝和深拷贝的理解</title>

</head>

<body>
    <script>
        // 浅拷贝和深拷贝的理解
        /* 
            在 JavaScript 中，深拷贝和浅拷贝是两种不同的对象复制方式。以下是它们的区别和实现方法：
            浅拷贝只复制对象的第一层属性，如果属性是对象，则只复制对象的引用。
            深拷贝会递归地复制所有层级的属性，确保每个属性都是独立的副本。
        */


        // 实现浅拷贝的方法
        // 1.使用 Object.assign
        const obj1 = { a: 1, b: { c: 2 } };
        const shallowCopy1 = Object.assign({}, obj1);

        // 2.使用展开运算符
        const obj2 = { a: 1, b: { c: 2 } };
        const shallowCopy2 = { ...obj2 };
        shallowCopy2.b.c = 999
        console.log("obj2",obj2); // { a: 1, b: { c: 999 } }; 原对象也被修改


        // 实现深拷贝的方法
        // 1.使用 JSON.parse 和 JSON.stringify（不适用于包含函数、undefined 或 Symbol 的对象）：
        const obj = {
            a: 1,
            b: function () { console.log('hello'); },
            c: undefined,
            d: Symbol('sym'),
            e: { g: 2 },
        };
        const copy = JSON.parse(JSON.stringify(obj));
        console.log("copy", copy);// { a:1,e: { g: 2 } }

        //  2.使用递归函数
        function deepClone(obj) {
            // 对常见的“非”值，直接返回原来值
            if ([null, undefined, NaN, false].includes(obj)) return obj;
            if (typeof obj !== "object" && typeof obj !== 'function') {
                //原始类型直接返回
                return obj;
            }
            var o = Array.isArray(obj) ? [] : {};
            for (let i in obj) {
                if (obj.hasOwnProperty(i)) {
                    o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i];
                }
            }
            return o;
        }
        const clone = deepClone(obj)
        console.log("clone", clone);// { a:1,b:ƒ (),c:undefined,d: Symbol(sym),e: { g: 2 }}

    </script>
</body>

</html>