1.浅拷贝

操作拷贝之后的对象的某个属性会影响原始对象中的属性 这种叫做浅拷贝。
浅拷贝不是直接赋值,浅拷贝新建了一个对象将原来对象的属性都一一复制过来,浅拷贝只复制了第一层,所以当属性是引用数据类型时,就会只复制了引用数据的地址。这样无论是原始对象还是拷贝之后的对象都是依据同一个地址使用该属性,如果一边进行了修改,另一边在取值时也会发生变化。

    function shadowCopy(toObj,fromObj){
            //实现浅拷贝
            for(var key in fromObj){
                toObj[key]=fromObj[key];
            }
            return toObj;
       }
    var obj={
           name:'forceddd',
           age:18,
           size:'20',
           friend:{
               name:'alex',
               age:38
           }
       }
       var newObj=shadowCopy({},obj)
       console.log(newObj);
       console.log(newObj===obj);//false
       newObj.name='zcy';
       newObj.friend.name='zwwwww';
       console.log(newObj.name,obj.name);//'zcy' 'forceddd'
       console.log(newObj.friend.name,obj.friend.name);//'zwwwww' 'zwwwww' 都发生了改变

2.深拷贝

操作拷贝之后的对象的某个属性不会影响原始对象中的属性,这种叫做深拷贝。在复制时,如果发现属性值是对象,就递归继续复制该属性。

    function deepCopy(toObj, fromObj) {
            for (var key in fromObj) {
                //判断属性是否是自身属性
                if (fromObj.hasOwnProperty(key)) {
                    //如果属性有值是对象,还要继续遍历
                    if (fromObj[key] && typeof fromObj[key] === 'object') {
                        //判断具体是数组还是对象
                        toObj[key] = fromObj[key].constructor === Array ? [] : {};
                        deepCopy(toObj[key], fromObj[key]);
                    } else {
                        toObj[key] = fromObj[key];
                    }

                }
            }
            return toObj;

        }
    var obj = {
            name: 'forceddd',
            age: 18,
            size: '20',
            friend: {
                name: 'alex',
                age: 38,
                size: [180, 18],
                friend: {
                    name: 'gogogog'
                }
            }
        }
     
        var newObj = deepCopy({}, obj);
        console.log(newObj);
        newObj.friend.name = 'zcy';
        newObj.friend.size = [1, 2, 3];
        console.log(newObj.friend.name, obj.friend.name);
        console.log(newObj.friend.size, obj.friend.size);

forceddd
271 声望912 粉丝

一名前端爱好者。