正文

JavaScript对象拷贝技巧：浅拷贝与深拷贝详解及实战案例

/0 浏览量
1021

在JavaScript中，对象拷贝是一个常见且重要的操作。无论是进行数据传递、避免数据污染，还是实现更复杂的编程逻辑，正确地拷贝对象都是至关重要的。JavaScript中的对象拷贝可以分为浅拷贝和深拷贝两种类型。下面，我们将详细探讨这两种拷贝方式，并通过实战案例来加深理解。

浅拷贝

浅拷贝（Shallow Copy）指的是拷贝对象时，只拷贝对象的第一层属性。如果对象属性值是基本数据类型，那么拷贝后的对象和原对象是完全独立的；但如果属性值是引用类型，那么拷贝后的对象和原对象将共享这部分引用。

浅拷贝的实现方法

在JavaScript中，实现浅拷贝的方法有很多，以下是一些常见的方法：

  • 使用展开运算符（…）

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

  • 使用Object.assign()方法

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

  • 使用Array.prototype.slice()方法

    const original = [1, 2, [3, 4]];
const copy = original.slice();

浅拷贝的实战案例

以下是一个使用浅拷贝的实战案例：

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

const copy = { ...original };

console.log(copy); // { a: 1, b: { c: 2 } }

original.b.c = 3;

console.log(copy); // { a: 1, b: { c: 3 } }

在这个案例中，我们对original对象进行了浅拷贝，并将拷贝后的对象赋值给copy。当我们修改original.b.c的值时，copy对象中的b.c也会随之改变，这是因为浅拷贝只拷贝了第一层属性，而b属性是一个引用类型。

深拷贝

深拷贝（Deep Copy）指的是拷贝对象时，递归地拷贝对象的所有层级。这意味着深拷贝后的对象和原对象是完全独立的，无论修改哪个对象，都不会影响到另一个对象。

深拷贝的实现方法

在JavaScript中，实现深拷贝的方法相对较少，以下是一些常见的方法：

  • 使用JSON.parse()和JSON.stringify()方法

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

  • 使用递归函数

    function deepCopy(obj) {
if (typeof obj !== 'object' || obj === null) {
  return obj;
}
const copy = Array.isArray(obj) ? [] : {};
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    copy[key] = deepCopy(obj[key]);
  }
}
return copy;
}

深拷贝的实战案例

以下是一个使用深拷贝的实战案例：

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

const copy = deepCopy(original);

console.log(copy); // { a: 1, b: { c: 2 } }

original.b.c = 3;

console.log(copy); // { a: 1, b: { c: 2 } }

在这个案例中，我们对original对象进行了深拷贝，并将拷贝后的对象赋值给copy。当我们修改original.b.c的值时，copy对象中的b.c不会受到影响，这是因为深拷贝递归地拷贝了对象的所有层级。

总结

浅拷贝和深拷贝是JavaScript中常见的对象拷贝方式。浅拷贝只拷贝对象的第一层属性，而深拷贝则递归地拷贝对象的所有层级。在实际应用中，我们需要根据具体需求选择合适的拷贝方式。希望本文能帮助你更好地理解浅拷贝和深拷贝，并在实际编程中灵活运用。

-- 展开阅读全文 --