JavaScript-深浅拷贝

浅拷贝

            概念：浅拷贝即只复制对象的引用，所以副本最终也是指向父对象在堆内存中的对象，

            无论是副本还是父对象修改了这个对象，副本或者父对象都会因此发生同样的改变；

          方法：  

            + 简单赋值

            + 简单的遍历  

            + 扩展运算符

            + assign  

1.简单赋值

        let obj = {
            name: '张三',
            age: 18,
            o:{
                gender: '男',
            },
            arr:[10,20]
        }
        let  newObj = obj
        newObj.name = '李四'
        console.log(newObj)
        console.log('原始的',obj)

2.简单的遍历

let obj = {
            name: '张三',
            age: 18,
            o:{
                gender: '男',
            },
            arr:[10,20]
        }
        let newObj = {}
        for (let key in obj) {
            newObj[key] = obj[key]
        }
        // newObj.name = '李四'
        newObj.o.gender = '保密'
        console.log(newObj)
        console.log('原始的',obj)

3.扩展运算符

let obj = {
            name: '张三',
            age: 18,
            o:{
                gender: '男',
            },
            arr:[10,20]
        }
 {...obj}
        // newObj.name  = '李四'
        newObj.arr[0] = 500
        console.log(newObj)
           console.log('原始的',obj)

4. assign  

let obj = {
            name: '张三',
            age: 18,
            o:{
                gender: '男',
            },
            arr:[10,20]
        }
let newObj  = Object.assign(obj)
        newObj.name  = '李四'
        console.log(newObj)

        console.log('原始的',obj)

深拷贝

            概念：直接复制父对象在堆内存中的对象，最终在堆内存中生成一个独立的，与父对象无关的新对象。

           深拷贝的对象虽然与父对象无关，但是却与父对象一致。两者互不影响

           + json反序列化  

           + 递归遍历对象

           + lodash

           + 通过JQuery的extend方法实现深拷贝

1.json反序列化

 let obj = {
            name: '张三',
            fn: function () { },
            a: null,
            o: {
                gender: "男",
                obj1: {
                    age: 18
                }
            },
            arr: [10, 20]
        }
let newObj = JSON.parse(JSON.stringify(obj))

2.递归遍历对象

let obj = {
            name: '张三',
            fn: function () { },
            a: null,
            o: {
                gender: "男",
                obj1: {
                    age: 18
                }
            },
            arr: [10, 20]
        }
 function deepClone(obj) {
            // 判断是数组还是对象 然后给cloneObj赋值
            let cloneObj = Array.isArray(obj) ? [] : {}
            //  判断是不是对象还是数组
            if (obj && typeof obj == 'object') {
                // 第一层遍历
                for (var key in obj) {
                    // 如果是对象或者数组 让他继续遍历 
                    if (obj[key] && typeof obj[key] == 'object') {
                        cloneObj[key] = deepClone(obj[key])
                    } else {
                        cloneObj[key] = obj[key]
                    }
                }
            }
            return cloneObj
        }

3.lodash

let obj = {
            name: '张三',
            fn: function () { },
            a: null,
            o: {
                gender: "男",
                obj1: {
                    age: 18
                }
            },
            arr: [10, 20]
        }
        let  newObj = _.cloneDeep(obj)
        // console.log(newObj)

          newObj.o.gender = '女'
        newObj.o.obj1.age = 20
        newObj.arr[0] = 500
        console.log('拷贝的', newObj)
        console.log('原始的', obj)

 4.juquer

let targetObj = {
    id:1,
    msg:{
        sex:"男"
    }
}
 
let obj = {
    id:2,
    name:"小蜗",
    msg:{
        age:22
    }
}
 
$.extend(true,targetObj,obj)

以上便是所有内容，如有不对请留言指正~~