深度拷贝数组、对象

我们在js程序中需要进行频繁的变量赋值运算,对于字符串、布尔值等可直接使用赋值运算符=” 即可但是对于数组、对象,如果用“=”赋值,也许你们也和我一样碰到过修改赋值后的变量,原来的数据也会相应的改变。以下是解决方法:

1、slice()

Var arr=["a", "b"]

Var arrCopy = arr.slice(0);

arrCopy[1] = "c";

arr   // => ["a", "b"]

arrCopy   // => ["a", "c"]

在这里我们的思路是直接从数组开头截到尾,该方法并不会修改数组,而是返回一个子数组。

2、concat()

 

concat() 方法用于连接两个或多个数组。调用格式为:

arrayObject.concat(arrayX,arrayX,......,arrayX)

 

Var arr=["a", "b"]

arrCopy = arr.concat();

arrCopy[1] = "c";

arr   // => ["a", "b"]

arrCopy   // => ["a", "c"]

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

使用这种方法的思路是我们用原数组去拼接一个空内容,返回的便是这个数组的拷贝:

3、extend()

   1)extend({},item1,item2,……)

用这个方法,可以将所得的结果全部合并在{}中,并返回,而且还不会破坏原有的项的结构。

示例:

Var item={name:”olive”,age:23};

Var item1={name:”Momo”,sex:”gril”};

Var result=$.extend({},item,item1);

结果:

Result={name:”Momo”,age:23,sex:”gril”};

以上的结果表明extend方法将所有的项都合并到了{}中,但是,细心一点就会发现,其中item1中的name:“Momo” 将item中的name:“olive”给覆盖了,这是怎么回事?请接着往下看。

2) extend(bool,{},item1,item2….)

bool型参数为true表示深拷贝,为false时表示浅拷贝。具体可以通过一下示例来说明:

var item={name:'Amy,age:23,address:{'provice':'海南','city':'海口'}};

var item1={sex:'girl',address:{city:'深圳'}};

var result=$.extend(true,item,item1);

var result1=$.extend(false,item,item1);

  

结果:

Result={name'Amy”,age:23,sex:”gril”,address:{provice:”海南”,city:”深圳”}};

Result1={name'Amy”,age:23,sex:”gril”,address:{ city:”深圳”}};

说明:

当参数为ture时,即为深拷贝,当子项item1中的子项有与item中的子项相同属性的值不一样时,item1中子项的值会将item子项中的值给覆盖,当子项item1的属性跟item中的属性不同时,会与item进行合并。

当参数为false时,子项item1中的子项中与item中的子项属性相同时,item1中子项的属性值会将item中的值给完全覆盖。

如果拷贝的是数组,就用extend(bool,[],item1,item2….)

原文地址:https://www.cnblogs.com/wangdan0915/p/7837848.html