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

TypeScript 迭代器和生成器详解

目录

迭代器(Iterators)

生成器(Generators)

使用场景

for..of vs. for..in 语句

for..of 循环

for..in 循环

区别总结

注意事项

总结


在 TypeScript 中,迭代器(Iterators)和生成器(Generators)是处理数据集合和异步编程的重要工具。它们能够帮助我们更优雅地处理数据流和异步操作,

迭代器(Iterators)

迭代器是一种设计模式,它提供一种方法来顺序访问一个聚合对象中的元素,而不需要暴露对象的内部表示。在 TypeScript 中,迭代器允许我们通过一种统一的方式来访问不同类型的数据集合,比如数组、集合、映射等。

Iterable 和 Iterator

在理解迭代器之前,需要了解两个核心概念:Iterable 和 Iterator。

  • Iterable(可迭代对象):实现了 Symbol.iterator 方法的对象称为可迭代对象。这个方法返回一个迭代器。
  • Iterator(迭代器):是一个对象,它实现了 next() 方法,每次调用 next() 方法会返回一个包含 value 和 done 属性的对象。value 表示当前迭代到的值,done 表示迭代器是否已经完成迭代。

示例

let numbers = [1, 2, 3, 4, 5];// 获取迭代器
let iterator = numbers[Symbol.iterator]();// 1、使用迭代器遍历数组
let next = iterator.next();
while (!next.done) {console.log(next.value);next = iterator.next();
}
// 2、使用for..of遍历数组
// for (let value of iterator) {
//     console.log(value);
// }

在这个例子中,numbers 是一个数组,我们通过 numbers[Symbol.iterator]() 获取了一个迭代器,然后使用 iterator.next() 方法来依次访问数组的元素。

生成器(Generators)

生成器是一种特殊类型的函数,它可以暂停执行,并且可以在需要时恢复执行。生成器函数使用 function* 关键字来定义,而不是普通函数的 function 关键字。

语法

生成器函数使用 function* 声明,内部可以使用 yield 关键字来暂停函数执行,并将一个值传递给生成器的调用者。

function* generateSequence() {yield 1;yield 2;yield 3;
}// 使用生成器
let generator = generateSequence();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

在这个例子中,generateSequence 是一个生成器函数,通过 yield 关键字定义了一系列的值。每次调用 generator.next() 会恢复生成器函数执行,直到遇到下一个 yield 或者函数结束为止。

使用场景

迭代器的应用场景:

  • 遍历集合(如数组、映射等)中的元素。
  • 自定义迭代器,以便在数据结构中实现自定义的迭代行为。

生成器的应用场景:

  • 异步编程:生成器函数可以与 async/await 结合使用,使异步代码看起来更像同步代码,提升代码的可读性和维护性。
  • 惰性计算:生成器可以用于生成无限序列或者大数据集,只在需要时生成下一个值,节省内存和计算资源。

for..of vs. for..in 语句

for..of 循环

用法:

  • 用于迭代可迭代对象(例如数组、字符串、Set、Map 等)的值。
  • for..of 语句会遍历对象的元素,而不是对象本身的属性。

示例:

let iterable = [10, 20, 30];for (let value of iterable) {console.log(value); // 输出 10, 20, 30
}

在这个例子中,for..of 循环直接迭代数组 iterable 中的每一个值。

for..in 循环

用法:

  • 用于迭代对象的可枚举属性,包括从原型链继承的属性。
  • for..in 循环通常用于遍历对象的键名。

示例:

let obj = { a: 1, b: 2, c: 3 };for (let key in obj) {console.log(key); // 输出 'a', 'b', 'c'
}

在这个例子中,for..in 循环遍历对象 obj 的每一个键名。

区别总结

for..of:

  • 遍历值:遍历集合的值而不是属性。
  • 适用于:数组、Set、Map、字符串等实现了可迭代协议的对象。

for..in:

  • 遍历键名:遍历对象的键名,包括继承的属性。
  • 适用于:普通对象的属性遍历,通常不用于数组或类似数组对象的迭代。

注意事项

  • for..of 不适用于普通对象,因为普通对象并不是可迭代对象,如果尝试对普通对象使用 for..of 会导致语法错误或无法正常遍历。
  • for..in 在遍历数组时,除了遍历数组自身的索引外,还会遍历原型链上的可枚举属性,因此通常不推荐用于遍历数组,除非确实需要包括原型链上的属性。

总结

for..of 用于遍历集合的值,而 for..in 用于遍历对象的属性(键名)。

相关文章:

TypeScript 迭代器和生成器详解

目录 迭代器(Iterators) 生成器(Generators) 使用场景 for..of vs. for..in 语句 for..of 循环 for..in 循环 区别总结 注意事项 总结 在 TypeScript 中,迭代器(Iterators)和生成器&am…...

echarts 极坐标柱状图 如何定义柱子颜色

目录 echarts 极坐标柱状图 如何定义柱子颜色问题描述方式一 在 series 数组中定义颜色方式二 通过 colorBy 和 color 属性配合使用 echarts 极坐标柱状图 如何定义柱子颜色 本文将分享在使用 echarts 的 极坐标柱状图 时,如何自定义柱子的颜色。问题本身并不难解决…...

JavaScript模块化

JavaScript模块化 一、CommonJS规范1、在node环境下的模块化导入、导出 2、浏览器环境下使用模块化browserify编译js 二、ES6模块化规范1、在浏览器端的定义和使用2、在node环境下简单使用方式一:方式二: 3、导出数据4、导入数据5、数据引用问题 一、Com…...

文件包含漏洞Tomato靶机渗透_详解

一、导入靶机 将下载好的靶机拖入到VMware中,填写靶机机名称(随便起一个)和路径 虚拟机设置里修改网络状态为NAT模式 二、信息收集 1、主机发现 用御剑扫描工具扫描虚拟机的NAT网段,发现靶机的IP是192.168.204.141 2、端口扫描 用御剑端口扫描扫描全…...

湖北汽车工业学院-高等数学考纲

湖北汽车工业学院2024年普通专升本考试的《高等数学》考试大纲已经公布。考试形式为闭卷笔试,满分100分,考试时间为90分钟。考试内容主要包括以下几个部分: 1. **函数、极限、连续**: 涉及函数概念、表示法、有界性、周期性、奇偶…...

Linux:Xshell相关配置及前期准备

一、Linux的环境安装 1、裸机安装或者是双系统 2、虚拟机的安装 3、云服务器(推荐)——>安装简单,维护成本低,学习效果好,仿真性高(可多人一起用一个云服务器) 1.1 购买云服务器 使用云服…...

模型 正态分布(通俗解读)

系列文章 分享 模型,了解更多👉 模型_思维模型目录。随机世界的规律,大自然里的钟形曲线。 1 正态分布的应用 1.1 质量管理之六西格玛 六西格玛是一种旨在通过识别和消除缺陷原因来提高制造过程或业务流程质量的管理策略。我们先来了解下六…...

安装了Vue-pdf后,打包文件多出了worker.js和worker.js.gz

解决方式: 修改node_modules/worker-loader/dist/index文件 将 const filename _loaderUtils2.default.interpolateName(this, options.name || 中的 js/[hash].worker.js,更改为 static/js/[hash].worker.js...

使用excel生成国际化多语言js文件的脚本

1、创建一个空文件夹 2、终端 cnpm install xlsx3、在文件夹创建一个index.js // 导入 Node.js 内置的 fs 模块 const fs = require(fs); // 导入 xlsx 模块,用于处理 Excel 文件 const XLSX = require(xlsx);// 读取 Excel 文件 function readExcelFile(filePath) {const …...

【蝉联】摩斯再次获得“中国隐私计算市场份额第一”

蝉联第一 8月2日,全球领先的IT市场研究和咨询公司IDC发布了《中国隐私计算平台厂商市场份额,2023》报告。蚂蚁集团凭借商用隐私计算平台摩斯(MORSE),以 35.3%的市场份额蝉联第一。 2023年,中国隐私计算平台…...

安装 qcloud-python-sts 失败 提示 gbk codecs decode byte 应该如何解决

安装 qcloud-python-sts 失败 提示 gbk codecs decode byte 应该如何解决 解决方案: 将windows 修改为utf-8编码格式 解决步骤如下: 1. 进入控制台 2. 点击区域 4. 点击管理 4.勾选UTF-8 5.重启系统即可...

mv:自动对焦代码

try:# The camera will now focus on whatever is in front of it.sensor.ioctl(sensor.IOCTL_TRIGGER_AUTO_FOCUS) except:raise (Exception("Auto focus is not supported by your sensor/board combination."))...

【C++】数组案例 五只小猪称体重

题目:给出物质小猪体重,找出最大的体重的值并打印 思路:利用菽粟写入五只小猪的体重,让每一个元素都赋值给一个整型变量并每赋值一次就于下一个数组中的元素比,若是大就继续赋值给这个变量,若是小则不赋值…...

Bug 解决 | 后端项目无法正常启动,或依赖服务连接失败

目录 1、版本问题 2、依赖项问题 明明拷贝的代码,为什么别人行,我启动就报错? 这篇文章我就理一下最最常见的项目启动报错的两种原因! 1、版本问题 比如明明项目的 Java 版本是 8,你非得拿 5 跑?那不是…...

Linux: network: mlx5_core crash;dos

https://bugzilla.redhat.com/show_bug.cgi?idCVE-2024-41090 https://git.kernel.org/pub/scm/linux/kernel/git/stable/linux.git/commit/?id8be915fc5ff9a5e296f6538be12ea75a1a93bdea https://www.openwall.com/lists/oss-security/2024/07/24/4 是tap的驱动向下传递的包…...

用手机剪辑视频素材从哪里找?用手机视频素材库分享

视频编辑是一门充满创意的艺术,无论是制作短片、广告还是个人Vlog,都离不开高质量的视频素材。如果自己拍摄的素材不能完全满足创作需求,或者需要更多样化的内容来丰富视频,那么优质的视频素材来源至关重要。下面推荐几个提供高品…...

DataStream API使用Sink及自定义Sink

目录 Data Sinks 案例 自定义Sink Human实体类 自定义RichSinkFunction MySQL Sink使用 测试 Data Sinks 数据接收器(Data sinks)消费数据流并将它们转发到文件、套接字、外部系统或打印它们。Flink带有各种内置输出格式,这些格式被封装在数据流的算子后面: …...

C++标准模板(STL)- 类型支持 (类型属性,检查类型是否拥有强结构相等性,std::has_strong_structural_equality)

类型特性 类型特性定义一个编译时基于模板的结构&#xff0c;以查询或修改类型的属性。 试图特化定义于 <type_traits> 头文件的模板导致未定义行为&#xff0c;除了 std::common_type 可依照其所描述特化。 定义于<type_traits>头文件的模板可以用不完整类型实例…...

《中国数据库前世今生》观影——2000年代/数据库分型及国产数据库开端

引出 《中国数据库前世今生》观影——2000年代/数据库分型及国产数据库开端 第3集&#xff1a;2000年代/数据库分型及国产数据库开端 y2k问题 千年虫&#xff0c;又叫做“计算机2000年问题”“电脑千禧年千年虫问题”或“千年危机”。缩写为“Y2K]”。是指在某些使用了计算机…...

图的同态Graph Homomorphism与同构Graph Isomorphism

图的同态Graph Homomorphism 图的同态&#xff08;Graph Homomorphism&#xff09;是图论中的一个重要概念&#xff0c;用于描述图之间的一种映射关系。图的同态描述了一个图如何通过映射保留其边的结构。 ### 图的同态定义 设有两个图 \( G (V_G, E_G) \) 和 \( H (V_H, …...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

数据结构:递归的种类(Types of Recursion)

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...