深度拷贝数组、对象
我们在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中的值给完全覆盖。