深浅拷贝之JavaScript不同方法的实现

最新推荐文章于 2024-07-16 17:56:11 发布

ExMaterial

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量186

点赞数

分类专栏：面试准备 JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_49172439/article/details/125603413

版权

面试准备同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

简单来理解深浅拷贝就是：浅拷贝简单数据类型复制值，复杂数据类型复制引用；而深拷贝则无论数据类型是啥都复制值。

下面来看两种拷贝的不同实现方法：

一、浅拷贝

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <script>
        let obj = {
            uname: '张三丰',
            age: 22,
            sex: '男',
            color: ['color', 'blue', 'yellow'],
            message: {
                score: 99,
                index: 6
            }
        };

        let newObj = {};

        // 第一种
        // newObj.uname = obj.uname
        // newObj.age = obj.age
        // newObj.sex = obj.sex

        // 第二种
        // for (let k in obj) {
        //     newObj[k] = obj[k]
        // }
        // console.log(newObj);

        // 第三种
        Object.assign(newObj, obj)
        console.log(newObj);
    </script>
</body>
</html>

二、深拷贝

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

<head>
</head>

<body>
    <script>
        let obj = {
            uname: '张三丰',
            age: 22,
            sex: '男',
            color: ['color', 'blue', 'yellow'],
            message: {
                score: 99,
                index: 6
            }
        };

        let newObj = {};

        // 遍历，如果obj[k]是复杂类型，再遍历一次
        function deepCopy(newObj, obj) {
            for (let k in obj) {
                // 对obj[k]进行判断
                if (obj[k] instanceof Array) {
                    newObj[k] = [];
                    // 递归遍历
                    deepCopy(newObj[k], obj[k])
                } else if (obj[k] instanceof Object) {
                    newObj[k] = {};
                    deepCopy(newObj[k], obj[k])
                } else {
                    newObj[k] = obj[k]
                }
            }
        }

        deepCopy(newObj, obj);
        newObj.message.index = 9;
        console.log(newObj, obj);        
    </script>
</body>

</html>