JS 深拷贝

85 阅读1分钟

深浅拷贝 (只考虑引用数据类型,当前案例中 只考虑 数组和 对象)

赋值

js
    因为引用数据类型在赋值的时候  是将地址传递过去了
    所以赋值后是将一个地址给到了一个新的变量,如果你对这个地址内做任何操作
    那么两个变量 都会 相互影响
js
    <script>
        const obj = {
            name: '张三',
            age: 18
        }

        const obj1 = obj

        obj.name = '李四'
        console.log(obj.name)   // 李四
        console.log(obj1.name)  // 李四
    </script>

浅拷贝

js
    通过浅拷贝赋值一个引用数据类型到另外一个变量中
    其中这个数据内的基本数据类型修改的时候不会相互影响
    但是其中的 引用数据类型再修改的时候会相互影响
js
    <script>
        const obj1 = {
            name: '张三',
            age: 18,
            o: {
                abc: 10086
            }
        }
        // 1. for...in.. 实现浅拷贝
        //const obj2 = {}
        //for(let key in obj1) {
        //    obj2[key] = obj1[key]
        //}
        //obj1.name = '李四'
        //obj2.age = 20
        //obj1.o.abc = 10010
        //console.log('obj1',obj1)
        //console.log('obj2',obj2)
        // 2.通过 对象内部的一个 方法 完成浅拷贝
        const obj2 = Object.assign({}, obj1)
        obj1.name = '李四'
        obj2.age = 20
        obj1.o.abc = 10010
        console.log('obj1',obj1)
        console.log('obj2',obj2)
        
    </script>

image.png

深拷贝

js
    基于原本的数据,复制出一个一模一样的,但是内部数据的修改,不会相互影响
js
    // 方法1  (利用 递归)
    <script>
        const obj1 = {
            name: '李四',
            arr: [1,2,3],
            innerObj: {
                age: 18
            }
        }

        const obj2 = {}

        function copyObj (target,obj) {
            for(let key in obj){
                if(Object.prototype.toString.call(obj[key])  === '[object Object]'){
                    target[key] = {}
                    copyObj(target[key],obj[key])
                }else if(Object.prototype.toString.call(obj[key]) === '[object Array]') {
                    target[key] = []
                    copyObj(target[key],obj[key])
                }else{
                    target[key] = obj[key]
                }
            }
        }   

        copyObj(obj2,obj1)

        obj2.arr = [4,5,6]
        console.log(obj1)
        console.log(obj2)
    </script>
    
    // 方法2  (利用 JSON 转换)
    <script>
        const obj1 = {
            name: '李四',
            arr: [1,2,3],
            innerObj: {
                age: 18
            }
        }
        const obj2 = JSON.parse(JSON.stringify(obj1))
        obj2.arr = [4,5,6]
        console.log(obj1)
        console.log(obj2)
    </script>

image.png