深拷贝和浅拷贝的方法有哪些？

这是我参与「4月日新计划更文活动」的第26天。

今天跟大家聊一下深拷贝和浅拷贝之间的区别，并且演示一下如何实现一个深拷贝。

我们都知道，在使用前端实现功能的时候，拷贝数据是经常使用到的。

那今天我们来讨论一下浅拷贝和深拷贝常用的一些方法。

浅拷贝

目前比较常用的一些浅拷贝的方法有下面几个。

方法一：Object.assign。

就是将源对象的属性复制到目标对象中，并返回目标对象。

例子如下：

const a = { name: '1111' };
const b = { age: 20 }
const c = Object.assign(a, b)
console.log(a, c);
console.log(a === c);

可以看到a的原始值跟b的值合并，生成了c。同时a的值也变成了合并之后的值。

方法二： 点点点远算符

const a = { name: '1111' };
const b = { age: 20 }
const c = { ...a, ...b };
console.log(c);

C输出的结果是：{ name: '1111', age: 20 }

方法三：Array.slice

const arr = [ 1, 2, 3, 4, 5 ];
const clone = arr.slice()

浅复制一个数组。

方法四：Array.concat

通过原数组跟其他数组合并，形成新的数组。

const arr = [ 1, 2, 3, 4, 5 ];
const arr1 = [ 7, 8 ];
const clone = Array.concat(arr, arr1);

方法五：Object.assign

将对象展开为一个新的对象，从而达到浅拷贝的目的。

const arr = [ 1, 2, 3, 4, 5 ];
const arr1 = [ 7, 8 ];
const clone = Object.assign(arr, arr1);

深拷贝

深拷贝相对于浅拷贝来说，是从对象的拷贝效果的层级来说的。

浅拷贝是只能拷贝单层对象的效果，深拷贝是对于对象的多层对象都能拷贝。而且拷贝之后的新对象与原对象之间互不影响。

但是浅拷贝的对象如果修改的层级比较深，那么两个对象之间就会相互影响。从而达不到数据互相隔离的目的。

以下，是我手写的一个深拷贝的代码。

function deepClone(obj) {
  if(typeof obj !== 'object' || obj === null){
    return obj;
  }
  // 兼容日期
  if (obj instanceof Date) return new Date(obj);
  // 兼容正则
  if (obj instanceof RegExp) return new RegExp(obj);
  // 兼容函数
  if(obj instanceof Function) return new Function(obj);
  // 初始值设置为对象
  var result = {}
  // 如果是数组，初始值是空数组
  if (obj instanceof Array) {
    result = []
  }
  for (var key in obj) {
    // 拷贝自身的属性
    if (obj.hasOwnProperty(key)) {
      result[key] = deepClone(obj[key]);
    }
  }
  return result;
}

需要特别注意的是：这里考虑到了Date类型、RegExp类型和Function类型的深拷贝。以及普通的对象和数组的深拷贝。

拷贝之后的目标对象，与原对象之间深层次的属性修改，也不会互相影响。

以上，就是我今天对于深拷贝和浅拷贝的方法的理解。

看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。