js数组对象深拷贝，有了它，你可以轻松玩转引用传递！

前端

2023-09-29 10:11:55

js数组对象深拷贝的必要性

在JavaScript中，数组和对象都是引用类型，这意味着当您将它们赋值给另一个变量时，实际上只是将对它们的引用赋值给了该变量。因此，对该变量所做的任何更改都会反映在原始数组或对象上。

这在某些情况下是理想的，例如当您希望在多个组件之间共享数据时。但是，在其他情况下，您可能希望创建一个数组或对象的副本，以便您可以对其进行更改，而不会影响原始数据。

例如，如果您有一个包含用户数据的数组，并且您想对该数组进行排序或过滤，那么您可能希望先创建一个该数组的副本，以便您可以对副本进行更改，而不会影响原始数据。

js数组对象深拷贝的方法

有很多方法可以创建js数组对象深拷贝，其中最常见的方法包括：

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

const originalArray = [{name: "John", age: 30}, {name: "Jane", age: 25}];

const deepCopy = JSON.parse(JSON.stringify(originalArray));

deepCopy[0].name = "Mary";

console.log(originalArray); // [{name: "John", age: 30}, {name: "Jane", age: 25}]
console.log(deepCopy); // [{name: "Mary", age: 30}, {name: "Jane", age: 25}]

使用Array.prototype.slice()方法

const originalArray = [{name: "John", age: 30}, {name: "Jane", age: 25}];

const deepCopy = originalArray.slice();

deepCopy[0].name = "Mary";

console.log(originalArray); // [{name: "John", age: 30}, {name: "Jane", age: 25}]
console.log(deepCopy); // [{name: "Mary", age: 30}, {name: "Jane", age: 25}]

使用Array.prototype.map()方法

const originalArray = [{name: "John", age: 30}, {name: "Jane", age: 25}];

const deepCopy = originalArray.map(item => ({...item}));

deepCopy[0].name = "Mary";

console.log(originalArray); // [{name: "John", age: 30}, {name: "Jane", age: 25}]
console.log(deepCopy); // [{name: "Mary", age: 30}, {name: "Jane", age: 25}]

使用lodash的cloneDeep()方法

const originalArray = [{name: "John", age: 30}, {name: "Jane", age: 25}];

const deepCopy = _.cloneDeep(originalArray);

deepCopy[0].name = "Mary";

console.log(originalArray); // [{name: "John", age: 30}, {name: "Jane", age: 25}]
console.log(deepCopy); // [{name: "Mary", age: 30}, {name: "Jane", age: 25}]