浅析JS的深拷贝与浅拷贝

前言：

前段时间在做前端项目时，吃了深拷贝与浅拷贝的亏，今天就来整理一下这两者的区别。

一、深拷贝VS浅拷贝

讲到深拷贝与浅拷贝，我们先要弄清楚什么是深拷贝，什么是浅拷贝？

深拷贝：不仅拷贝对象的引用，同时也拷贝对象的实体，也就是它的地址。它将对象的所有层次都拷贝了。这样进行深拷贝后两个对象相互独立，其中一个对象的改变不会影响到另一个对象。

浅拷贝：仅仅拷贝对象的引用，但是不拷贝对象的地址。它只拷贝对象的第一层。这两个对象的引用其实指向同一块地址，相当于一个身份证ID的人有多个外号，而这些外号都是这一个人。这样这些对象之间会相互影响，一个对象改变，其他也跟着改变。

二、场景

基本类型对象赋值：

var a = [1,2,3];
var b = a;
b.push(4); // b中添加了一个4
console.log(a); // a变成了[1,2,3,4]
           

自定义对象：

var obj = {number:125};
var obj2 = obj;
obj2.number = 126; // obj2.number改变了，
console.log(obj.number); // 126，obj的number跟着改变
           

这是因为javascript默认是浅拷贝，拷贝完之后的引用指向同一片地址，改变其中一个值，其他的值也会改变。

显然浅拷贝将不同对象的

三、如何实现深拷贝

思路：赋值只能实现第一层的拷贝，我们递归拷贝对象的每一层。

function deepClone(obj){
  const objClone = Array.isArray(obj) ? [] : {}
  if (obj && typeof obj === 'object') {
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        // 判断ojb子元素是否为对象，如果是，递归复制
        if (obj[key] && typeof obj[key] === 'object') {
          objClone[key] = this.deepClone(obj[key])
        } else {
          // 如果不是，简单复制
          objClone[key] = obj[key]
        }
      }
    }
  }
  return objClone
  }
           

这样即可实现深拷贝。