JS数组、对象深拷贝的必要性与实现方法

前端

2023-10-07 19:14:46

什么是深拷贝？为什么需要进行深拷贝？

在JavaScript中，变量可以存储两种不同类型的数据：基本类型和引用类型。基本类型包括数字、字符串和布尔值，而引用类型包括数组和对象。基本类型的值直接存储在变量中，而引用类型的值存储在内存中的其他位置，变量存储的是对该位置的引用。

当对基本类型变量进行赋值时，新变量将获得该值的一个副本。当对引用类型变量进行赋值时，新变量将获得对该值的引用。这意味着对新变量所做的任何更改都将反映在原始变量上。

在某些情况下，我们需要创建一个与原始变量完全独立的副本。这称为深拷贝。深拷贝将创建一个新变量，其中包含原始变量值的副本。对新变量所做的任何更改都不会反映在原始变量上。

为什么要进行深拷贝？

有几个原因需要进行深拷贝：

防止意外更改。 当您不想意外更改原始变量的值时，可以进行深拷贝。例如，如果您有一个包含敏感数据的对象，并且您想在不更改原始对象的情况下使用该数据，则可以创建一个该对象的深拷贝。
提高性能。 在某些情况下，深拷贝可以提高性能。例如，如果您有一个大型数组或对象，并且您想对该数组或对象进行大量更改，则可以创建一个该数组或对象的深拷贝，然后对深拷贝进行更改。这可以防止您在每次更改时都必须遍历整个数组或对象。

JS数组、对象深拷贝的方法

有几种不同的方法可以对JS数组和对象进行深拷贝。最简单的方法是使用JSON.parse()和JSON.stringify()方法。这两个方法可以将JavaScript对象转换为JSON字符串，然后将JSON字符串解析回JavaScript对象。

const originalArray = [1, 2, 3];
const deepCopyArray = JSON.parse(JSON.stringify(originalArray));

const originalObject = {
  name: 'John Doe',
  age: 30
};
const deepCopyObject = JSON.parse(JSON.stringify(originalObject));

另一种方法是使用Object.assign()方法。Object.assign()方法可以将一个或多个对象的属性复制到另一个对象。

const originalArray = [1, 2, 3];
const deepCopyArray = Object.assign([], originalArray);

const originalObject = {
  name: 'John Doe',
  age: 30
};
const deepCopyObject = Object.assign({}, originalObject);