浅谈浅拷贝与深拷贝

• 声明:本文用于笔者前端学习阶段的知识点整理,如有遗漏与问题,请多指教,部分内容源自互联网,侵删。

1.数据类型（前置知识）

• 数据类型 值类型(基本数据类型) 引用类型(对象数据类型)。

• • 值类型:直接储存在栈中。
  • 引用类型:实际保存在堆中,引用类型的栈中储存了指针,用来指向堆中该实体的起始地址。

2.浅拷贝 和 深拷贝

• 浅拷贝与深拷贝只是针对引用类型的数据(Object Array)。

• • 对于栈中保存的值类型,浅拷贝与深拷贝没有什么区别,都是将栈中的数据再复制一份,保存起来。
  • 对于在堆中储存的引用类型就有区别了,浅拷贝只是简单的将栈中储存的指针(堆中地址)赋值给了拷贝对象,而深拷贝是将堆中保存的数据重新产生一个堆中地址保存到栈中。

总结：浅拷贝会影响被拷贝对象的引用类型数据,但是深拷贝不会。

3.赋值与浅拷贝的区别

• 赋值:当将一个对象赋值给另一个对象,赋的只是对象在栈中的地址,不是堆中的数据,两个变量共用一个对象,无论哪个对象发生改变都会对另一个产生影响(简单讲就是共用一个对象)

• • 浅拷贝:浅拷贝会创建一个新对象,这个对象中有值类型 和 引用类型,对于值类型,会复制一份栈中的数据保存到新对象中,因此修改另一个对象中的值类型不会影响原始数据,对于引用类型会产生影响
  • 深拷贝:深拷贝会将堆中数据重新保存一份,是两个完全无关系的对象,所以无论修改那个对象的哪个值都不会产生影响

4.如何实现浅拷贝

4.1 Object.assign()

• 该方法可以把任意多个原对象自身可枚举属性拷贝给目标对象,并返回目标对象
• 如果被拷贝的对象只有值类型,那么进行的就是深拷贝

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

• 如果对象中有引用类型就是浅拷贝,会将其中引用类型的内存地址指向附加给新对象

var obj = { a: {a: "kobe", b: 39} };
var initalObj = Object.assign({}, obj);
initalObj.a.a = "wade";
console.log(obj.a.a); // wade

4.2 Array.prototype.concat()

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

4.3 Array.prototype.slice()

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

4.4 关于 concat方法 和 slice方法 的补充说明

• 两者都不会直接修改原数组,都是浅拷贝了原数组生成了一个新数组

• • 1.如果被拷贝的元素是个对象引用,那么两个方法会将对象引用到新数组中,两个对象引用的是同一个对象,对其中一个对象进行修改就会影响另一个对象
  • 2.如果被拷贝数组中的是值类型,两个方法会将这些值保存到新数组中,修改一个数组中的值另一个数组不会受到影响

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

5.如何实现深拷贝

5.1 JSON.parse(JSON.stringify)

• 使用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象,这样转换过去,转换回来,新对线就产生了,会在栈中开辟新的栈,堆中开辟新的堆.
• 但是使用JSON的方法不能处理函数,因为JSON的方法是将对象转换为字符串,不能接受函数.

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

5.2 手写递归的方法

• 遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝。(代码参考)

// 定义检测数据类型的功能函数
   function checkedType(target) {
     return Object.prototype.toString.call(target).slice(8, -1)
   }
   // 实现深度克隆---对象/数组
   function clone(target) {
     // 判断拷贝的数据类型
     // 初始化变量result 成为最终克隆的数据
     let result, targetType = checkedType(target)
     if (targetType === 'object') {
       result = {}
     } else if (targetType === 'Array') {
       result = []
     } else {
       return target
     }
     // 遍历目标数据
     for (let i in target) {
       // 获取遍历数据结构的每一项值。
       let value = target[i]
       // 判断目标结构里的每一值是否存在对象/数组
       if (checkedType(value) === 'Object' ||
         checkedType(value) === 'Array') { 
          // 对象/数组里嵌套了对象/数组
          // 继续遍历获取到value值
         result[i] = clone(value)
       } else { 
         // 获取到value值是基本的数据类型或者是函数。
         result[i] = value;
       }
     }
     return result
   }

5.3 函数库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