JavaScript手写浅拷贝和深拷贝

💂 个人网站: 【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴， 请点击【前端学习交流群】

1.浅拷贝

浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.

    <script>
        const obj = {
            id: 110,
            name: '紫陌',
            msg: {
                age: 18
            }
        };
        //第一种方式
        const a ={}
        for(let i in obj){
            // i 是属性名 obj[i]是属性值
            a[i] = obj[i]
        }
        console.log(a);
        //第二种方式 es6
        const b = {};
        Object.assign(b,obj)
        console.log(b);
        //第三种方式 es6
        const c = {...obj}
        console.log(c);
    </script>

2.深拷贝

深拷贝拷贝多层, 每一级别的数据都会拷贝.

 <script>
        const obj = {
            id: 110,
            name: '紫陌',
            msg: {
                age: 18
            },
            color: ['yellow', 'red']
        };
       const obj1={}

        // 封装函数 
       function deepCopy(newObj,oldObj) {
            for (let i in oldObj) {
                // 判断我们的属性值属于那种数据类型
                // 1. 获取属性值  oldObj[i]
                let item = oldObj[i]
                    // 2. 判断这个值是否是数组
                   if(item instanceof Array){
                    newObj[i] = []
                    deepCopy(newObj[i],item)
                    // 3. 判断这个值是否是对象
                }else if(item instanceof Object){
                    newObj[i] = {}
                    deepCopy(newObj[i],item)
                }else{
                    // 4. 属于简单数据类型
                    newObj[i] = item
                } 
            }
       }
       deepCopy(obj1,obj)
       obj.msg.age = 222
       console.log(obj);
       console.log(obj1);
    </script>