js中浅拷贝和深拷贝的区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了js中浅拷贝和深拷贝的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在JavaScript中，浅拷贝（Shallow Copy）和深拷贝（Deep Copy）是两种不同的复制对象的方法，它们之间存在一些重要的区别。

浅拷贝（Shallow Copy）：
浅拷贝只复制对象的顶层属性，如果属性是对象或数组，则复制的是引用，而不是实际的对象。这意味着，如果更改了复制后的对象中的嵌套对象或数组，原始对象的相应属性也会被更改。这是因为浅拷贝只是简单地复制了外层的引用，而没有复制内部的对象或数组。
深拷贝（Deep Copy）：
深拷贝则完全不同，它会递归地复制对象的所有层级属性，包括对象和数组。这意味着，如果复制后的对象中的嵌套对象或数组被更改，原始对象的相应属性不会受到影响。深拷贝创建了一个全新的、独立的副本，包括内部的对象和数组。

以下是一个使用JavaScript实现浅拷贝和深拷贝的示例代码：

javascript// 定义一个复杂的数据结构
let data = {
name: 'John',
age: 25,
address: {
street: '123 Main St',
city: 'Anytown',
state: 'CA',
zip: '12345'
},
phoneNumbers: ['123-456-7890', '987-654-3210']
};

// 浅拷贝示例
let shallowCopy = Object.assign({}, data);
console.log('浅拷贝结果：', shallowCopy);

// 修改原始数据中的嵌套对象或数组
data.address.city = 'New York';
data.phoneNumbers[1] = '555-123-4567';
console.log('原始数据：', data);
console.log('浅拷贝后的数据：', shallowCopy); // 浅拷贝后的数据会受到原始数据的影响

// 深拷贝示例（使用JSON.stringify和JSON.parse方法）
let deepCopy = JSON.parse(JSON.stringify(data));
console.log('深拷贝结果：', deepCopy);

// 修改复制后的数据中的嵌套对象或数组
deepCopy.address.city = 'London';
deepCopy.phoneNumbers[1] = '098-765-4321';
console.log('深拷贝后的数据：', deepCopy); // 深拷贝后的数据不会影响原始数据

在这个示例中，我们首先定义了一个复杂的数据结构data，它包含了一个对象、一个数组以及一个嵌套的对象和数组。然后，我们使用Object.assign()方法实现了浅拷贝，并使用JSON.stringify()和JSON.parse()方法实现了深拷贝。通过比较原始数据和复制后的数据，我们可以看到浅拷贝和深拷贝之间的区别。在浅拷贝中，如果更改了复制后的数据中的嵌套对象或数组，原始数据也会受到影响；而在深拷贝中，更改复制后的数据中的嵌套对象或数组不会影响原始数据。

总结来说，浅拷贝只复制对象的顶层属性，复制的是引用而非实际的对象；而深拷贝会递归地复制对象的所有层级属性，创建一个全新的、独立的副本。在处理复杂的数据结构时，深拷贝更为安全和可靠。文章来源地址https://www.toymoban.com/news/detail-808556.html

到了这里，关于js中浅拷贝和深拷贝的区别的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！