js对象拷贝

最新推荐文章于 2022-10-18 11:30:11 发布

man杨杨

最新推荐文章于 2022-10-18 11:30:11 发布

阅读量690

点赞数 4

分类专栏： js 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_55269092/article/details/123314372

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的对象拷贝，包括浅拷贝和深拷贝的概念及实现方法。通过示例展示了浅拷贝如何只复制对象的表面属性，而深拷贝则递归复制了整个对象及其嵌套的对象和数组。同时，对比了两种拷贝方式在修改源对象后对副本的影响，并提供了两种实现深拷贝的方法：递归和JSON转换。

摘要由CSDN通过智能技术生成

（1）代码

<!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>对象拷贝</title>
</head>

<body>
    <script>
        // 浅拷贝
        const stu1 = {
            name: '诸葛亮',
            age: 20
        };

        function shallowCopystu(stu) {
            const newStu1 = {};
            for (let i in stu) {
                newStu1[i] = stu[i];
            }
            return newStu1;
        }
        const newStu1 = shallowCopystu(stu1);
        console.log('************************浅拷贝*************************');
        stu1.name = 'man杨杨';
        stu1.age = 18;
        console.log(stu1);
        console.log(newStu1);

        // 深拷贝
        // 方法一（递归）
        const stu2 = {
            name: '诸葛亮',
            age: 30,
            wife: {
                name: '粉刷匠',
                age: 28
            },
            childrens: [{
                name: '臭皮匠1',
                age: 7
            }, {
                name: '臭皮匠2',
                age: 5
            }, {
                name: '臭皮匠3',
                age: 3
            }]
        }

        function deepCopy(object) {
            const newObject = {};
            for (let i in object) {
                if (object[i] instanceof Object) {
                    // 运用递归实现深拷贝
                    newObject[i] = deepCopy(object[i]);
                } else {
                    newObject[i] = object[i];
                }
            }
            return newObject;
        }
        const newStu2 = deepCopy(stu2);
        stu2.age = 29;
        stu2.wife.age = 27;
        stu2.childrens[1].age = 4;
        console.log('*************************深拷贝（递归）*************************');
        console.log(stu2);
        console.log(newStu2);
        // 方法二（通过json转换）
        const stu3 = {
            name: '诸葛亮',
            age: 30,
            wife: {
                name: '粉刷匠',
                age: 28
            },
            childrens: [{
                name: '臭皮匠1',
                age: 7
            }, {
                name: '臭皮匠2',
                age: 5
            }, {
                name: '臭皮匠3',
                age: 3
            }]
        }
        let stu3String = JSON.stringify(stu3);
        const newStu3 = JSON.parse(stu3String);
        stu3.name = '无名氏';
        stu3.wife.name = '无名';
        stu3.childrens[2].name = '无名之子';
        console.log('*********************深拷贝（json）********************************');
        console.log(stu3);
        console.log(newStu3);
    </script>
</body>
</html>

（二）输出结果

1、浅拷贝