【JavaScript 】数据深拷贝

1、使用JSON.parse() 和 JSON.stringify()实现数据深拷贝

这是一种常见的实现深拷贝的方法，但是它有一些限制，比如它不能处理函数和循环引用，并且会将Date对象转换为字符串。

function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}

2、使用递归函数

如果需要处理更复杂的数据结构或避免上述问题，可以使用递归函数来实现深拷贝。这种方法可以处理循环引用，但实现起来更复杂。创建util.js文件并拷贝如下代码，在使用的地方引用方法deepClone(YOU_DEEP_DATA)

/**
 * 判断数据格式
 */
export const getObjType = obj => {
  var toString = Object.prototype.toString
  var map = {
    '[object Boolean]': 'boolean',
    '[object Number]': 'number',
    '[object String]': 'string',
    '[object Function]': 'function',
    '[object Array]': 'array',
    '[object Date]': 'date',
    '[object RegExp]': 'regExp',
    '[object Undefined]': 'undefined',
    '[object Null]': 'null',
    '[object Object]': 'object'
  }
  if (obj instanceof Element) {
    return 'element'
  }
  return map[toString.call(obj)]
}
/**
 * 判断数据格式
 */
export const deepClone = data => {
  // 获取数据类型
  var type = getObjType(data)
  var obj
  if (type === 'array') {
    obj = []
  } else if (type === 'object') {
    obj = {}
  } else {
    // 不再具有下一层次
    return data
  }
  // 数组格式需要使用递归方法进行拷贝
  if (type === 'array') {
    for (var i = 0, len = data.length; i < len; i++) {
      obj.push(deepClone(data[i]))
    }
  // 对象格式需要使用递归方法进行拷贝
  } else if (type === 'object') {
    for (var key in data) {
      obj[key] = deepClone(data[key])
    }
  }
  return obj
}

备注：

Object.prototype.toString 是 JavaScript 中的一个内置方法，用于返回表示指定对象的字符串。这个方法在原型链的最顶端定义，因此所有对象都可以访问到它。

该方法的返回值是一个表示对象类型和值的字符串，通常格式为 [object Type]，其中 Type 是对象的具体类型。例如，对于字符串、数组、函数、日期等对象，toString 方法返回的字符串会有所不同。

 

3、使用lodash库的_.cloneDeep()

lodash是一个功能强大的JavaScript实用程序库，其中包含了深拷贝的功能。

const _ = require('lodash'); // 或者 import _ from 'lodash' 如果使用ES6模块
let copy = _.cloneDeep(original);

4、使用结构赋值和扩展运算符

对于简单的对象和数组，可以使用ES6的解构赋值和扩展运算符来进行浅拷贝，然后递归调用以实现深拷贝。

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) return obj;
  let copy = Array.isArray(obj) ? [] : {};
  for (let key of Object.keys(obj)) {
    copy[key] = deepCopy(obj[key]);
  }
  return copy;
}

每种方法都有其适用场景和限制，选择哪种方法取决于具体的需求和数据结构。如果数据结构复杂或者有特殊需求，推荐使用像lodash这样的成熟库。