当前位置: 首页 > news >正文

TypeScript:map和set函数

1.map() 函数

  • 定义与用途map() 是数组(Array)的一个高阶方法,用于创建一个新数组,新数组的元素是原数组每个元素调用回调函数后的返回值。它不会改变原数组,而是返回一个新数组。在TypeScript中,由于类型系统的引入,可以显式指定回调函数的参数和返回值类型,确保类型安全。

  • 语法
array.map(callback(currentValue, index, array), thisArg?);
  • callback:一个函数,接受三个参数:

    • currentValue:当前处理的数组元素。

    • index(可选):当前元素的索引。

    • array(可选):原数组本身。

  • thisArg(可选):执行 callback 时使用的 this 值。

  • 类型安全示例:在TS中,可以使用泛型或类型注解来约束类型。例如:

const numbers: number[] = [1, 2, 3];
// 使用箭头函数定义回调,指定输入和输出类型为number
const doubled: number[] = numbers.map((num: number): number => num * 2);
console.log(doubled); // 输出: [2, 4, 6]
  • 特点总结

    • 纯函数:不修改原数组,适合函数式编程。

    • 类型推断:TS能自动推断类型,但显式注解可提高代码可读性和安全性。

    • 效率:遍历整个数组,时间复杂度 O(n)。

2.set 函数(指 Set 数据结构):   

  • 定义与用途Set 是ES6引入的内置对象,在TypeScript中作为泛型类使用,用于存储唯一值(值不重复)的集合。它不是函数,而是一个构造函数(类),其实例提供方法来操作集合。TS通过泛型增强类型安全,如 Set<string> 表示只存储字符串类型。

  • 核心方法与属性

    • 构造函数new Set<T>(iterable?),其中 T 是泛型参数,指定元素类型。

    • 主要方法

      • add(value: T):添加值到集合(如果值已存在,则忽略)。

      • has(value: T):检查值是否存在于集合中,返回布尔值。

      • delete(value: T):删除指定值。

      • clear():清空整个集合。

    • 属性

      • size:获取集合中元素的数量。

  • 类型安全示例

// 创建一个字符串类型的Set
const uniqueNames: Set<string> = new Set();
uniqueNames.add("Alice");
uniqueNames.add("Bob");
uniqueNames.add("Alice"); // 添加无效,因为"Alice"已存在
console.log(uniqueNames.size); // 输出: 2
console.log(uniqueNames.has("Bob")); // 输出: true
uniqueNames.delete("Bob");
  • 特点总结

    • 唯一性:自动去除重复值,基于值比较(使用SameValueZero算法)。

    • 类型约束:TS泛型确保集合元素类型一致。

    • 性能:查找、添加和删除操作的平均时间复杂度为 O(1)。

总结

  • map():主要用于数组的转换操作,通过回调函数生成新数组。优势在于类型安全和不可变性,适合数据处理场景。

  • Set:是一种数据结构,用于存储唯一值的集合。优势在于高效的元素管理和类型约束,适合去重或成员检查任务。

  • 关键区别map() 是数组方法,用于元素映射;Set 是数据结构对象,用于值存储。

  • TS中的最佳实践:利用TypeScript的类型系统(如泛型)来定义回调函数或集合元素类型,避免运行时错误,提高代码健壮性。

http://www.xdnf.cn/news/1389871.html

相关文章:

  • 【前端教程】从基础到专业:诗哩诗哩网HTML视频页面重构解析
  • Java试题-选择题(21)
  • new/delete 和 malloc/free 区别
  • 小杰机器视觉(five day)——直方图均衡化
  • linux系统学习(13.系统管理)
  • 基于orin系列的刷写支持笔记
  • 30分钟入门实战速成Cursor IDE(1)
  • 【拍摄学习记录】04-拍摄模式/曝光组合
  • Nginx的主要配置文件nginx.conf详细解读——及其不间断重启nginx服务等操作
  • 数据结构—第五章 树与二叉树
  • 机器学习算法全景解析:从理论到实践
  • vue3 鼠标移上去 显示勾选框 选中之后保持高亮
  • 自然语言提取PDF表格数据
  • 马斯克杀入AI编程!xAI新模型Grok Code Fast 1发布,深度评测:速度、价格与API上手指南
  • Vue3 + Spring Boot 项目中跨域问题的排查与解决
  • CS144 lab3 tcp_sender
  • 自动驾驶中的传感器技术36——Lidar(11)
  • 《生成式AI消费级应用Top 100——第五版》| a16z
  • uni-app 跨平台项目的 iOS 上架流程:多工具组合的高效协作方案
  • driver.js实现前端页面引导
  • 【Flask】测试平台开发,集成禅道
  • 渗透测试学习笔记
  • dm8_静默安装简单快速
  • 基于EB的K3XX_GPT定时器中断的实现方法
  • 音视频直播卡顿分析与优化:技术原理、实践案例与未来趋势
  • Java 流(Stream)、文件(File)和IO
  • 基于 Python asyncio 和币安 WebSocket 打造高频加密货币预警机器人
  • 【Spring Cloud Alibaba】前置知识
  • 订餐后台项目-day02数据库模型定义笔记
  • 从0开始学习Java+AI知识点总结-28.Linux部署