首页 1 2 3 4 5 6 7

JavaScript 深浅复制

JavaScript 深浅复制 JavaScript是一种非常流行的编程语言，在Web开发中使用广泛。虽然它是一种灵活的编程语言，但这也使它极容易出现数据复制问题，特别是在对象和数组的复制中。JavaScript 中有 “浅复制” 和 “深复制” 的概念，让我们看看它们之间的差异。浅复制简单来说，浅复制只创建对象的一个副本，而不是对象内部的所有数据。在JavaScript中，我们通常使用“Object.assign()”函数来实现浅复制。例如：

let source = { name: 'Tom', age: 24, address: { city: 'LA', state: 'CA' } };
let shallowCopy = Object.assign({}, source); 
console.log(shallowCopy);

在此示例中，我们使用Object.assign()函数将“source”对象浅复制到“shallowCopy”对象中。现在，“shallowCopy”对象与“source”对象具有相同的属性和值。因此，我们可以使用以下代码来判断它们是否相等：

console.log(source === shallowCopy);  // false
console.log(source.name === shallowCopy.name);  // true
console.log(source.address === shallowCopy.address); // true

我们发现，浅复制只复制了第一层对象及其属性，但是“address”属性引用的第二层对象只是引用了原始对象的引用，这就是它们仍然引用相同内存地址的原因。深复制深复制是递归地将一个对象及其子对象完全复制的过程。当我们修改副本对象时，不会影响到原始对象。为了实现深复制，我们可以递归地复制每个对象属性并将其分配给新对象。

function deepCopy(object) {
let result = {};
for(let key in object) {
if(typeof object[key] === 'object') {
result[key] = deepCopy(object[key]); // 使用递归
} else {
result[key] = object[key];
}
}
return result;
}
let source = { name: 'Tom', age: 24, address: { city: 'LA', state: 'CA' } };
let deepCopy = deepCopy(source);
console.log(deepCopy);

在这个例子中，我们创建了一个递归函数，该函数遍历每个属性并为每个属性创建新的对象引用。由于我们使用递归，因此我们可以深入了解更深层次的对象属性。deepCopy()函数将“source”对象深复制到“deepCopy”对象中。现在，“deepCopy”和“source”两个对象在内存中是独立的，我们可以改变一个对象而不影响另一个对象。

source.name = 'Jerry';
source.address.city = 'San Fransisco';
console.log(source);
console.log(deepCopy);

在上面的示例中，我们更改了“source”和“source.address”对象的属性，在浅复制中，“shallowCopy”对象的“address”属性也会更改，但在深复制中，“deepCopy”对象的“address”属性不会更改，因为这是一个完全独立的对象。总结浅复制和深复制是JavaScript中让我们决定复制策略的两个选项。浅复制只复制对象的属性，而不复制它们内部引用的其他子对象，而深复制会完全递归复制对象及其所有子对象。如果我们需要“只是”复制一个对象的几个属性，那么浅复制就足够了，但是如果我们需要完全复制一个对象及其所有子对象，则应使用深复制。

JavaScript 深浅 复制

JavaScript 深浅复制