码迷,mamicode.com
首页 > 编程语言 > 详细

js实现对象或者数组深拷贝

时间:2017-09-28 10:44:29      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:++   bsp   ice   class   javascrip   实现   vue   color   code   

今天遇到个问题,就是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]

 

js实现对象或者数组深拷贝

标签:++   bsp   ice   class   javascrip   实现   vue   color   code   

原文地址:http://www.cnblogs.com/yuanzhiguo/p/7603874.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!