ES5 ES6 深拷贝

最新推荐文章于 2023-10-31 17:07:16 发布

前端酱紫

最新推荐文章于 2023-10-31 17:07:16 发布

阅读量168

点赞数

分类专栏： Javascript JavaScript高级文章标签：深拷贝 js

本文链接：https://blog.csdn.net/wuj1935/article/details/115605898

版权

Javascript 同时被 2 个专栏收录

75 篇文章 2 订阅

订阅专栏

JavaScript高级

28 篇文章 1 订阅

订阅专栏

ES5 深拷贝


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- es5 深拷贝 -->
    <script>
        let obj = {
            name: '小江',
            age: 27,
            info: {
                hobby: ['travel', 'piano', { a: 1 }],
                career: {
                    teacher: 4,
                    engineer: 9
                }
            }
        }

        function deepClone(origin, target) {
            var tar = target || {};
            var toStr = Object.prototype.toString;
            var arrType = "[object Array]";
            for (var k in origin) {
                if (origin.hasOwnProperty(k)) {
                    if (typeof origin[k] === 'object' && origin[k] !== null) {
                        tar[k] = toStr.call(origin[k]) === arrType ? [] : {};
                        deepClone(origin[k], tar[k]);
                    } else {
                        tar[k] = origin[k];
                    }
                }
            }
            return tar;
        };

        let newObj = deepClone(obj, {});
        newObj.info.hobby[2].a = 123;
        console.log(obj, '===', newObj);


    </script>
</body>

</html>

ES6


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- es6 深拷贝 -->
    <script>
    // weakMap  弱引用，删除了键名后，键值会被垃圾回收机制回收
    </script>

    <script>
        let obj = {
            name: '小江',
            age: 27,
            info: {
                hobby: ['travel', 'piano', { a: 1 }],
                career: {
                    teacher: 4,
                    engineer: 9
                }
            }
        };


        function deepClone(origin, hashMap = new WeakMap()) {
            if (origin == undefined || typeof origin !== 'object') {
                return origin;
            };
            if (origin instanceof Date) {
                return new Date(origin);
            };
            if (origin instanceof RegExp) {
                return new RegExp(origin);
            };

            const hashKey = hashMap.get(origin);
            if (hashKey) {
                return hashKey;
            }

            let target = new origin.constructor();
            hashMap.set(origin, target);
            for (let k in origin) {
                if (origin.hasOwnProperty(k)) {
                    target[k] = deepClone(origin[k]);
                }
            };
            return target;
        };

        let newObj = deepClone(obj);
        newObj.info.hobby[2].a = 123;
        console.log(obj, newObj);
    </script>

</body>

</html>

前端酱紫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
ES5 ES6 深拷贝

ES5 深拷贝<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
复制链接

扫一扫