JavaScript 30 天编码挑战：第 14 天——解构对象和数组的本质

前端

2023-09-28 01:10:43

在今天 JavaScript 30 天编码挑战之旅中，我们踏入了对象和数组的神秘领域，深入探究了引用与副本之间的微妙差别。

一、对象和数组：引用与副本

在 JavaScript 中，对象和数组是引用类型，这意味着它们存储的是指向实际数据的指针，而不是实际数据本身。

当您将一个对象或数组分配给一个变量时，该变量将指向该对象的内存位置。如果您对该变量进行修改，则实际上是修改了原始对象。

二、浅拷贝与深拷贝

当您复制一个对象或数组时，您可以创建引用副本或值副本。

引用副本（浅拷贝）： 创建指向原始对象或数组的新内存位置的指针。修改引用副本不会影响原始对象或数组。
值副本（深拷贝）： 创建原始对象或数组的新副本，包括其所有属性和子元素。修改值副本不会影响原始对象或数组。

三、对象的浅拷贝

要对对象进行浅拷贝，您可以使用以下方法：

Object.assign(target, source)
{...source} （ES6 及更高版本）

示例：

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

copyObject.name = 'Jane';

console.log(originalObject); // 输出：{ name: 'John', age: 30 }
console.log(copyObject); // 输出：{ name: 'Jane', age: 30 }

四、对象的深拷贝

要对对象进行深拷贝，您可以使用以下库或方法：

lodash.cloneDeep()
JSON.parse(JSON.stringify(source))

示例：

const originalObject = { name: 'John', age: 30, address: { street: 'Main Street' } };
const copyObject = JSON.parse(JSON.stringify(originalObject));

copyObject.name = 'Jane';
copyObject.address.street = 'Park Avenue';

console.log(originalObject); // 输出：{ name: 'John', age: 30, address: { street: 'Main Street' } }
console.log(copyObject); // 输出：{ name: 'Jane', age: 30, address: { street: 'Park Avenue' } }

五、数组的浅拷贝

要对数组进行浅拷贝，您可以使用以下方法：

Array.prototype.slice()
[...array] （ES6 及更高版本）

示例：

const originalArray = [1, 2, 3];
const copyArray = originalArray.slice();

copyArray[0] = 4;

console.log(originalArray); // 输出： [1, 2, 3]
console.log(copyArray); // 输出：[4, 2, 3]

六、数组的深拷贝

要对数组进行深拷贝，您可以使用以下方法：

Array.prototype.map()
JSON.parse(JSON.stringify(source))

示例：

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

copyArray[0] = 5;
copyArray[2][0] = 6;

console.log(originalArray); // 输出： [1, 2, [3, 4]]
console.log(copyArray); // 输出：[5, 2, [6, 4]]

七、注意事项

了解引用与副本之间的差异至关重要，因为它会影响 JavaScript 应用程序的性能和行为。