今天遇到个问题,就是vue绑定的数组在push中所有的数组都会跟着改变。这个主要是因为 JavaScript中对象或者数组等引用类型,直接拷贝,改变一个另外一个也会改变;
有个简单的方法就是先转换为字符串再转换为json
var arr = [1,2,3]; var arr1 = arr; arr1.push(4); console.log(arr); //[1,2,3,4] console.log(arr1);//[1,2,3,4]
上面这是没转换的.
1、通过JSON.stringfy()和JSON.parse()转换
var arr = [1,2,3]; var arr1 = JSON.stringify(arr); var arr2 = JSON.parse(arr1); arr2.push(4); console.log(arr); //[1, 2, 3] console.log(arr1);//字符串[1,2,3] console.log(arr2);//[1, 2, 3, 4]
2、通过for循环
function copyArry(arr) { var res=[]; for(var i=0;i<arry1.length;i++){ res.push(arry1[i]) } return res } var arry1=[1,2,3,4]; var arry2=copyArry(arry1); arry2.push(5) console.log(arry1)//[1,2,3,4] console.log(arry2)//[1,2,3,4,5]
3、slice 方法实现数组的深拷贝
var arry1=[1,2,3,4]; var arry2=arry1.slice(0); arry2.push(5) console.log(arry1)//[1,2,3,4] console.log(arry2)//[1,2,3,4,5]
4、concat 方法实现数组的深拷贝
var arry1=[1,2,3,4]; var arry2=arry1.concat(); arry2.push(5)
console.log(arry1)//[1,2,3,4] console.log(arry2)//[1,2,3,4,5]
时间: 2024-11-05 15:45:22