JS中的深拷贝与浅拷贝

知乎：js中的深拷贝和浅拷贝？

掘金: js 深拷贝 vs 浅拷贝

本文思维导图：

前言

深拷贝与浅拷贝只针对 Object, Array 这样的复杂对象的。只有对象里嵌套对象的情况下，才会根据需求讨论，我们需要深拷贝还是浅拷贝。

深拷贝和浅拷贝的主要区别就是其在内存中的存储类型不同。

栈（stack）为自动分配的内存空间，它由系统自动释放；
而堆（heap）则是动态分配的内存，大小不定也不会自动释放。

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

简单来说，浅复制只复制一层对象的属性，并不包括对象里面的为引用类型的数据。而深复制则递归复制了所有层级。

示意图如下：

JS中的数据类型

基本数据类型

undefined，boolean，number，string，null

它们有如下特点：

• 基本数据类型存放在栈中
• 基本数据类型值不可变

javascript中的原始值（undefined、null、布尔值、数字和字符串）与对象（包括数组和函数）有着根本区别。原始值是不可更改的：任何方法都无法更改（或“突变”）一个原始值。对数字和布尔值来说显然如此 —— 改变数字的值本身就说不通，而对字符串来说就不那么明显了，因为字符串看起来像由字符组成的数组，我们期望可以通过指定索引来假改字符串中的字符。实际上，javascript 是禁止这样做的。字符串中所有的方法看上去返回了一个修改后的字符串，实际上返回的是一个新的字符串值。

• 基本类型的比较是值的比较 (==比较时会进行类型转换)

引用类型

• 引用类型存放在堆中

引用类型（object）是存放在堆内存中的，变量 实际上是一个存放在栈内存的 指针，这个指针指向 堆内存中的地址。每个空间大小不一样，要根据情况开进行特定的分配。

• 引用类型值可变
• 引用类型的比较是引用的比较

var a = [1,2,3];
var b = [1,2,3];
console.log(a === b); // false

传值与传址

在我们进行赋值操作的时候，基本数据类型的赋值（=）是在内存中新开辟一段栈内存，然后再把再将值赋值到新的栈中。基本类型的赋值的两个变量是两个独立相互不影响的变量。

但是 引用类型的赋值是传址。只是改变指针的指向，也就是说引用类型的赋值是对象保存在栈中的地址的赋值，这样的话两个变量就指向同一个对象，因此两者之间操作互相有影响

var a = {}; // a保存了一个空对象的实例
var b = a;  // a和b都指向了这个空对象

a.name = 'jozo';
console.log(a.name); // 'jozo'
console.log(b.name); // 'jozo'

浅拷贝

1.函数实现

// 浅拷贝函数实现
/**
 *
 * @param {object} source
 * @returns targetObj
 */
function shallowCopy(source) {
  if (!source || typeof source !== 'object') {
    throw new Error('error arguments');
  }
  let targetObj = source.constructor === Array ? [] : {};
  for (const key in source) {
    if (source.hasOwnProperty(key)) {
      targetObj[key] = source[key];
    }
  }
  return targetObj;
}

2.Object.assign

Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。

let a = {
  age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1

3.展开运算符 「…」

let a = {
  age: 1
}
let b = { ...a }
a.age = 2
console.log(b.age) // 1

深拷贝

1. 通过JSON解析解决

let a = {
  age: 1,
  jobs: {
    first: 'FE'
  }
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE 没被改到

局限性-会忽略如下情况

• undefined
• Function
• Symbol
• 不能解决循环引用的对象

2.函数实现

// 深拷贝
function deepClone(obj) {
  // 判断是否为引用类型
  function isObject(o) {
    return (typeof o === 'object' || typeof o === 'function' && o !== null);
  }
  if(!isObject(obj)) {
    throw new Error('error arguments')
  }

  let isArray = Array.isArray(obj);
  // 先潜复制一遍
  let newObj = isArray ? [...obj] : {...obj};
  // Reflect.ownKeys 获取对象所有 key 包括 Symbol
  Reflect.ownKeys(newObj).forEach(key => {
    // 判断value 是否为引用类型 => 递归调用
    newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key];
  });
  return newObj;
}

示例：

let obj = {
  a: [1, 2, 3],
  b: {
    c: 2,
    d: 3
  }
}
let newObj = deepClone(obj)
newObj.b.c = 1
console.log(obj.b.c) // 2

3. lodash 的深拷贝函数