JavaScript一句话总结深拷贝和浅拷贝

浅拷贝只是复制了内存指引，深拷贝递归复制原对象所有嵌套对象及其属性。

对于基础数据类型，深浅拷贝没有区别；但是对于引用数据或者嵌套更深的对象，浅拷贝的对象与原对象指向的内存地址还是同一个，当对象改变时，原对象数据也跟着变化；而深拷贝的对象由于与原对象指向的内存地址已经不同，数据改变时不会影响原对象。

了解上述后，相信看下面的内容会感觉很清晰。

数据类型存储

前面已经提到，基本数据类型存储在栈内存中，引用数据保存在堆内存中，引用数据类型的变量指向堆内存中实际对象，存在栈中。

存在浅拷贝的方法

• Object.assign()

  // 原始对象
  let originalObj = {
    name: 'John',
    age: 30,
    hobbies: ['reading', 'swimming']
  };
  ​
  // 浅拷贝
  let shallowCopy = Object.assign({}, originalObj);
  shallowCopy.hobbies.push('running');
  ​
  console.log(originalObj.hobbies); // 输出: ["reading", "swimming", "running"]

• Array.prototype.slice()

  let originalArray = [{name: 'John'}, {name: 'Alice'}, {name: 'Bob'}];
  ​
  // 使用 slice(0, 1) 进行浅拷贝
  let newArray = originalArray.slice(0, 1);
  ​
  // 修改原始数组中的第一个对象的属性
  originalArray[0].name = 'Jane';
  ​
  console.log(originalArray); // 输出: [{name: 'Jane'}, {name: 'Alice'}, {name: 'Bob'}]
  console.log(newArray);      // 输出: [{name: 'Jane'}]

• Array.prototype.concat()

  与slice()类似，不赘述

• 使用拓展运算符实现的复制

  let originalArray = [{name: 'John'}, {name: 'Alice'}, {name: 'Bob'}];
  ​
  // 使用 slice(0, 1) 进行浅拷贝
  let newArray = [...originalArray]
  ​
  // 修改原始数组中的第一个对象的属性
  originalArray[0].name = 'Jane';
  ​
  console.log(originalArray); // 输出: [{name: 'Jane'}, {name: 'Alice'}, {name: 'Bob'}]
  console.log(newArray);      // 输出: [{name: 'Jane'}, {name: 'Alice'}, {name: 'Bob'}]

存在深拷贝的方法

• _.cloneDeep()

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

  lodash是一个库，提供了许多实用函数，在Node.js中，可以使用npm安装，然后const _ = require('lodash');引入loadsh模块

• jQuery.extend() 一般用法，jQuery.extend(target, object1, object2);将多个对象属性合并到target对象中

  const $ = require('jquery');
  const obj1 = {
      a: 1,
      b: { f: { g: 1 } },
      c: [1, 2, 3]
  };
  const obj2 = $.extend(true, {}, obj1);//第一个参数设置为true为深拷贝
  console.log(obj1.b.f === obj2.b.f); // false

• JSON.stringify()

  const obj = {
      name: 'A',
      name1: undefined,
      name3: function() {},
      name4:  Symbol('A')
  }
  const obj2 = JSON.parse(JSON.stringify(obj));
  console.log(obj2); // {name: "A"}，弊端：不支持函数，symbol，undefined等类型的深拷贝

• 手写循环递归

function deepClone(obj, hash = new WeakMap()) { //WeakMap ES6引入的数据结构，弱引用键，只能使用对象作为键，不可迭代
  if (obj === null) return obj; // 如果是null或者undefined我就不进行拷贝操作
  if (obj instanceof Date) return new Date(obj);//Date类型则返回新的Date对象
  if (obj instanceof RegExp) return new RegExp(obj);//RegExp类型则返回新的RegExp对象
  // 可能是对象或者普通的值  如果是函数的话是不需要深拷贝
  if (typeof obj !== "object") return obj;
  // 是对象的话就要进行深拷贝
  if (hash.get(obj)) return hash.get(obj);//如果已经拷贝了则返回
  let cloneObj = new obj.constructor();// 根据原始对象的构造函数创建一个新的对象 cloneObj，这样可以确保复制后的对象具有与原始对象相同的类型。
  hash.set(obj, cloneObj);
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {//只检查对象自身是否具有特定名称的属性（不包括原型链上的属性）
      cloneObj[key] = deepClone(obj[key], hash); // 实现一个递归拷贝
    }
  }
  return cloneObj;
}