正文

掌握JavaScript深拷贝的5种方法，轻松应对复杂对象复制

/0 浏览量
0405

在JavaScript中，当我们需要复制一个对象时，通常会使用Object.assign()或者直接赋值操作。然而，这两种方法只能实现浅拷贝，对于包含嵌套对象的复杂对象来说，浅拷贝会导致复制后的对象与原对象之间存在引用关系，这可能会引发一些不可预见的问题。因此，掌握深拷贝的方法对于处理复杂对象复制至关重要。

以下我将详细介绍五种常用的JavaScript深拷贝方法，帮助你轻松应对复杂对象的复制问题。

方法一：JSON.parse()和JSON.stringify()

这是最简单也是最直接的方法。通过JSON.stringify()可以将对象转换为JSON字符串，然后再通过JSON.parse()将JSON字符串转换回对象。这种方法可以处理大部分基本数据类型，包括数组、对象等。

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

// 示例
const obj = {
  num: 0,
  str: '',
  bool: true,
  nul: null,
  und: undefined,
  obj: { key: 'value' },
  arr: [1, 2, 3],
  fun: function() { console.log('hello'); }
};

const cloneObj = deepClone(obj);
console.log(cloneObj); // { num: 0, str: '', bool: true, nul: null, und: undefined, obj: { key: 'value' }, arr: [1, 2, 3], fun: [Function: fun] }

注意：这种方法无法复制函数、undefined、Symbol等特殊值，并且会忽略对象中存在的循环引用。

方法二：递归拷贝

递归拷贝是一种通过遍历对象的所有属性，并将属性值递归地复制到新对象中的方法。

function deepClone(obj) {
  let cloneObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key];
    }
  }
  return cloneObj;
}

// 示例
const cloneObj = deepClone(obj);
console.log(cloneObj); // { num: 0, str: '', bool: true, nul: null, und: undefined, obj: { key: 'value' }, arr: [1, 2, 3], fun: [Function: fun] }

这种方法可以处理大部分数据类型，包括函数和循环引用，但是递归深度太大时可能会导致栈溢出。

方法三：使用第三方库

在许多情况下，我们可以使用第三方库如lodash的_.cloneDeep()函数来实现深拷贝。

const _ = require('lodash');

function deepClone(obj) {
  return _.cloneDeep(obj);
}

// 示例
const cloneObj = deepClone(obj);
console.log(cloneObj); // { num: 0, str: '', bool: true, nul: null, und: undefined, obj: { key: 'value' }, arr: [1, 2, 3], fun: [Function: fun] }

这种方法可以处理大多数数据类型，包括函数、循环引用等，但是会增加项目的依赖。

方法四：使用Symbol作为属性名

对于无法通过JSON.parse()和JSON.stringify()复制的特殊值，我们可以使用Symbol作为属性名来实现深拷贝。

function deepClone(obj, hash = new WeakMap()) {
  let cloneObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === 'object' && obj[key] !== null) {
        if (hash.has(obj[key])) {
          cloneObj[key] = hash.get(obj[key]);
        } else {
          hash.set(obj[key], cloneObj[key] = deepClone(obj[key], hash));
        }
      } else {
        cloneObj[key] = obj[key];
      }
    }
  }
  return cloneObj;
}

// 示例
const cloneObj = deepClone(obj);
console.log(cloneObj); // { num: 0, str: '', bool: true, nul: null, und: undefined, obj: { key: 'value' }, arr: [1, 2, 3], fun: [Function: fun] }

这种方法可以处理函数、undefined、Symbol等特殊值，并且可以处理循环引用。

方法五：使用structuredClone

ES2020 引入了 structuredClone 函数，用于创建一个结构的深拷贝，类似于 JSON.parse(JSON.stringify(obj))，但是它不会忽略 undefined，也不会将函数、Symbol、Map 和 Set 对象转换为字符串，而且不会丢失引用类型。

function deepClone(obj) {
  return structuredClone(obj);
}

// 示例
const cloneObj = deepClone(obj);
console.log(cloneObj); // { num: 0, str: '', bool: true, nul: null, und: undefined, obj: { key: 'value' }, arr: [1, 2, 3], fun: [Function: fun] }

这种方法可以处理大多数数据类型，包括函数、循环引用等，并且是原生支持。

总结

以上就是五种常用的JavaScript深拷贝方法。在实际应用中，我们可以根据具体的需求和场景选择合适的方法。希望这篇文章能帮助你更好地理解和掌握JavaScript深拷贝。

-- 展开阅读全文 --