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

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

相关推荐
竹林81838 分钟前
用 wagmi v2 + viem 监听链上事件,我踩了三天坑终于搞懂了实时日志与历史补全
javascript
Momo__42 分钟前
VueUse createReusableTemplate —— 单文件组件内的模板复用神器
前端·vue.js
只一1 小时前
😭从回调地狱到 async/await:一文打通 Ajax 与 JS 异步编程
javascript
程序员小富1 小时前
我开源了一个开发者专属的智能 JSON 工具,得到了媳妇高度认可
前端·vue.js·后端
小小小小宇1 小时前
程序员如何给 LLM 装工具以及看懂推理过程
前端
写代码的皮筏艇1 小时前
React中的forwardRef
前端·react.js·面试
Flynt1 小时前
装上TypeScript 7.0 RC之后,最让我意外不是10倍提速
typescript·visual studio code
疯狂SQL1 小时前
手写高性能在线 JSON 工具|Web Worker 工程化打包 + 语法自动修复 + 多语言代码生成实战
typescript·json·next.js·web worker·前端性能优化·esbuild·源码实战
槑有老呆1 小时前
花三个月工资请了个 AI 程序员,结果它连青岛啤酒股价都查不了
前端
风骏时光牛马1 小时前
Verilog开发常见问题汇总解析
前端