前端面试之js 中常见的深拷贝的方法

前端小伙伴们在面试的时候，经常会遇到问JS深拷贝的知识点，所以特地写这篇博客，也算是给自己积累一些知识点。

目前有5种经常提到的深拷贝的方法：

1、通过 JSON 对象实现深拷贝

this.data = JSON.parse(JSON.stringify(this.vm.$store.state.security.menuArr))

或

function deepClone(data) {
    let _data = JSON.stringify(data),
        dataClone = JSON.parse(_data);
    return dataClone;
};

2、通过jQuery的extend方法实现深拷贝

var array = [1,2,3,4]; var newArray = $.extend(true,[],array);

3、使用递归的方式实现深拷贝

//使用递归的方式实现数组、对象的深拷贝
function _deepClone(source) {
  let target;
  if (typeof source === 'object') {
    target = Array.isArray(source) ? [] : {}
    for (let key in source) {
      if (source.hasOwnProperty(key)) {
        if (typeof source[key] !== 'object') {
          target[key] = source[key]
        } else {
          target[key] = _deepClone(source[key])
        }
      }
    }
  } else {
    target = source
  }
  return target
}

4、Object.assign()拷贝

当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，
但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝。

//针对深拷贝，需要使用其他办法，因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。
let obj1 = { a: 0 , b: { c: 0}}; 
let obj2 = Object.assign({}, obj1); 
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 

obj1.a = 1; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 

obj2.a = 2; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
 
obj2.b.c = 3; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} 
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} 
最后一次赋值的时候，b是值是对象的引用，只要修改任意一个，其他的也会受影响

// Deep Clone （深拷贝）
obj1 = { a: 0 , b: { c: 0}}; 
let obj3 = JSON.parse(JSON.stringify(obj1)); 
obj1.a = 4; 
obj1.b.c = 4; 
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

5、lodash函数库实现深拷贝

多数时候，我会用lodash提供的函数库来调用，毕竟封装过的，健壮性应该还是ok的，哈哈~

lodash很热门的函数库，提供了 lodash.cloneDeep()实现深拷贝

参考文档：
https://www.cnblogs.com/lijuntao/p/13066834.html
https://www.cnblogs.com/sweet-ice/p/10599011.html