js怎么复制复杂类型

在JavaScript中，复制复杂类型主要有以下几种方法：浅拷贝、深拷贝、使用第三方库。 其中，最常用的方法是使用Object.assign进行浅拷贝、使用JSON.parse(JSON.stringify())进行深拷贝。浅拷贝只复制对象的引用，深拷贝则创建一个新的对象，完全独立于原始对象。

一、浅拷贝

使用`Object.assign()`

Object.assign()是浅拷贝的一种常见方法，它将所有可枚举的属性从一个或多个源对象复制到目标对象，并返回目标对象。

const originalObject = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, originalObject);

尽管Object.assign()复制了对象的属性，但它只复制了对象的第一层。如果对象的属性是另一个对象，那么它只复制该对象的引用。

使用展开运算符（Spread Operator）

另一种浅拷贝的方法是使用展开运算符，它在语法上更简洁。

const shallowCopy = { ...originalObject };

二、深拷贝

使用`JSON.parse(JSON.stringify())`

深拷贝最简单的方法之一是使用JSON.parse(JSON.stringify())，这种方法对于大多数对象类型都适用，但对函数、undefined、Symbol等无法序列化的值则不适用。

const deepCopy = JSON.parse(JSON.stringify(originalObject));

使用递归

对于更复杂的对象或包含不可序列化值的对象，可以使用递归来实现深拷贝。

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  if (Array.isArray(obj)) {
    const arrCopy = [];
    for (let i = 0; i < obj.length; i++) {
      arrCopy[i] = deepCopy(obj[i]);
    }
    return arrCopy;
  }
  const objCopy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      objCopy[key] = deepCopy(obj[key]);
    }
  }
  return objCopy;
}
const originalObject = { a: 1, b: { c: 2 } };
const deepCopy = deepCopy(originalObject);

三、使用第三方库

有些第三方库提供了更加健壮和高效的深拷贝方法，如lodash的cloneDeep方法。

Lodash

Lodash 是一个非常流行的 JavaScript 工具库，它提供了许多实用的函数，其中就包括深拷贝函数 cloneDeep。

首先，安装 lodash：

npm install lodash

然后在代码中使用：

const _ = require('lodash');
const originalObject = { a: 1, b: { c: 2 } };
const deepCopy = _.cloneDeep(originalObject);

四、复杂类型的拷贝实践

1、拷贝嵌套对象

嵌套对象是指对象的属性也是对象。这种情况下，如果你只进行浅拷贝，嵌套对象的引用会被复制，而不是对象本身。

const originalObject = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: 3
    }
  }
};
// 浅拷贝
const shallowCopy = { ...originalObject };
shallowCopy.b.c = 4;
console.log(originalObject.b.c); // 输出 4，说明浅拷贝没有真正复制嵌套对象
// 深拷贝
const deepCopy = JSON.parse(JSON.stringify(originalObject));
deepCopy.b.c = 4;
console.log(originalObject.b.c); // 输出 2，说明深拷贝真正复制了嵌套对象

2、拷贝数组

数组也是一种复杂类型，深拷贝数组的方法与对象类似。

const originalArray = [1, [2, 3], [4, 5, [6, 7]]];
// 浅拷贝
const shallowCopy = [...originalArray];
shallowCopy[1][0] = 9;
console.log(originalArray[1][0]); // 输出 9，说明浅拷贝没有真正复制嵌套数组
// 深拷贝
const deepCopy = JSON.parse(JSON.stringify(originalArray));
deepCopy[1][0] = 9;
console.log(originalArray[1][0]); // 输出 2，说明深拷贝真正复制了嵌套数组

3、拷贝函数

函数在 JavaScript 中是一等公民，它们也是对象的一种类型。对于需要拷贝包含函数的对象，可以使用递归的方法。

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  if (Array.isArray(obj)) {
    const arrCopy = [];
    for (let i = 0; i < obj.length; i++) {
      arrCopy[i] = deepCopy(obj[i]);
    }
    return arrCopy;
  }
  const objCopy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      objCopy[key] = deepCopy(obj[key]);
    }
  }
  return objCopy;
}
const originalObject = {
  a: 1,
  b: {
    c: 2,
    d: function() {
      console.log('Hello');
    }
  }
};
const deepCopy = deepCopy(originalObject);
deepCopy.b.d(); // 输出 'Hello'

4、拷贝日期和正则表达式

日期和正则表达式是 JavaScript 中的特殊对象类型，直接复制它们的引用可能会导致问题。可以通过创建新的实例来深拷贝它们。

const originalDate = new Date();
const originalRegExp = /abc/;
const copiedDate = new Date(originalDate.getTime());
const copiedRegExp = new RegExp(originalRegExp);
console.log(originalDate === copiedDate); // 输出 false
console.log(originalRegExp === copiedRegExp); // 输出 false

五、实际应用中的复杂类型拷贝

在实际应用中，通常需要处理更复杂的数据结构，例如嵌套的对象数组、含有函数的对象等。

1、复制含有函数和复杂嵌套结构的对象

假设我们有一个复杂的对象，包含嵌套对象、数组、函数等。

const complexObject = {
  a: 1,
  b: [2, 3, { d: 4 }],
  c: {
    e: 5,
    f: function() {
      console.log('Hello World');
    },
    g: new Date(),
    h: /abc/
  }
};
function deepCopyComplex(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  if (Array.isArray(obj)) {
    return obj.map(deepCopyComplex);
  }
  if (obj instanceof Date) {
    return new Date(obj);
  }
  if (obj instanceof RegExp) {
    return new RegExp(obj);
  }
  const objCopy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      objCopy[key] = deepCopyComplex(obj[key]);
    }
  }
  return objCopy;
}
const copiedComplexObject = deepCopyComplex(complexObject);
console.log(copiedComplexObject);

2、在团队项目中的应用

在团队项目中，尤其是在使用项目团队管理系统如研发项目管理系统PingCode和通用项目协作软件Worktile时，数据的准确性和一致性至关重要。深拷贝可以确保数据在不同模块之间传递时不会被意外修改。

例如，在处理用户配置数据时，可以使用深拷贝来确保每个模块都有自己独立的配置副本，不会相互影响。

const userConfig = {
  theme: 'dark',
  layout: 'grid',
  preferences: {
    notifications: true,
    privacy: {
      tracking: false
    }
  }
};
// 在不同模块中使用深拷贝
const moduleAConfig = deepCopyComplex(userConfig);
const moduleBConfig = deepCopyComplex(userConfig);
// 修改 moduleAConfig 不会影响 userConfig 和 moduleBConfig
moduleAConfig.preferences.privacy.tracking = true;
console.log(userConfig.preferences.privacy.tracking); // 输出 false
console.log(moduleBConfig.preferences.privacy.tracking); // 输出 false

结论

在JavaScript中，复制复杂类型的对象是一个常见的需求，尤其是在处理嵌套结构、数组、函数等时。选择合适的拷贝方法（如浅拷贝、深拷贝）可以确保数据的一致性和准确性。对于复杂的项目，使用第三方库如Lodash，可以提供更高效和可靠的解决方案。此外，在团队项目中，使用研发项目管理系统PingCode和通用项目协作软件Worktile，可以帮助更好地管理和协作数据。