Typescript中的浅拷贝和深拷贝

在 TypeScript 中,浅拷贝和深拷贝是两种不同的对象复制方式,它们有不同的使用场景和效果。

1、浅拷贝 (Shallow Copy):

浅拷贝是指在复制对象时,只复制对象的第一层属性,而不会递归地复制嵌套对象的内部属性。浅拷贝后的对象和原对象共享同一组内部对象引用。

  • 使用场景:如果你希望两个对象之间共享某些引用类型的属性,可以使用浅拷贝。

  • 性能考虑:当对象的嵌套结构较深,而你只需要复制最外层对象时,可以使用浅拷贝来避免不必要的性能开销。

  • 示例:

css 复制代码
let originalObject = { 
  name: 'John', 
  age: 30, 
  address: { 
    city: 'New York', 
    country: 'USA' 
  } 
};

let shallowCopy = { ...originalObject };

2、深拷贝 (Deep Copy):

深拷贝是指在复制对象时,递归地复制对象的所有嵌套属性,包括内部的引用类型。深拷贝后的对象和原对象不共享任何内部对象引用。

  • 使用场景:当你希望复制对象及其所有嵌套属性,确保原对象和拷贝后的对象完全独立时,可以使用深拷贝。

  • 数据独立性:修改拷贝不影响原对象: 如果你需要修改拷贝后的对象而不影响原对象,深拷贝是必要的。

  • 示例:

css 复制代码
import { cloneDeep } from 'lodash';

let originalObject = { 
  name: 'John', 
  age: 30, 
  address: { 
    city: 'New York', 
    country: 'USA' 
  } 
};

let deepCopy = cloneDeep(originalObject);

在上述示例中,cloneDeep 函数来自于 lodash 库,它执行深拷贝操作。

总体来说,选择浅拷贝还是深拷贝取决于你的需求。如果你只关心对象的第一层属性,且希望性能更好,可以使用浅拷贝。如果你需要复制整个对象树,确保对象及其内部属性的独立性,那么应该使用深拷贝。

相关推荐
EndingCoder7 分钟前
函数基础:参数和返回类型
linux·前端·ubuntu·typescript
码客前端13 分钟前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3
Komorebi゛13 分钟前
【CSS】圆锥渐变流光效果边框样式实现
前端·css
工藤学编程26 分钟前
零基础学AI大模型之CoT思维链和ReAct推理行动
前端·人工智能·react.js
徐同保26 分钟前
上传文件,在前端用 pdf.js 提取 上传的pdf文件中的图片
前端·javascript·pdf
怕浪猫27 分钟前
React从入门到出门第四章 组件通讯与全局状态管理
前端·javascript·react.js
博主花神28 分钟前
【React】扩展知识点
javascript·react.js·ecmascript
欧阳天风34 分钟前
用setTimeout代替setInterval
开发语言·前端·javascript
EndingCoder38 分钟前
箭头函数和 this 绑定
linux·前端·javascript·typescript
郑州光合科技余经理39 分钟前
架构解析:同城本地生活服务o2o平台海外版
大数据·开发语言·前端·人工智能·架构·php·生活