小白自学:js中的深拷贝和浅拷贝

深入理解 JavaScript 中的浅拷贝和深拷贝

在 JavaScript 中,拷贝对象是一项常见的操作。然而,拷贝并不总是简单的复制操作。在 JavaScript 中,我们通常区分两种类型的拷贝:浅拷贝和深拷贝。本文将深入探讨 JavaScript 中的浅拷贝和深拷贝,帮助读者更好地理解它们的含义、区别以及如何实现。

1. 浅拷贝(Shallow Copy)

浅拷贝是指创建一个新的对象,新对象中包含了原始对象的属性值。然而,如果属性值本身是对象,那么浅拷贝只会复制其引用,而不会复制其内部的值。这意味着修改新对象中的属性值可能会影响原始对象中的属性值。

示例

const originalObj = {
    name: 'Alice',
    age: 30,
    hobbies: ['reading', 'traveling']
};

const shallowCopyObj = Object.assign({}, originalObj);

shallowCopyObj.name = 'Bob';
shallowCopyObj.hobbies.push('coding');

console.log(originalObj); // { name: 'Alice', age: 30, hobbies: ['reading', 'traveling', 'coding'] }
console.log(shallowCopyObj); // { name: 'Bob', age: 30, hobbies: ['reading', 'traveling', 'coding'] }

在这个例子中,我们使用 Object.assign() 方法进行浅拷贝。尽管 shallowCopyObj 中的 name 属性值发生了变化,但原始对象 originalObj 中的 name 属性值并未受到影响。然而,由于 hobbies 属性值是一个数组,浅拷贝只复制了其引用,因此修改 shallowCopyObj 中的 hobbies 属性值也会影响到原始对象中的 hobbies 属性值。

2. 深拷贝(Deep Copy)

深拷贝是指创建一个新的对象,新对象中包含了原始对象的属性值。不仅如此,如果属性值本身是对象,深拷贝会递归地复制其内部的值,而不仅仅是复制其引用。这意味着修改新对象中的属性值不会影响原始对象中的属性值。

示例

const originalObj = {
    name: 'Alice',
    age: 30,
    hobbies: ['reading', 'traveling']
};

const deepCopyObj = JSON.parse(JSON.stringify(originalObj));

deepCopyObj.name = 'Bob';
deepCopyObj.hobbies.push('coding');

console.log(originalObj); // { name: 'Alice', age: 30, hobbies: ['reading', 'traveling'] }
console.log(deepCopyObj); // { name: 'Bob', age: 30, hobbies: ['reading', 'traveling', 'coding'] }

在这个例子中,我们使用 JSON.stringify() 方法将原始对象转换为 JSON 字符串,然后再使用 JSON.parse() 方法将 JSON 字符串转换回对象,从而实现深拷贝。由于 JSON.stringify() 方法会递归地复制对象的属性值,因此 deepCopyObj 是原始对象的深拷贝,修改它的属性值不会影响原始对象。

3. 总结

浅拷贝和深拷贝是 JavaScript 中常见的两种拷贝方式,它们之间的区别在于对于属性值为对象的处理方式不同。浅拷贝只复制对象的引用,而深拷贝会递归地复制对象的内部值。在实际开发中,根据需求选择合适的拷贝方式非常重要。

原文链接:https://juejin.cn/post/7343863800146100287 作者:丁丶知了

(0)
上一篇 2024年3月9日 上午10:32
下一篇 2024年3月9日 上午10:43

相关推荐

发表评论

登录后才能评论