JS深拷贝和浅拷贝

最新推荐文章于 2024-08-14 15:45:18 发布

Kafka的悲伤

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量36

点赞数

分类专栏：前端学习文章标签： javascript 开发语言前端学习

本文链接：https://blog.csdn.net/qq_47043757/article/details/130894989

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文通过代码示例解释了JavaScript中浅拷贝和深拷贝的区别。浅拷贝只复制一层数据，当数据结构复杂时，改变原对象的深层数据会影响副本。而深拷贝会完全复制所有层级的数据，确保修改不互相影响。structuredClone方法用于实现深拷贝，其性能低于浅拷贝，但能保证数据独立。

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

<!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>526</title>
    <script>
        /*
        注 数据用的2层 这里是从内存上来说
        浅拷贝  只复制一层数据   (理解:数据为2层的时候 ：两个人去超市买东西 ，A拿了塑料袋（1层）装了些吃的（2层），B自己拿了一个塑料袋（1层）F，然后吧A的吃的复制拿了过来T)
        最终造成AB塑料袋不一但是里面的吃的相同（共用二层数据）
        
        深拷贝 全复制（不管你有几层数据） 理解:两个人去超市买东西 ，A拿了塑料袋（1层）装了些吃的（2层），B自己拿了一个塑料袋子F，然后参照A袋子里面的东西全部重拿F
        最终造成AB塑料袋不一但是里面的吃的也不同（全新，无共用）

    
        
        */
        //浅复制案例 这里第一层[]不一样 但是第二层[[...],[...]]一样  
        const A=[[1,9,8],[7,6,5,4,3,2]]  
        const B=A.slice()
        console.log(A===B,'第一层') //F
        console.log(A[0]===B[0],'第二层') //T 
        console.log('******1******') 

        //当修改(第二层)A里面的东西，B也会随着更改 
        A[0][1]='11'
        console.log(B)
        console.log('******a******')
        //当修改(第一层)A里面的东西，B不会随着更改 
        A[2]='12'
        console.log(B)
        console.log(A)
        console.log('******b******')
        console.log('******2******') 

        //深拷贝structuredClone  深拷贝性能<浅拷贝性能  一层，二层不一样,修改任意一层数据不会影响其他
        const C=structuredClone(A)
        console.log(C===A)//F
        console.log(C[0]===A[0])//F
        console.log('******3******') 

        

    </script>
</head>
<body>
    
</body>
</html>

记得复习！