浅拷贝与深拷贝

最新推荐文章于 2023-10-08 14:59:12 发布

星期五の夜

最新推荐文章于 2023-10-08 14:59:12 发布

阅读量307

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43550562/article/details/106318500

版权

js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

浅拷贝

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 基本数据类型:Number、String、Boolean、Null、undefined、Symbol、Bigint(新引入的)
        // 引用数据类型:Object、Array、Function等

        // 对对象而言，它的第一层属性值如果是基本数据类型则完全拷贝一份数据，
        // 如果是引用类型就拷贝内存地址
        // 实现 Object.assign()
        let obj1 = {
            name: 'zhangfan',
            age: {
                value: 18
            }
        }
        let obj2 = Object.assign({}, obj1)
        console.log(obj2) // {name:'zhangfan',age:{value:18}}
        console.log(obj1) // {name:'zhangfan',age:{value:18}}
        obj2.age.value = 28
        console.log(obj2) // {name:'zhangfan',age:{value:28}}
        console.log(obj1) // {name:'zhangfan',age:{value:28}} // 指向同一个内存地址 一变皆变

        // console.log(obj1 === obj2) // false

        obj1.name = 'oupai'
        console.log(obj1) // {name:'oupai',age:{value:28}} // 承接最近的值
        console.log(obj2) // {name:'zhangfan',age:{value:28}} // 承接最近的值

        // 展开语法
        let aaa = {
            name: 'liubei',
            age: {
                value: 10
            }
        }
        let { ...bbb } = aaa
        bbb.name = 'guanyu'
        bbb.age.value = 20
        console.log(bbb) // {name:'guanyu',age:{value:20}} 引用类型变了(地址一致)
        console.log(aaa) // {name:'liubei',age:{value:20}} 引用类型变了(地址一致)

        let b = {
            ...aaa,
            age: {
                value: 100000
            },
            c: {
                value111: 123
            }
        }
        console.log(b) // {name:'liubei',age:{value:100000},c:{value111: 123}}

        // Array.prototype.slice
        const arr1 = [
            'yang',
            {
                value: 123
            }
        ]
        const arr2 = arr1.slice(0) // slice 提取字符串的某个部分 slice(0) 就是全部
        console.log(arr2) // ['yang',{value:123}]
        arr2[1].value = 456
        console.log(arr1) // ['yang',{value:456}]
        console.log(arr2) // ['yang',{value:456}]
        arr2[0] = 'haha'
        console.log(arr2) // ['haha',{value:456}]
        console.log(arr1) // ["yang", {value: 456}]

        const arr3 = [
            'yang',
            {
                value: 123
            }
        ]
        const arr4 = [].concat(arr3)
        console.log(arr4) // ['yang',{value:123}]
        arr4[1].value = 456
        console.log(arr4) // ['yang',{value:456}]
        console.log(arr3) // ['yang',{value:456}]
        arr4[0] = 'haha'
        console.log(arr4) // ['haha',{value:456}]
        console.log(arr3) // ['yang',{value:456}]
    </script>
</head>

<body>

</body>

</html>

深拷贝

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 深拷贝就是不管是基本数据类型还是引用数据类型都重新拷贝一份， 不存在共用数据的现象

        // 暴力版本 JSON.parse(JSON.stringify(object))
        let obj1 = {
            name: 'zhangfan',
            age: {
                value: 18
            }
        }
        let obj2 = JSON.parse(JSON.stringify(obj1))
        console.log(obj2) // {name:'zhangfan',age:{value:18}}
        console.log(obj1) // {name:'zhangfan',age:{value:18}}
        obj2.age.value = 28
        console.log(obj2) // {name:'zhangfan',age:{value:28}
        console.log(obj1) // {name:'zhangfan',age:{value:18}} // 不存在共用数据的现象


        // 看看它的缺陷
        var obj3 = {
            func: function () {
                console.log('this is function')
            },
            date: new Date(),
            symbol: Symbol(),
            a: null,
            b: undefined,
            c: {
                a: 1
            },
            e: new RegExp('regexp'),
            f: new Error('error')
        }
        let obj4 = JSON.parse(JSON.stringify(obj3))
        console.log(obj4) // {date: "2020-05-24T09:48:09.479Z", a: null, c: {a:1}, e: {}, f: {}}
        // 缺陷
        // 1.会忽略undefined
        // 2.会忽略symbol
        // 3.不能序列化函数
        // 4.不能解决循环引用的现象
        // 5.不能正确处理new Date()
        // 6.不能处理正则
        // 7.不能处理new Error 


    </script>a:1
</head>

<body>

</body>

</html>

星期五の夜

关注

0
点赞
踩
0

收藏

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

浅拷贝<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 基本数据类型:Nu
复制链接

扫一扫