欢迎各位大佬关注我的公众号

《人生代码》

面试官：老是问我深浅拷贝问题，自己看文章

你如果出去面试，面试官老是会问你一些很神奇，但又不得不去了解的问题，今天这个问题就是其中之一，在工作中，其实我们经常使用对象拷贝，数组拷贝，但是往往会忽略了其中的原理，今天我们就来一探究竟。

看这篇文章的开始，你需要带着两个问题：

• 什么是深浅拷贝
• 如何实现深浅拷贝

什么是深浅拷贝

借助ConardLi大佬以下两张图片，帮我们更好的理解两者的含义：

从上面两张图，我们可以知道：

浅拷贝：比如我们定义一个变量为 obj 的对象，然后我们把他赋值给另一个变量，这个过程就会涉及到浅拷贝问题，另一个变量只是之前变量的一份拷贝，前后两个变量的存储地址是公用的。你可以这么认为，赋值实际上是将地址绑定在一起

这里有两个注意点：

• 引用数据类型：对象，数组，函数等，这些拷贝的是地址

let obj = {name: {code: '人生代码'}}
let copyObj = obj

console.log(copyObj.name === obj.name) // true 说明使用同一个引用地址

• 基本数据类型：数字，字符串，布尔值这些是拷贝值

let str = "Ken"
let str1 = str

console.log(str === str1) // true 但是只是拷贝了值

深拷贝

你可这么理解，就比如我们将衣服放在一个衣柜里面，后面你又买了一件一模一样的衣服，顺便也买了另一个衣柜给这件新衣服放起来，这样这两件衣服不就完全不相干了？

深拷贝其实就是这个意思：

将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

let obj = {name: {code: '人生代码'}}

let copyObj = JSON.parse(JSON.stringify(obj))

console.log(copyObj.name === obj.name) // false 说明引用地址不一样了

赋值和深/浅拷贝的区别

我们这里比较的是关于引用类型：

赋值

赋值其实赋的是该对象，数组的引用地址，也就是说两个对象是联动的，存在关系的，只要其中一个变量改变，另外一个变量就会跟着改变。

let obj = {
  name: '人生代码',
  arr: [1,2,3]
}

let obj1 = obj

obj1.name = "Ken"
obj1.arr = [4,5,6]

console.log(obj1, obj) // obj1:{name: 'Ken', arr: [4,5,6]} obj:{name: 'Ken', arr: [4,5,6]}

浅拷贝

重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会相互影响。

// 浅拷贝
let obj1 = {
    name : '人生代码',
    arr : [1,2,3],
};
let obj2=shallowClone(obj1)
obj2.name = "Ken";
obj2.arr = [5,6,7] ; // 新旧对象还是共享同一块内存
// 这是个浅拷贝的方法
function shallowClone(source) {
    var target = {};
    for(var i in source) {
        if (source.hasOwnProperty(i)) {
            target[i] = source[i];
        }
    }
    return target;
}
console.log('obj1',obj1) 
// obj1 { name: '人生代码', arr: [ 5,6,7 ] }
console.log('obj2',obj2) 
// obj2 { name: 'Ken', arr: [ 5, 6, 7 ] }

深拷贝

从堆内存中开辟一个新的区域存放新对象，对对象中的子对象进行递归拷贝,拷贝前后的两个对象互不影响。

// 深拷贝
let obj1 = {
    name : '人生代码',
    arr : [1,2,3],
};
let obj2=deepClone(obj1)
obj2.name = "Ken";
obj2.arr = [5,6,7] ; // 新对象跟原对象不共享内存
// 这是个深拷贝的方法
function deepClone(obj) {
    if (obj === null) return obj; 
    if (obj instanceof Date) return new Date(obj);
    if (obj instanceof RegExp) return new RegExp(obj);
    if (typeof obj !== "object") return obj;
    let cloneObj = new obj.constructor();
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        // 实现一个递归拷贝
        cloneObj[key] = deepClone(obj[key]);
      }
    }
    return cloneObj;
}
console.log('obj1',obj1) 
// obj1 { name: '人生代码', arr: [ 1, 2, 3 ] }
console.log('obj2',obj2) 
// obj2 { name: 'Ken', arr: [ 5, 6, 7 ] }

浅拷贝实现的方式

Object.assign()

let obj1 = { person: {name: "kobe", age: 41},sports:'basketball' };
let obj2 = Object.assign({}, obj1);
obj2.person.name = "wade";
obj2.sports = 'football'
console.log(obj1); 
// { person: { name: 'wade', age: 41 }, sports: 'basketball' }

函数库lodash的_.clone方法

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

展开运算符...

let obj1 = { name: 'Kobe', address:{x:100,y:100}}
let obj2= {... obj1}
obj1.address.x = 200;
obj1.name = 'wade'
console.log('obj2',obj2) 
// obj2 { name: 'Kobe', address: { x: 200, y: 100 } }

Array.prototype.concat()

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

Array.prototype.slice()

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

深拷贝的实现方式

JSON.parse(JSON.stringify())

函数库lodash的_.cloneDeep方法

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

jQuery.extend()方法

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

手写递归方法

递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝。

有种特殊情况需注意就是对象存在循环引用的情况，即对象的属性直接的引用了自身的情况，解决循环引用问题，我们可以额外开辟一个存储空间，来存储当前对象和拷贝对象的对应关系，当需要拷贝当前对象时，先去存储空间中找，有没有拷贝过这个对象，如果有的话直接返回，如果没有的话继续拷贝，这样就巧妙化解的循环引用的问题。关于这块如有疑惑，请仔细阅读ConardLi大佬如何写出一个惊艳面试官的深拷贝?这篇文章。

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null) return obj; 
  // 如果是null或者undefined我就不进行拷贝操作
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  // 可能是对象或者普通的值  如果是函数的话是不需要深拷贝
  if (typeof obj !== "object") return obj;
  // 是对象的话就要进行深拷贝
  if (hash.get(obj)) return hash.get(obj);
  let cloneObj = new obj.constructor();
  // 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
  hash.set(obj, cloneObj);
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 实现一个递归拷贝
      cloneObj[key] = deepClone(obj[key], hash);
    }
  }
  return cloneObj;
}
let obj = { name: 1, address: { x: 100 } };
obj.o = obj; // 对象存在循环引用的情况
let d = deepClone(obj);
obj.address.x = 200;
console.log(d);

参考文献

一篇文章搞定 JavaScript 深浅拷贝