正文

掌握JS对象复制：5种方法让你轻松实现深浅拷贝

/0 浏览量
0720

在JavaScript中，对象的复制是一个常见的需求。无论是为了避免原始对象的变化影响到副本，还是为了创建一个全新的对象，掌握如何正确地复制对象都是非常重要的。JavaScript中的对象复制可以分为浅拷贝和深拷贝两种类型。浅拷贝只复制对象的第一层属性，而深拷贝则会递归复制对象的所有层级。下面，我将详细介绍五种常用的方法来实现这两种拷贝。

1. 使用展开运算符（Spread Operator）

ES6 引入的展开运算符可以方便地实现浅拷贝。通过将对象作为展开运算符的一部分，可以创建一个新对象，其属性值与原对象相同。

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

这种方法只能实现浅拷贝，如果对象中包含嵌套对象，那么嵌套对象的属性会被复制引用，而不是复制整个对象。

2. 使用 Object.assign()

Object.assign() 方法可以将所有可枚举的自有属性从第一个对象复制到第二个对象，返回第二个对象。这也是实现浅拷贝的一种方式。

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

同样，这种方法不会复制嵌套对象的属性。

3. 使用 JSON 序列化和反序列化

JSON 提供了序列化和反序列化的方法，可以将对象转换成字符串，然后再将字符串转换回对象。这种方法可以实现深拷贝，但需要注意的是，它不能处理函数、undefined、循环引用等特殊情况。

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

4. 使用递归函数实现深拷贝

可以通过递归函数手动实现深拷贝，这种方法可以处理对象的所有层级，包括嵌套对象和数组。

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  let copy;
  if (Array.isArray(obj)) {
    copy = [];
    for (let i = 0, len = obj.length; i < len; i++) {
      copy[i] = deepCopy(obj[i]);
    }
  } else {
    copy = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        copy[key] = deepCopy(obj[key]);
      }
    }
  }
  return copy;
}

const original = { a: 1, b: { c: 2 } };
const deepCopy = deepCopy(original);

5. 使用第三方库

在项目中，如果需要频繁地进行深拷贝操作，可以使用第三方库如 lodash 中的 _.cloneDeep() 方法。这种方法可以处理更多复杂的情况，包括循环引用、函数等。

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

总结

掌握对象拷贝的方法对于JavaScript开发者来说非常重要。通过上述五种方法，你可以根据实际需求选择合适的拷贝方式。无论是浅拷贝还是深拷贝，正确地复制对象能够帮助你避免潜在的问题，并提高代码的健壮性。

-- 展开阅读全文 --