您的位置:首页 > Web前端 > JavaScript

js 对象浅拷贝、深拷贝

2017-11-01 20:44 288 查看
对于对象这种内存占用比较大的来说,直接让复制的东西等于要复制的,那么就会发生引用,因为这种复制,只是将复制出来的东西的指向指向了要复制的那个东西,简单的说,就是两个都同时指向了一个空间,如果改变其中一个,另一个也会发生变化。这就发生了引用。

1、数组浅拷贝

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


2.数组深拷贝

2.1 slice方法。因为slice不是在原数组上修改,而是会返回新的数组。

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


2.2 concat方法,因为concat不是在原数组上修改,而是会返回新的数组。

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


2.3 es6提供的方法 Array.from()

var arr1=[1,2,3,4,5];
var arr2=Array.from(arr1);
arr2.push(6);
console.log(arr1);//[1, 2, 3, 4, 5]
console.log(arr2);//[1, 2, 3, 4, 5, 6]


2.4 es6提供的解构赋值里的扩展运算符

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


2.5 for循环

var arr1=[1,2,3,4,5];
var ar2=[];
for(var i=0;i<arr1.length;i++){
arr2.push(i);
}
console.log(arr1);//[1, 2, 3, 4, 5]
console.log(arr2);//[1, 2, 3, 4, 5, 6]


对象深拷贝

1 for循环

var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var obj2 = copyObj(obj)
function copyObj(obj) {
let res = {}
for (var key in obj) {
res[key] = obj[key]
}
return res
}


2、json

var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var obj2=JSON.parse(JSON.stringify(obj))


3.解构赋值

var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var { ...obj2 } = obj
obj.old = '22'
console.log(obj)
console.log(obj2)


深复制和浅复制最根本的区别在于是否是真正获取了一个对象的复制实体,而不是引用,

  1)深复制在计算机中开辟了一块内存地址用于存放复制的对象,

  2)而浅复制仅仅是指向被复制的内存地址,如果原地址中对象被改变了,那么浅复制出来的对象也会相应改变。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: