欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js之-实现深浅拷贝的各种方法

程序员文章站 2024-03-02 16:26:46
...
  • 在js中,数据类型分两种: ‘基本数据类型’ 和 ‘引用数据类型’

  • ‘基本类型数据’ 存在于 栈内存 中,'引用数据类型’ 的属性存在于 栈内存中,值存在与 堆内存中,通过指针来指向对应值

  • 所以,深浅拷贝主要出现在引用数据类型中

  • 如下图,就是浅拷贝,拷贝出来的变量 copyArray,只是拷贝指针,指向的还是同一个堆内存中的数据,所以,其中一个值改变,另外一个值相应改变
    js之-实现深浅拷贝的各种方法

  • 如下图,就是深拷贝,拷贝出来的值,在堆内存中另外开辟空间,存储新值,通过指针指向。当改变新拷贝的值时,原值不会被改变。
    js之-实现深浅拷贝的各种方法

JSON.prase( JSON.string() )

var arr = [1,2,3,4,5];
var copyArray = JSON.parse( JSON.stringify(arr) );
copyArray[0] = 0;
console.log( arr  )	     // [1, 2, 3, 4, 5]
console.log( copyArray ) // [0, 2, 3, 4, 5]
  • 但是 JSON.parse来转译深拷贝,真的就没问题吗?
  • 先多层嵌套,试一下是否还能深拷贝
var arr = [1, [2,3] , {name: '1'} ];
var copyArray = JSON.parse( JSON.stringify(arr) );
copyArray[1][1] = 0;
console.log( arr ); 		// [1, [2,3] , {name: '1'} ]
console.log( copyArray ) ;  // [1, [2,0], {name: "1"} ]
  • 从上面代码可以看出,多层嵌套时,也能深拷贝。当数据里含有function是否可以依然深拷贝?
var obj = { name: "1" , f: function(){ alert(1) } };
var copyObj = JSON.parse( JSON.stringify(obj) );
console.log( obj ); 		// {name: "1", f: ƒ}
console.log( copyObj ) ;   //  {name: "1"}

从上面代码可以总结出:
JSON.parse进行深拷贝时,能够满足部分数据需求,能够进行多层次数据的拷贝,但是会忽略function,undefined,symbo,所以在使用时,要注意数据结构

循环递归深拷贝

function copy( obj ){
        // 定义常量
        const newCopy = obj.constructor === Array ? [] : {};
        // 循环数据
        for( var key in obj ){
        
            // 判断是否有这个变量
            if( obj.hasOwnProperty(key) ){
                // 判断当前属性是否有值,并且属不属于Array和object (typeOf,不管array还是object都返回object)
                if( !!obj[key] && typeof obj[key] === 'object' ){
                    // 属于Array或者object,并且有值,调用自身,重新循环
                     newCopy[key] = copy(obj[key]);
                }else {
                    // 不属于或者没值,直接赋值
                    newCopy[key] = obj[key]
                }
            }
            
        }
        // return出深拷贝数据
        return newCopy;
    };
    
 // 调用一下
var demoObj = {
     name: {
          val:"1",
          val2:"2",
          val3:"3"
     } , 
     arr: [1,2,3,4], 
     f: function(){ alert(2) }
}
var cloneDemoObj = copy(demoObj);
cloneDemoObj.f = function(){
   alert(6);
}
demoObj.f();	  // 弹出2
cloneDemoObj.f(); // 弹出6
cloneDemoObj.arr[0] = 6;
cloneDemoObj.name.val = "6";
console.log( demoObj );     //  {name: {val:"1",val2:"2",val3:"3"} , arr: [1,2,2,4], f:f{} }
console.log( cloneDemoObj); // {name: {val:"6",val2:"2",val3:"3"} , arr: [6,2,2,4], f:f{} }

concat() , slice(),都不改变原数组,新建数据,经测试,只能深拷贝首层数据

var arr = [1,2,3];
var copyArr = arr.concat();
copyArr[0] = 2;
console.log( arr );       // [1, 2, 3]
console.log( copyArr  ); //  [2, 2, 3]

var arr1 = [1, [1,1,1], 2];
var copyArr1 = arr1.concat();
copyArr1[0] = 0;
copyArr1[1][0] = 0; //深层次数据没有深拷贝,被改变,如下
console.log( arr1 );       //  [1, [0,1,1], 2];
console.log( copyArr1);    //  [0, [0,1,1], 2];