js 对象深拷贝

1
2
3
4
5
6
7
8
9
10
11
var obj1={
name:"张三",
age:28
};

var obj2=obj1;

obj2.name="李四"

console.log(obbj1.name);//李四
console.log(obbj2.name);//李四

对象和函数都是对象引用的关系,obj1和obj2指向同一个内存地址,所以当obj2改变时,也会影响到obj1


1
2
3
4
5
6
7
8
9
10
11
12
var a=[1,2,3];
var b=a;//此时,a和b同一个引用
b.push(4);
console.log(b);//[1,2,3,4]
console.log(a);//[1,2,3,4] 对象的引用


var a=[1,2,3];
var b=a;//此时同一个引用
b=[1,2,3,4];//此时b又重新占用了一个新地址,与之前的脱离了
console.log(b);//[1,2,3,4];
console.log(a);//[1,2,3];不是同一个引用

数组的深拷贝

1.for循环实现数组的深拷贝

1
2
3
4
5
6
7
8
9
10
11
12
var arr=[1,2,3,4,5];
var arr2=copyArr(arr);
function copyArr(arr){
var newArr=[];
for(let i=0;i<arr.length;i++){
newArr.push(arr[i])
}
return newArr
}
arr2.push(6)
console.log(arr2);//[1,2,3,4,5,6]
console.log(arr)//[1,2,3,4,5]

2.slice方法实现数组的深拷贝

1
2
3
4
5
var arr=[1,2,3];
var arr2=arr.slice(0);
arr2[1]=5
console.log(arr2);//[1,5,3]
console.log(arr)//[1,2,3]

3.concat方法实现数组的深拷贝

1
2
3
4
5
var arr=[1,2,3];
var arr2=arr.concat();
arr2[1]=5
console.log(arr2);//[1,5,3]
console.log(arr)//[1,2,3]

4.ES6拓展运算符实现数组的深拷贝

1
2
3
4
5
var arr=[1,2,3]
var [...arr2]=arr
arr2[1]=5
console.log(arr2);//[1,5,3]
console.log(arr)//[1,2,3]

对象的深拷贝

1.for循环实现数组的深拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var obj={
name:"张三",
sex:"man",
age:"18"
};
var obj2=copyObj(obj)
function copyObj(obj){
var newObj={};
for(var key in obj){
newObj[key]=obj[key]
}
return newObj
}
obj2.name="李四"
console.log(obj2.name);//李四
console.log(obj.name);//张三

2.转化成json再转化成对象实现对象的深拷贝

1
2
3
4
5
6
7
8
9
var obj={
name:"张三",
sex:"man",
age:"18"
};
var obj2=JSON.parse(JSON.stringify(obj))
obj2.name="李四"
console.log(obj2.name);//李四
console.log(obj.name);//张三

3.拓展运算符实现对象的深拷贝

1
2
3
4
5
6
7
8
9
var obj={
name:"张三",
sex:"man",
age:"18"
};
var {...obj2}=obj;
obj2.name="李四"
console.log(obj2.name);//李四
console.log(obj.name);//张三

4.通过对象的Object.assigns()合并方法实现对象的深拷贝

1
2
3
4
5
6
7
8
9
var obj={
name:"张三",
sex:"man",
age:"18"
};
var obj2=Object.assign({},obj)
obj2.name="李四"
console.log(obj2.name);//李四
console.log(obj.name);//张三

补充:使用ES6数组去重

1
2
var arr = [1,2,2,3,3,4,4,5,5]
console.log(new Set(arr));//[1,2,3,4,5]

上一篇
vuex使用心得-vuex的使用场景 vuex使用心得-vuex的使用场景
vuex是vue全家桶中不可或缺的部分,按照官方的说明,vuex是一个专门为vue应用程式开发的状态管理模式。 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状
2017-07-01 刘赛
下一篇
利用filter实现数组去重 利用filter实现数组去重
12345var arr=[1,2,2,3,3,4,1,5];var newArr=arr.filter((item,index,array)=>{ return index==array.indexOf(item) 
2017-02-20 刘赛