Young Kbt blog Young Kbt blog
首页
  • java基础

    • Java基础
    • Java集合
    • Java反射
    • JavaJUC
    • JavaJVM
  • Java容器

    • JavaWeb
  • Java版本新特性

    • Java新特性
  • SQL 数据库

    • MySQL
    • Oracle
  • NoSQL 数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • ActiveMQ
    • RabbitMQ
    • RocketMQ
    • Kafka
  • 进阶服务

    • Nginx
  • Spring
  • Spring Boot
  • Spring Security
  • 设计模式
  • 算法
  • 知识
  • 管理

    • Maven
    • Git
  • 部署

    • Linux
    • Docker
    • Jenkins
    • Kubernetes
  • 进阶

    • TypeScript
  • 框架

    • React
    • Vue2
    • Vue3
  • 轮子工具
  • 项目工程
  • 友情链接
  • 本站

    • 分类
    • 标签
    • 归档
  • 我的

    • 收藏
    • 关于
    • Vue2-Admin (opens new window)
    • Vue3-Admin(完善) (opens new window)
GitHub (opens new window)

Shp Liu

朝圣的使徒,正在走向编程的至高殿堂!
首页
  • java基础

    • Java基础
    • Java集合
    • Java反射
    • JavaJUC
    • JavaJVM
  • Java容器

    • JavaWeb
  • Java版本新特性

    • Java新特性
  • SQL 数据库

    • MySQL
    • Oracle
  • NoSQL 数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • ActiveMQ
    • RabbitMQ
    • RocketMQ
    • Kafka
  • 进阶服务

    • Nginx
  • Spring
  • Spring Boot
  • Spring Security
  • 设计模式
  • 算法
  • 知识
  • 管理

    • Maven
    • Git
  • 部署

    • Linux
    • Docker
    • Jenkins
    • Kubernetes
  • 进阶

    • TypeScript
  • 框架

    • React
    • Vue2
    • Vue3
  • 轮子工具
  • 项目工程
  • 友情链接
  • 本站

    • 分类
    • 标签
    • 归档
  • 我的

    • 收藏
    • 关于
    • Vue2-Admin (opens new window)
    • Vue3-Admin(完善) (opens new window)
GitHub (opens new window)
  • 超文本标记语言 - Html

  • 解释编程语言 - JavaScript

  • JS 超集语言 - TypeScript

    • TypeScript - 介绍
    • TypeScript - 安装和使用
    • TypeScript - 基本类型
    • TypeScript - 编译和配置
    • TypeScript - 文件打包
    • TypeScript - 接口
    • TypeScript - 函数
    • TypeScript - 类
    • TypeScript - 泛型
    • TypeScript - 类型推断
    • TypeScript - 高级类型
    • TypeScript Office - 入门
    • TypeScript Office - 常用类型
    • TypeScript Office - 类型缩小
    • TypeScript Office - 更多函数
    • TypeScript Office - 对象类型
    • TypeScript Office - 类型操纵
    • TypeScript Office - 类
    • TypeScript Office - 模块
    • TypeScript Office - 变量声明
    • TypeScript Office - 类型推断
    • TypeScript Office - 枚举
    • TypeScript Office - 公共类型
    • TypeScript Office - Symbols
    • TypeScript Office - 类型兼容性
    • TypeScript Office - 迭代器和生成器
      • 遍历
      • Iterable 接口
      • for..of 声明
      • for..of 与 for..in 声明
      • 代码生成
        • 生成目标 ES5 和 ES3
        • ECMAScript 2015 和 更高版本
    • TypeScript Office - 装饰器
    • TypeScript Office - JSX
    • TypeScript Office - 混入
    • TypeScript Office - 三斜线指令
    • TypeScript Office - 模块进阶
    • TypeScript Office - 模块解析
    • TypeScript Office - 命名空间
    • TypeScript Office - 命名空间与模块
    • TypeScript Office - 声明合并
  • 界面构建框架 - React

  • 渐进式框架 - Vue2

  • 渐进式框架 - Vue3

  • 前端
  • JS 超集语言 - TypeScript
Young Kbt
2022-09-15
目录

TypeScript Office - 迭代器和生成器

  • 遍历
  • Iterable 接口
  • for..of 声明
  • for..of 与 for..in 声明
  • 代码生成
    • 生成目标 ES5 和 ES3
    • ECMAScript 2015 和 更高版本

# 遍历

如果一个对象有 Symbol.iterator 属性的实现,它就被认为是可迭代的。一些内置类型,如 Array、Map、Set、String、Int32Array、Uint32Array 等,已经实现了它们的 Symbol.iterator 属性。对象上的 Symbol.iterator 函数负责返回要迭代的值的列表。

# Iterable 接口

Iterable 是一个我们可以使用的类型,如果我们想接收上面列出的可迭代的类型。下面是一个例子:

function toArray<X>(xs: Iterable<X>): X[] {
    return [...xs]
}
1
2
3

# for..of 声明

for...of 在一个可迭代对象上循环,调用对象上的 Symbol.iterator 属性。下面是一个关于数组的简单 for.of 循环。

let someArray = [1, "string", false];
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}
1
2
3
4

# for..of 与 for..in 声明

for...of 和 for...in 语句都是在列表上进行迭代;但迭代的值是不同的,for...in 返回被迭代对象的键值列表,而 for...of 返回被迭代对象的数字属性值列表。

这里有一个例子可以证明这种区别:

let list = [4, 5, 6];
for (let i in list) {
    console.log(i); // "0", "1", "2",
}
for (let i of list) {
    console.log(i); // 4, 5, 6
}
1
2
3
4
5
6
7

另一个区别是 for...in 对任何对象进行操作;它作为一种检查该对象上的属性的方法。另一方面,for...of 主要对可迭代对象的值感兴趣。像 Map 和 Set 这样的内置对象实现了Symbol.iterator` 属性,允许访问存储的值。

let pets = new Set(["Cat", "Dog", "Hamster"]);
pets["species"] = "mammals";
for (let pet in pets) {
    console.log(pet); // "species"
}
for (let pet of pets) {
    console.log(pet); // "Cat", "Dog", "Hamster"
}
1
2
3
4
5
6
7
8

# 代码生成

# 生成目标 ES5 和 ES3

当针对 ES5 或 ES3 兼容的引擎时,迭代器只允许在 Array 类型的值上使用。在非数组值上使用 for...of 循环是一个错误,即使这些非数组值实现了 Symbol.iterator 属性。

例如,编译器将为 for... 的循环生成一个简单的 for 循环。

let numbers = [1, 2, 3];
for (let num of numbers) {
    console.log(num);
}
1
2
3
4

将被生成为:

var numbers = [1, 2, 3];
for (var _i = 0; _i < numbers.length; _i++) {
    var num = numbers[_i];
    console.log(num);
}
1
2
3
4
5

# ECMAScript 2015 和 更高版本

当针对 ECMAScipt 2015 兼容的引擎时,编译器将生成 for...of 循环,以针对引擎中的内置迭代器实现。

编辑此页 (opens new window)
#TypeScript
更新时间: 2023/09/18, 16:34:13
TypeScript Office - 类型兼容性
TypeScript Office - 装饰器

← TypeScript Office - 类型兼容性 TypeScript Office - 装饰器→

最近更新
01
技术随笔 - Element Plus 修改包名 原创
11-02
02
Reactor - 扩展性
11-02
03
Reactor - 最佳实践
11-02
更多文章>
Theme by Vdoing | Copyright © 2021-2024 Young Kbt | blog
桂ICP备2021009994号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式