Typescript学习教程，从入门到精通，TypeScript 集合类型语法知识点及案例代码（11）

TypeScript 集合类型语法知识点及案例代码

TypeScript 提供了多种集合类型，用于存储和管理数据。以下将详细介绍 数组（Array）、元组（Tuple）、集合（Set） 和 映射（Map），包括其语法、常用操作及案例代码。

1. 数组（Array）

1.1 创建数组对象

在 TypeScript 中，数组可以通过以下几种方式创建：

  • 使用方括号语法

    let fruits: string[] = ['Apple', 'Banana', 'Cherry'];
let numbers: number[] = [1, 2, 3, 4, 5];

  • 使用泛型语法

    let fruits: Array<string> = ['Apple', 'Banana', 'Cherry'];
let numbers: Array<number> = [1, 2, 3, 4, 5];

  • 使用 Array 构造函数

    let fruits: string[] = new Array('Apple', 'Banana', 'Cherry');
let numbers: number[] = new Array(1, 2, 3, 4, 5);

1.2 Array 类常用函数和属性

  • 属性

    • length: 返回数组的长度。

      let arr: number[] = [1, 2, 3];
console.log(arr.length); // 输出: 3

  • 方法

    • push(item: T): 向数组末尾添加一个元素。

      let arr: number[] = [1, 2, 3];
arr.push(4);
console.log(arr); // 输出: [1, 2, 3, 4]

    • pop(): 移除并返回数组的最后一个元素。

      let arr: number[] = [1, 2, 3];
let last = arr.pop();
console.log(last); // 输出: 3
console.log(arr);  // 输出: [1, 2]

    • shift(): 移除并返回数组的第一个元素。

      let arr: number[] = [1, 2, 3];
let first = arr.shift();
console.log(first); // 输出: 1
console.log(arr);   // 输出: [2, 3]

    • unshift(item: T): 向数组开头添加一个元素。

      let arr: number[] = [1, 2, 3];
arr.unshift(0);
console.log(arr); // 输出: [0, 1, 2, 3]

    • splice(start: number, deleteCount?: number, ...items: T[]): 更改数组内容。

      let arr: number[] = [1, 2, 3, 4, 5];
arr.splice(2, 1, 6); // 从索引2开始，删除1个元素，插入6
console.log(arr); // 输出: [1, 2, 6, 4, 5]

    • slice(begin?: number, end?: number): 返回数组的一个片段。

      let arr: number[] = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);
console.log(sliced); // 输出: [2, 3]

    • forEach(callback: (value: T, index: number, array: T[]) => void): 对数组的每个元素执行指定的操作。

      let arr: number[] = [1, 2, 3];
arr.forEach((value, index) => {console.log(`Index ${index}: ${value}`);
});
// 输出:
// Index 0: 1
// Index 1: 2
// Index 2: 3

    • map<U>(callback: (value: T, index: number, array: T[]) => U): 对数组的每个元素执行指定的操作，并返回一个新数组。

      let arr: number[] = [1, 2, 3];
let doubled = arr.map(value => value * 2);
console.log(doubled); // 输出: [2, 4, 6]

    • filter(callback: (value: T, index: number, array: T[]) => boolean): 过滤数组，返回符合条件的元素组成的新数组。

      let arr: number[] = [1, 2, 3, 4, 5];
let even = arr.filter(value => value % 2 === 0);
console.log(even); // 输出: [2, 4]

2. 元组（Tuple）

2.1 定义元组和赋值

元组是固定长度和固定类型的数组。

// 定义一个包含字符串和数字的元组
let person: [string, number] = ['Alice', 30];// 赋值
person = ['Bob', 25];

2.2 元组常用操作

  • 访问元素

    let person: [string, number] = ['Alice', 30];
console.log(person[0]); // 输出: 'Alice'
console.log(person[1]); // 输出: 30

  • 解构赋值

    let person: [string, number] = ['Alice', 30];
let [name, age] = person;
console.log(name); // 输出: 'Alice'
console.log(age);  // 输出: 30

  • 添加元素

    let person: [string, number] = ['Alice', 30];
person.push(28);
console.log(person); // 输出: ['Alice', 30, 28]

  • 遍历元组

    let person: [string, number] = ['Alice', 30];
person.forEach((value, index) => {console.log(`Index ${index}: ${value}`);
});
// 输出:
// Index 0: Alice
// Index 1: 30

  • 长度属性

    let person: [string, number] = ['Alice', 30];
console.log(person.length); // 输出: 2

3. 集合（Set）

3.1 创建 Set 对象

let fruits: Set<string> = new Set(['Apple', 'Banana', 'Cherry']);

3.2 Set 类常用操作

  • 添加元素

    let fruits: Set<string> = new Set(['Apple', 'Banana']);
fruits.add('Cherry');
console.log(fruits); // 输出: Set { 'Apple', 'Banana', 'Cherry' }

  • 删除元素

    let fruits: Set<string> = new Set(['Apple', 'Banana', 'Cherry']);
fruits.delete('Banana');
console.log(fruits); // 输出: Set { 'Apple', 'Cherry' }

  • 检查元素是否存在

    let fruits: Set<string> = new Set(['Apple', 'Banana', 'Cherry']);
console.log(fruits.has('Apple')); // 输出: true
console.log(fruits.has('Durian')); // 输出: false

  • 清空集合

    let fruits: Set<string> = new Set(['Apple', 'Banana', 'Cherry']);
fruits.clear();
console.log(fruits); // 输出: Set {}

  • 遍历集合

    let fruits: Set<string> = new Set(['Apple', 'Banana', 'Cherry']);
fruits.forEach(fruit => {console.log(fruit);
});
// 输出:
// Apple
// Banana
// Cherry

  • 获取集合大小

    let fruits: Set<string> = new Set(['Apple', 'Banana', 'Cherry']);
console.log(fruits.size); // 输出: 3

  • 转换为数组

    let fruits: Set<string> = new Set(['Apple', 'Banana', 'Cherry']);
let arr: string[] = Array.from(fruits);
console.log(arr); // 输出: ['Apple', 'Banana', 'Cherry']

4. 映射（Map）

4.1 创建 Map 对象

let personAge: Map<string, number> = new Map([['Alice', 30],['Bob', 25],['Charlie', 28]
]);

4.2 Map 类的常用函数和属性

  • 属性

    • size: 返回映射的大小。

      let personAge: Map<string, number> = new Map([['Alice', 30],['Bob', 25],['Charlie', 28]
]);
console.log(personAge.size); // 输出: 3

  • 方法

    • set(key: K, value: V): 设置键值对。

      let personAge: Map<string, number> = new Map();
personAge.set('Alice', 30);
personAge.set('Bob', 25);
console.log(personAge); // 输出: Map { 'Alice' => 30, 'Bob' => 25 }

    • get(key: K): 获取指定键的值。

      let personAge: Map<string, number> = new Map([['Alice', 30],['Bob', 25]
]);
console.log(personAge.get('Alice')); // 输出: 30
console.log(personAge.get('Bob'));   // 输出: 25

    • has(key: K): 检查映射中是否存在指定键。

      let personAge: Map<string, number> = new Map([['Alice', 30],['Bob', 25]
]);
console.log(personAge.has('Alice')); // 输出: true
console.log(personAge.has('Charlie')); // 输出: false

    • delete(key: K): 删除指定键及其值。

      let personAge: Map<string, number> = new Map([['Alice', 30],['Bob', 25]
]);
personAge.delete('Bob');
console.log(personAge); // 输出: Map { 'Alice' => 30 }

    • clear(): 清空映射。

      let personAge: Map<string, number> = new Map([['Alice', 30],['Bob', 25],['Charlie', 28]
]);
personAge.clear();
console.log(personAge); // 输出: Map {}

    • forEach(callback: (value: V, key: K, map: Map<K, V>) => void): 对映射的每个键值对执行指定的操作。

      let personAge: Map<string, number> = new Map([['Alice', 30],['Bob', 25],['Charlie', 28]
]);
personAge.forEach((age, name) => {console.log(`${name} is ${age} years old.`);
});
// 输出:
// Alice is 30 years old.
// Bob is 25 years old.
// Charlie is 28 years old.

    • keys(): 返回映射中所有键的迭代器。

      let personAge: Map<string, number> = new Map([['Alice', 30],['Bob', 25],['Charlie', 28]
]);
let keys = personAge.keys();
console.log(keys); // 输出: MapIterator { 'Alice', 'Bob', 'Charlie' }

    • values(): 返回映射中所有值的迭代器。

      let personAge: Map<string, number> = new Map([['Alice', 30],['Bob', 25],['Charlie', 28]
]);
let values = personAge.values();
console.log(values); // 输出: MapIterator { 30, 25, 28 }

    • entries(): 返回映射中所有键值对的迭代器。

      let personAge: Map<string, number> = new Map([['Alice', 30],['Bob', 25],['Charlie', 28]
]);
let entries = personAge.entries();
console.log(entries); // 输出: MapIterator { ['Alice', 30], ['Bob', 25], ['Charlie', 28] }

5. 不同集合类型间的转换

5.1 数组与 Set 之间的转换

  • 数组转 Set

    let arr: string[] = ['Apple', 'Banana', 'Cherry'];
let fruits: Set<string> = new Set(arr);
console.log(fruits); // 输出: Set { 'Apple', 'Banana', 'Cherry' }

  • Set 转数组

    let fruits: Set<string> = new Set(['Apple', 'Banana', 'Cherry']);
let arr: string[] = Array.from(fruits);
console.log(arr); // 输出: ['Apple', 'Banana', 'Cherry']

5.2 数组与 Map 之间的转换

  • 数组转 Map

    let arr: [string, number][] = [['Alice', 30], ['Bob', 25], ['Charlie', 28]];
let personAge: Map<string, number> = new Map(arr);
console.log(personAge); // 输出: Map { 'Alice' => 30, 'Bob' => 25, 'Charlie' => 28 }

  • Map 转数组

    let personAge: Map<string, number> = new Map([['Alice', 30],['Bob', 25],['Charlie', 28]
]);
let arr: [string, number][] = Array.from(personAge.entries());
console.log(arr); // 输出: [['Alice', 30], ['Bob', 25], ['Charlie', 28]]

5.3 Set 与 Map 之间的转换

  • Set 转 Map

    let fruits: Set<string> = new Set(['Apple', 'Banana', 'Cherry']);
let fruitMap: Map<string, number> = new Map();
fruits.forEach(fruit => {fruitMap.set(fruit, 1);
});
console.log(fruitMap); // 输出: Map { 'Apple' => 1, 'Banana' => 1, 'Cherry' => 1 }

  • Map 转 Set

    let personAge: Map<string, number> = new Map([['Alice', 30],['Bob', 25],['Charlie', 28]
]);
let keys: Set<string> = new Set(personAge.keys());
let values: Set<number> = new Set(personAge.values());
console.log(keys);   // 输出: Set { 'Alice', 'Bob', 'Charlie' }
console.log(values); // 输出: Set { 30, 25, 28 }

总结

通过以上内容，我们详细介绍了 TypeScript 中常用的集合类型及其操作方法。掌握这些集合类型及其转换方法，可以帮助开发者更高效地管理和操作数据。以下是一些关键点：

  • 数组（Array） 是有序的数据集合，支持多种操作，如 push, pop, forEach, map, filter 等。
  • 元组（Tuple） 是固定长度和固定类型的数组，适用于存储固定结构的数据。
  • 集合（Set） 是不包含重复元素的无序集合，适用于需要唯一性保证的场景。
  • 映射（Map） 是键值对的集合，适用于需要快速查找和关联数据的场景。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.pswp.cn/news/906971.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

在 Win 10 上，Tcl/Tk 脚本2个示例

在 Win 10 上，Tcl/Tk 脚本2个示例

参阅&#xff1a;Tcl/Tk 教程 set PATH 新增 D:\Git\mingw64\bin where tclsh D:\Git\mingw64\bin\tclsh.exe where wish D:\Git\mingw64\bin\wish.exe 编写 test_tk.tcl 如下 #!/usr/bin/tclsh # test 文件对话框 package require Tk# 弹出文件选择对话框&#xff0c;限…
阅读更多...
Qt环境的搭建

Qt环境的搭建

Qt安装 Qt开发环境需要安装三个部分 1.C编译器(不是vs) 2.Qt SDK 3.需要一个Qt的集成开发环境 说是需要三个部分,但实际上是需要安装Qt SDK就足够了 QtSDK可以直接去官网下载 下载完成后需要配置一下环境变量 可以直接在系统中搜索"编辑系统环境变量" 为什么要…
阅读更多...
Vue3中reactive响应式使用注意事项

Vue3中reactive响应式使用注意事项

Vue 3 的 reactive 是创建响应式对象的核心 API&#xff0c;但在使用过程中有一些需要注意的事项&#xff1a; 1&#xff1a;基本使用限制 仅对对象类型有效&#xff1a;reactive 只能用于对象类型&#xff08;Object、Array、Map、Set 等&#xff09;&#xff0c;不能用于原始…
阅读更多...
STM32+rt-thread使用MQTT协议连接腾讯物联网平台

STM32+rt-thread使用MQTT协议连接腾讯物联网平台

STM32rt-thread使用MQTT协议连接腾讯物联网平台 一、腾讯云sdk下载1、进入腾讯物联网平台文件[点击链接跳转](https://cloud.tencent.com.cn/document/product/1081/48356)2、下载csdk 二、移植腾讯云sdk1、将上面解压的文件夹复制到自己工程目录下2、文件添加到自己工程 三、连…
阅读更多...
【MySQL成神之路】MySQL函数总结

【MySQL成神之路】MySQL函数总结

以下是MySQL函数的全面总结&#xff0c;包含概念说明和代码示例&#xff1a; 一、MySQL函数分类 1. 字符串函数 -- CONCAT&#xff1a;连接字符串 SELECT CONCAT(Hello, , World); -- 输出 Hello World -- SUBSTRING&#xff1a;截取子串 SELECT SUBSTRING(MySQL, 2, 3…
阅读更多...
JavaScript 异步编程、对象/数组操作

JavaScript 异步编程、对象/数组操作

异步编程 JavaScript 是单线程语言&#xff0c;通过事件循环机制处理异步操作。任务分为两种&#xff1a; 宏任务(Macrotask): script整体代码、setTimeout&#xff08;时间结束执行&#xff09;、setInterval&#xff08;间隔执行&#xff09;、I/O、UI渲染 微任务(Microtas…
阅读更多...
中小制造企业网络安全防护指南

中小制造企业网络安全防护指南

考虑到文章内容较长&#xff0c;简要内容图片在文档末尾&#xff0c;请直接翻阅到底部查看 引言&#xff1a;中小制造企业面临的独特网络安全挑战 中小制造企业 (SME) 在当今数字化浪潮中扮演着至关重要的角色&#xff0c;然而&#xff0c;伴随技术进步而来的是日益严峻且独特…
阅读更多...
es学习小结

es学习小结

1.​客户端类型​ ​推荐场景​ ​版本兼容性​ Elasticsearch Java API Client 新项目、ES 8.x集群 8.x及以上 Spring Data Elasticsearch Spring生态项目、简化ORM操作 ES 7.x-8.x&#xff08;需版本匹配&#xff09; Low-Level REST Client 需要底层HTTP控制、兼容多版本ES …
阅读更多...
Axure项目实战：智慧运输平台后台管理端-订单管理2（多级交互）

Axure项目实战：智慧运输平台后台管理端-订单管理2（多级交互）

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！如有帮助请订阅专栏！ Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420 课程主题：订单管理2 主要内容：中继器筛选、表单跟随菜单拖动、审批数据互通等 应用场景：订单管理…
阅读更多...
2025年——ComfyUI_连接HuggingFace及更改缓存路径

2025年——ComfyUI_连接HuggingFace及更改缓存路径

本篇分享在 ComfyUI 中连接 huggingface 以及更改模型缓存路径。 我们在使用 ComfyUI 的一些插件时&#xff0c;有些必要模型只能通过连接 huggingface 来缓存才能让流程得以进行。但目前在上网不科学的情况下是无法打开 huggingface 网站的&#xff0c;好在国内有其镜像网站&a…
阅读更多...
wx.getPrivacySetting接口needAuthorization一直返回false

wx.getPrivacySetting接口needAuthorization一直返回false

我们在开发小程序的隐私协议授权时往往会使用到wx.getPrivacySetting接口&#xff0c;当返回的needAuthorization为true时候提示我们需要去授权&#xff0c;但你们有没有遇到过needAuthorization一直为false的情况呢&#xff0c;下面是最常见的三个解决方法&#xff0c;都完善了…
阅读更多...
旅游信息检索

旅游信息检索

旅游信息检索 旅游信息检索是系统中实现数据获取和处理的关键环节&#xff0c;负责根据用户输入的目的地城市和出游天数&#xff0c;动态获取并生成高质量的旅游数据。 模块的工作流程分为以下几个阶段&#xff1a;首先&#xff0c;对用户输入的信息进行标准化处理&#xff0…
阅读更多...
机器学习笔记【Week2】

机器学习笔记【Week2】

一、多变量线性回归&#xff08;Multivariate Linear Regression&#xff09; 为什么需要多变量&#xff1f; 现实问题中&#xff0c;一个目标可能受多个因素影响&#xff0c;比如预测房价时&#xff1a; x 1 x_1 x1​&#xff1a;面积 x 2 x_2 x2​&#xff1a;卧室数量 x 3…
阅读更多...
Axure 基本用法学习笔记

Axure 基本用法学习笔记

一、元件操作基础 1. 可见性控制 隐藏/显示&#xff1a;可以设置元件的可见性&#xff0c;使元件在特定条件下隐藏或可见 应用场景&#xff1a;创建动态交互效果&#xff0c;如点击按钮显示隐藏内容 2. 层级管理 层级概念&#xff1a;元件有上下层关系&#xff0c;上层元件…
阅读更多...
aws平台s3存储桶夸域问题处理

aws平台s3存储桶夸域问题处理

当我们收到开发反馈s3存在跨域问题 解决步骤&#xff1a; 配置 S3 存储桶的 CORS 设置&#xff1a; 登录到 AWS 管理控制台。转到 S3 服务。选择你存储文件的 存储桶。点击 权限 标签页。在 跨域资源共享&#xff08;CORS&#xff09;配置 部分&#xff0c;点击 编辑。 登陆…
阅读更多...
【后端高阶面经：微服务篇】7、1秒响应保障：超时控制如何成为高并发系统的“救火队长”？

【后端高阶面经：微服务篇】7、1秒响应保障：超时控制如何成为高并发系统的“救火队长”？

一、全链路超时建模：从用户需求到系统分解 1.1 端到端时间预算分配 黄金公式： 用户期望响应时间 = 网络传输时间 + 服务处理时间 + 下游调用时间 + 缓冲时间典型分配策略（以1秒目标为例）： 环节时间预算优化目标客户端渲染100ms骨架屏（Skeleton）预渲染边缘节点（CDN）…
阅读更多...
前端遇到高并发如何解决重复请求

前端遇到高并发如何解决重复请求

在前端开发中遇到高并发场景时&#xff0c;若不加控制容易出现重复请求&#xff0c;这可能导致接口压力增加、数据异常、用户体验变差等问题。以下是前端防止/解决重复请求的常见方法&#xff0c;按不同场景归类总结&#xff1a; &#x1f31f; 一、常见重复请求场景 用户频繁点…
阅读更多...
老牌协议再升级，Ethernet IP转Modbus TCP网关桥接精准灌装系统

老牌协议再升级，Ethernet IP转Modbus TCP网关桥接精准灌装系统

对于消费品包装制造商而言&#xff0c;灌装机是最关键且昂贵的设备之一。然而&#xff0c;许多公司却难以应对生产过程中的灌装波动&#xff0c;从而造成严重的财务和生产后果。 在本次网络研讨会中&#xff0c;我们将探讨稳联技术的ethernet ip转modbus tcp&#xff08;WL-ABC…
阅读更多...
骰子游戏(2023睿抗省赛)

骰子游戏(2023睿抗省赛)

骰子游戏 题目描述: 在某个游戏中有一个骰子游戏。 在游戏中&#xff0c;你需要投掷 5 个标准六面骰子&#xff08;骰子为一个正方体&#xff0c;6个面上分别有 1、2、3、4、5、6中的一个数字&#xff0c;骰子的质量均匀&#xff09;&#xff0c;投出的点数根据组合会获得一…
阅读更多...
CMake跨平台编译生成：从理论到实战

CMake跨平台编译生成：从理论到实战

一、引言 在当今软件开发中&#xff0c;跨平台开发已成为常态。无论是需要在Windows、Linux、macOS等多操作系统上运行&#xff0c;还是在不同的硬件架构&#xff08;如x86、ARM等&#xff09;间部署&#xff0c;跨平台编译生成都是一个无法回避的关键问题。CMake&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023