深入浅出聊一聊JavaScript中的深浅拷贝

前端

2023-11-12 22:25:12

JavaScript中的数据类型：

基础数据类型: 数值、字符串、布尔值、undefined、null。
引用数据类型: 对象、数组、函数。

深浅拷贝的实现方法：

深拷贝: 使用递归算法复制源对象的所有属性和嵌套对象。
浅拷贝: 使用Object.assign()方法或扩展运算符(...)复制源对象的顶层属性。

深浅拷贝的应用场景：

深拷贝: 当需要修改对象的嵌套属性时，应该使用深拷贝来复制对象，以确保修改不会影响到原对象。
浅拷贝: 当只需要复制对象的顶层属性时，可以使用浅拷贝来复制对象，以提高性能。

深浅拷贝的比较：

特性	深拷贝	浅拷贝
复制方式	递归算法	Object.assign()方法或扩展运算符(...)
复制内容	源对象的整个结构，包括所有嵌套的对象和数组	源对象的顶层结构，嵌套的对象和数组不会被复制
性能	较慢	较快
应用场景	需要修改对象的嵌套属性时	只需要复制对象的顶层属性时

JavaScript中的深浅拷贝是一个重要的概念，理解深浅拷贝的原理和应用场景可以帮助我们更有效地管理和操作对象。

以下是一些深浅拷贝的具体示例：

// 浅拷贝
const obj1 = { name: 'John', age: 30, address: { city: 'New York' } };
const obj2 = Object.assign({}, obj1);

// 修改obj2的address属性
obj2.address.city = 'Los Angeles';

// obj1的address属性也随之改变
console.log(obj1.address.city); // Los Angeles

// 深拷贝
const obj1 = { name: 'John', age: 30, address: { city: 'New York' } };
const obj2 = JSON.parse(JSON.stringify(obj1));

// 修改obj2的address属性
obj2.address.city = 'Los Angeles';

// obj1的address属性保持不变
console.log(obj1.address.city); // New York