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

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

js实现对象或者数组深拷贝的相关文章

通过JSON.stringfy()和JSON.parse(),实现对象或者数组深拷贝

JavaScript中对象或者数组等引用类型,直接拷贝,改变一个另外一个也会改变: 下列代码在浏览器控制台执行: 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] 通过JSON.stringfy()和JSON.parse()转换 var arr = [1,2,3]; var arr1 = JSON.stringify(arr);

JS中对象与数组(大括号{}与中括号[])

一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数. 如:var LangShen = {"Name":"Langshen","AGE":"28"}; 上面声明了一个名为“LangShen”的对象,多个属性或函数用,(逗号)隔开,因为是对象的属性, 所以访问时,应该用.(点)来层层访问:LangShen.Name.LangShen.AGE,当然我们也可以用数组的方式来访问,如:LangShen[&q

JS的对象、数组等处理方法:解构

对象方法简写 你可以在定义方法时省略function和 :: const obj = { insteadOfThis: function() { // do stuff }, youCanDoThis() { // do stuff } } 请注意,以上不是箭头函数,只是对象方法的简写语法. 解构对象 对象解构是获取对象并将其内部属性提取到对象外部变量的一种方法: const obj = { x: 1, y: 2 } // 不使用解构语法 const x = obj.x const y = ob

JS判断对象是不是数组“Array”

在开发中,我们经常需要判断某个对象是否为数组类型,在Js中检测对象类型的常见方法都有哪些呢? typeof 操作符 对于Function, String, Number ,Undefined 等几种类型的对象来说,他完全可以胜任,但是为Array时 var arr=new Array("1","2","3","4","5"); alert(typeof(arr)); 你会收到一个object 的答案,有点让

JS遍历对象或者数组

一.纯js实现 Js代码   <script> var obj = {"player_id":"GS001","event_id":"1","destroy":"97%"}; var props = ""; for(var p in obj){ if(typeof(obj[p])=="function"){ obj[p](); }els

js遍历对象的数组

遍历数组: 1.js关键for遍历 2.jquery提供each功能 ----------------------------------- $.each(array, function(){ alert(this); }); ----------------------------------- 对象遍历: js: --------------------------------------------- for (var k in obj) { alert(obj[k]). } jquery

js 含有对象的数组去重

1.  参考:https://www.cnblogs.com/le220/p/9130656.html js中数组对象去重的方法     中的方法二 2. 纯数组去重:https://blog.csdn.net/jiangwei1994/article/details/82992985 var arr = [1,1,2,9,6,9,6,3,1,4,5]; arr = Array.from(new Set(arr)) console.log(arr) 原文地址:https://www.cnblog

js基础——对象和数组

1.Object类型 1)使用new运算符 var box = new Object();===>等同于 var box = Object();(省略new关键字) box.name = "张三";// 创建属性字段 box.age = 18;// 创建属性字段 2)字面量表示法 var box ={ name :"张三",  //创建属性字段 age : 18 } 3)字符串式属性字段 var box ={ 'name' :"张三", 

JS中对象转数组方法总结

1.Array.from() 方法,用于数组的浅拷贝.就是将一个类数组对象或者可遍历对象转换成一个真正的数组.eg: let obj = { 0: 'nihao', 1: 'haha', 2: 'gansha', 'length': 3 } let arr = Array.from(obj) console.log(arr); tips: 1. object中必须有length属性,返回的数组长度取决于length长度         2.key 值必须是数值 2.Object.values(o