javascript中数组和对象的深拷贝和浅拷贝

1、首先理解一下“深拷贝”和“浅拷贝”的区别：

浅拷贝：a = b;//a和b中存的是相同的地址，该地址指向堆内存中相同的地方，即a和b就是一个东西，改变a的值b的值也会跟着改变，同理改变b的值a的值也会发生改变；

深拷贝：a和b中存的地址不同，但是地址对应的堆内存中的内容完全一致，即b是a的副本

2、

（1）数组和对象的浅拷贝一样  ，简单的赋值操作

var b = a;

如数组的浅拷贝：

var a = ['1','2','3'];
var b = a;
b[0] = '5';
console.log('a',a);
console.log('b',b);

 

输出的值为：

对象的浅拷贝：

var a = {name:'1',age:'2',color:'3'};
var b = a;
b.name = '5';
console.log('a',a);
console.log('b',b);

 

输出的值为：

（2）数组的深拷贝（仅针对单层数组）

ES5：var b = a.concat();

var a = ['1','2','3'];
var b = a.concat();
b[0] = '5';
console.log('a',a);
console.log('b',b);

 

输出的结果为：

ES6 let [...b] = a;或者 let b = [...a]

（3）对象的深拷贝(仅针对单层对象)

ES5: 

var a = {name:'1',age:'2',color:'3'};
function copyObj(a) {
var b = {};
for(var key in a) {
b[key] = a[key];
}
return b;
}
var c = copyObj(a);
c.name = '5';
console.log('c',c);
console.log('a',a);

输出的结果为：

ES6：

let {...b} = a;或者let b = {...a}

这里单层数组和对象的深拷贝实现实际上是Object.assign(target, ...source)的语法糖。

补充：

合并数组： 

let arr = ['name']
let arr1 = ['name1', ...arr]
console.log(arr1) //输出 ["name1", "name"]

合并对象：

let obj = {name: 'zyp'}
let obj1 = {name1: 'zyp1', ...obj}
console.log(obj1) //输出 {name1: "zyp1", name: "zyp"}

 

当然，这里的拷贝也是深拷贝