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 库,它执行深拷贝操作。

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

相关推荐
nvd112 小时前
企业级 LLM 实战:在受限环境中基于 Copilot API 构建 ReAct MCP Agent
前端·copilot
Dragon Wu2 小时前
TailWindCss cva+cn管理样式
前端·css
烤麻辣烫2 小时前
Web开发概述
前端·javascript·css·vue.js·html
Front思2 小时前
Vue3仿美团实现骑手路线规划
开发语言·前端·javascript
徐同保2 小时前
Nano Banana AI 绘画创作前端代码(使用claude code编写)
前端
Ulyanov2 小时前
PyVista与Tkinter桌面级3D可视化应用实战
开发语言·前端·python·3d·信息可视化·tkinter·gui开发
计算机程序设计小李同学2 小时前
基于Web和Android的漫画阅读平台
java·前端·vue.js·spring boot·后端·uniapp
干前端2 小时前
Message组件和Vue3 进阶:手动挂载组件与 Diff 算法深度解析
javascript·vue.js·算法
lkbhua莱克瓦242 小时前
HTML与CSS核心概念详解
前端·笔记·html·javaweb
沛沛老爹2 小时前
从Web到AI:Agent Skills CI/CD流水线集成实战指南
java·前端·人工智能·ci/cd·架构·llama·rag