JavaScript 之深浅拷贝

最新推荐文章于 2024-09-22 14:50:37 发布

cloudOnSkyline

最新推荐文章于 2024-09-22 14:50:37 发布

阅读量127

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44827643/article/details/126121729

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

本文通过实例探讨了JavaScript中浅拷贝与深拷贝的区别，重点讲解了如何在复杂数据类型中区分两者，并展示了浅拷贝只复制地址而深拷贝复制完整副本的概念。通过对比浅拷贝修改b后a的变化，与深拷贝c和d独立性的例子来帮助读者理解。

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

本文主要介绍JavaScript中深浅拷贝的使用。顾名思义，两者实际上是对数据进行拷贝，对于简单数据类型而言，两者的区别不大。对于复杂数据类型而言，浅拷贝只会拷贝该数据的地址，深拷贝则会完全复制出一份新的数据。通过以下案例进行简要介绍：

<!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>
    <script>
        let a = [1, 2, 3];
        let b = a;
        console.log("浅拷贝");
        console.log("a的值:", a);
        console.log('a赋值给b,b的值:', b);
        b[0] = 100;
        console.log('修改b的值,b:', b);
        console.log('此时a的值,a:', a);

        console.log("-----------------------------");
        console.log("深拷贝");
        let c = [1, 2, 3];
        let d = JSON.parse(JSON.stringify(c));
        console.log("c的值:", c);
        console.log('c赋值给d,d的值:', d);
        d[0] = 100;
        console.log('修改d的值,d:', d);
        console.log('此时c的值,c:', c);
    </script>
</body>

</html>

运行结果: