深拷贝浅拷贝

嘴巴嘟嘟

已于 2022-04-28 22:46:41 修改

阅读量141

点赞数 1

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

于 2020-01-21 13:38:55 首次发布

本文链接：https://blog.csdn.net/qq_41961239/article/details/104052884

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

克隆数据：对象/数组

  1、区别： 浅拷贝/深度拷贝
     判断： 拷贝是否产生了新的数据还是拷贝的是数据的引用
     知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用
     let obj = {username: 'kobe'}
     let obj1 = obj; // obj1 复制了obj在栈内存的引用
  2、常用的拷贝技术
    1). arr.concat(): 数组浅拷贝
    2). arr.slice(): 数组浅拷贝
    3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
    4). 浅拷贝包含函数数据的对象/数组
    5). 深拷贝包含函数数据的对象/数组

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>Document</title>
</head>

<body>
    <script>

        function copy (obj) {
            let res = obj instanceof Array ? [] : {}
            for (const [k, v] of Object.entries(obj)) {
                res[k] = typeof v === 'object' ? copy(v) : v
            }
            return res
        }

        let data = {
            name: "张三",
            list: [
                {
                    title: "12312",
                    desc: "次打"
                },
                { title: "saf sf ", desc: 'asdgsd' }
            ],
            data: {
                hi: {
                    title: 111
                },
                title111: 'sadfasdf'
            }
        }
        let hd = copy(data)
        hd.data.title111 = "dfgbdsf啥都贵撒旦法"
        hd.list[0].title = "22222"
        console.log(JSON.stringify(hd, null, 2))
        console.log(JSON.stringify(data, null, 2))

    </script>
</body>

</html>

在这里插入图片描述

嘴巴嘟嘟

关注

1
点赞
踩
0

收藏

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

克隆数据：对象/数组 1、区别：浅拷贝/深度拷贝判断：拷贝是否产生了新的数据还是拷贝的是数据的引用知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用 let obj = {username: 'kobe'} let obj1 = obj; // obj1 复制了obj在栈内存的引用 2、常用的拷贝技术 1). arr....
复制链接

扫一扫