浅拷贝与深拷贝 浅拷贝与深拷贝的区别前端

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

# 浅拷贝的实现方式

直接赋值一个变量

let obj = {username: 'kobe', age: 39, sex: {option1: '男', option2: '女'}};
let obj1 = obj;
obj1.sex.option1 = '不男不女'; // 修改复制的对象会影响原对象
console.log(obj1, obj);

Object.assign()

let obj = {
 username: 'kobe'
 };
let obj2 = Object.assign(obj);
obj.username = 'wade';
console.log(obj);//{username: "wade"}

Array.prototype.concat()

let arr = [1, 3, {
 username: 'kobe'
 }];
let arr2=arr.concat(); 
arr2[2].username = 'wade';
console.log(arr);

修改新对象会改到原对象:

Array.prototype.slice()

let arr = [1, 3, {
 username: ' kobe'
 }];
let arr3 = arr.slice();
arr3[2].username = 'wade'
console.log(arr);

同样修改新对象会改到原对象:

关于Array的slice和concat方法的补充说明：Array的slice和concat方法不修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。详细规则请看MDN对应函数讲解。

# 深拷贝的实现方式

JSON.parse(JSON.stringify())

let arr = [1, 3, {
 username: ' kobe'
}];
let arr4 = JSON.parse(JSON.stringify(arr));
arr4[2].username = 'duncan'; 
console.log(arr, arr4)

原理： 用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

let arr = [1, 3, {
 username: ' kobe'
},function(){}];
let arr4 = JSON.parse(JSON.stringify(arr));
arr4[2].username = 'duncan'; 
console.log(arr, arr4)

这是因为JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，不能接受函数

手写递归方法(含hasOwnProperty)

function inCopy(obj1,obj2) {
 var obj1 = obj1 || {};//容错处理
 for (var k in obj2) { 
 if(obj2.hasOwnProperty(k)){ //只拷贝实例属性，不进行原型的拷贝
 if(typeof obj2[k] == 'object') { //引用类型的数据单独处理
 obj1[k] = Array.isArray(obj2[k])?[]:{};
 inCopy(obj1[k],obj2[k]); //递归处理引用类型数据
 }else{
 obj1[k] = obj2[k]; //值类型的数据直接进行拷贝
 }
 }
 }
}

在进行深拷贝的时候，我们首先需要提出原型对象上的属性；通过hasOwnProperty方法来进行筛选,所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。

函数库lodash

该函数库也有提供_.cloneDeep用来做 Deep Copy

var _ = require('lodash');
var obj1 = {
 a: 1,
 b: { f: { g: 1 } },
 c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);
// false