TypeScript 中的深拷贝和浅拷贝

简介: TypeScript 中的深拷贝和浅拷贝

什么是深拷贝


在JavaScript/TypeScript中,深拷贝是指创建一个对象的副本,而不仅仅是创建对原始对象的引用。对复制的对象进行的任何更改都不会影响原始对象,反之亦然。


这个副本将完全复制基础对象,包括每个嵌套级别的所有属性和字段,生成新的引用。


为什么需要深拷贝


在Angular中,深拷贝的目的是创建一个与原始对象完全独立的新对象实例。这在您想要更改对象而不影响原始对象时非常有用,例如在处理不应该被修改的数据时。


例如,在Angular中创建一个新组件时,您可能希望将数据传递给该组件,而不修改原始数据。使用深拷贝可以确保在组件内部对数据所做的任何更改都不会影响原始数据。


此外,当您拥有一个庞大而复杂的数据结构时,使用深拷贝可以有助于创建数据的新副本并保持原始数据的完整性。


总的来说,使用深拷贝在Angular中处理数据是一种良好的实践,可以避免由于修改原始数据而导致的意外副作用。


深拷贝 vs 浅拷贝


另一方面,浅拷贝创建了对象的新实例,但只复制嵌套对象的引用,而不是嵌套对象本身。这意味着在复制的对象中对嵌套对象进行的任何更改也会影响原始对象,反之亦然。


当我们谈论Angular深拷贝时,浅拷贝也是不能被忽视的。我将在未来的一篇博客文章中讨论浅拷贝。


深拷贝的一些实现方式


JSON.parse


此方法使用内置的 JSON 对象将对象转换为 JSON 字符串,然后将其解析回对象。 这种方法很简单,适用于大多数基本对象。

let obj2 = JSON.parse(JSON.stringify(obj));

这不适用于具有方法或循环引用的对象。如果您的对象包含:日期、函数、未定义、Infinity、RegExp、Maps、Sets、Blob、FileLists、ImageDatas、稀疏数组、类型化数组或其他复杂类型,也不适合采用这种方法。


lodash.cloneDeep


下面这种方法使用 lodash 库创建对象的深拷贝。


您需要先通过运行 npm install lodash 来安装 lodash 库,然后将其导入到您要使用它的组件或服务中:

import * as _ from 'lodash';
let obj2 = _.cloneDeep(obj);


Object.assign


此方法使用内置的 Object.assign 方法创建具有原始对象属性的新对象。 这种方法也很简单,适用于大多数基本对象,但它只创建一个浅拷贝。

let obj2 = Object.assign({}, obj);


这是嵌套对象的浅拷贝。 所以不要用于大型 JavaScript 对象。

它创建对象的浅表副本,原始对象中的嵌套对象仍然是对原始对象的引用。

几种方法的性能比较


相关文章
|
2天前
|
JavaScript 编译器
TypeScript中类型守卫:缩小类型范围的艺术
【4月更文挑战第23天】TypeScript中的类型守卫是缩小类型范围的关键技术,它帮助我们在运行时确保值的精确类型,提升代码健壮性和可读性。类型守卫包括`typeof`(检查原始类型)、`instanceof`(检查类实例)和自定义类型守卫。通过这些方法,我们可以更好地处理联合类型、泛型和不同数据源,降低运行时错误,提高代码质量。
|
2天前
|
JavaScript 前端开发 安全
Apollo与TypeScript:强大类型检查在前端开发中的应用
Apollo与TypeScript:强大类型检查在前端开发中的应用
|
2天前
|
监控 JavaScript 安全
TypeScript在员工上网行为监控中的类型安全实践
本文演示了如何使用TypeScript在员工上网行为监控系统中实现类型安全。通过定义`Website`类型和`MonitoringData`接口,确保数据准确性和可靠性。示例展示了从监控设备获取数据和提交到网站的函数,强调了类型定义在防止错误、提升代码可维护性方面的作用。
31 7
|
1天前
|
JavaScript 前端开发
TypeScript内置类型一览(Record<string,any>等等)(下)
TypeScript内置类型一览(Record<string,any>等等)
|
1天前
|
JavaScript
TypeScript内置类型一览(Record<string,any>等等)(中)
TypeScript内置类型一览(Record<string,any>等等)
|
1天前
|
JavaScript
TypeScript内置类型一览(Record<string,any>等等)(上)
TypeScript内置类型一览(Record<string,any>等等)
|
2天前
|
JavaScript 安全 前端开发
【TypeScript技术专栏】TypeScript中的类型推断与类型守卫
【4月更文挑战第30天】TypeScript的类型推断与类型守卫是提升代码安全的关键。类型推断自动识别变量类型,减少错误,包括基础、上下文、最佳通用和控制流类型推断。类型守卫则通过`typeof`、`instanceof`及自定义函数在运行时确认变量类型,确保类型安全。两者结合使用,优化开发体验,助力构建健壮应用。
|
2天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript类型系统与接口详解
【4月更文挑战第30天】TypeScript扩展JavaScript,引入静态类型检查以减少错误。其类型系统包括基本类型、数组等,而接口是定义对象结构的机制。接口描述对象外形,不涉及实现,可用于规定对象属性和方法。通过声明、实现接口,以及利用可选、只读属性,接口继承和合并,TypeScript增强了代码的健壮性和维护性。学习和掌握TypeScript的接口对于大型项目开发至关重要。
|
2天前
|
JavaScript 安全 前端开发
【亮剑】TypeScript 由于其强类型的特性,直接为对象动态添加属性可能会遇到一些问题
【4月更文挑战第30天】本文探讨了在 TypeScript 中安全地为对象动态添加属性的方法。基础方法是使用索引签名,允许接受任何属性名但牺牲了部分类型检查。进阶方法是接口扩展,通过声明合并动态添加属性,保持类型安全但可能导致代码重复。高级方法利用 OOP 模式的类继承,确保类型安全但增加代码复杂性。选择哪种方法取决于应用场景、代码复杂性和类型安全性需求。
|
2天前
|
JavaScript 前端开发
TypeScript基础类型
TypeScript基础类型