加入收藏 | 设为首页 | 会员中心 | 我要投稿 汽车网 (https://www.0577qiche.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 教程 > 正文

TypeScript 迭代器介绍

发布时间:2023-03-31 08:37:11 所属栏目:教程 来源:
导读:迭代器是一种特殊对象,它符合迭代器协议规范。在 TypeScript 中,我们可以定义一个接口,这个接口上有一个函数类型 next ,next() 方法的返回值类型是 { value: any, done: boolean }。其中,value 是 any 类型,表
迭代器是一种特殊对象,它符合迭代器协议规范。在 TypeScript 中,我们可以定义一个接口,这个接口上有一个函数类型 next ,next() 方法的返回值类型是 { value: any, done: boolean }。其中,value 是 any 类型,表示下一个将要返回的值;done 是布尔类型,当没有更多可返回数据时返回 true。迭代器还会保存一个内部指针,用来指向当前集合中值的位置。

迭代器一旦创建,迭代器对象就可以通过重复调用 next() 显式地迭代。

interface IteratorInterface {
  next: () => {
    value: any
    done: boolean
  }
}
function createIterator(array: any[]): IteratorInterface {
  let index = 
  let len = array.length
  return {
    next: function () {
      return index < len ? { value: array[index++], done: false } : { value: undefined, done: true }
    }
  }
}
var iterator = createIterator([, , ])
console.log(iterator.next()) // { value: 1, done: false }
console.log(iterator.next()) // { value: 2, done: false }
console.log(iterator.next()) // { value: 3, done: false }
console.log(iterator.next()) // { value: undefined, done: true }
代码解释:

第 1 行,声明了一个 Iterator 接口,具有 next 这样一个函数类型。

第 8 行,声明了一个可以返回迭代器对象的函数,这个函数的返回值类型必须符合 Iterator 接口。

倒数第 4 行,通过调用迭代器对象上的 next() 方法,可以拿到数据集中的下一个数据项。

最后一行,拿到数据集中的所有数据后,done 属性变为 true。

上面的例子,用模拟的迭代器地迭代了一个数组对象,那是不是所有的对象都可以这样迭代呢?当然不是。

只有一个对象实现了 Symbol.iterator 属性时,我们才认为它是可迭代的。一些内置的类型如 Array,Map,Set,String,Int32Array,Uint32Array 等都已经实现了各自的 Symbol.iterator。

Symbol.iterator 属性本身是一个函数,就是当前数据结构默认的迭代器生成函数。执行这个函数,就会返回一个迭代器。

比如,String 是一个内置的可迭代对象:

let str: string = 'Hi'
console.log(typeof str[Symbol.iterator]) // function
String 的默认迭代器会依次返回该字符串的字符:

let str: string = 'Hi'
let iterator: IterableIterator<string> = str[Symbol.iterator]()
 
console.log(iterator.next())      // { value: 'H', done: false }
console.log(iterator.next())      // { value: 'i', done: false }
console.log(iterator.next())      // { value: undefined, done: true }
代码解释:

第 1 行,声明一个字符串类型变量,字符串类型内置了默认迭代器生成函数 Symbol.iterator。

第 2 行,执行这个函数,返回了一个迭代器。

总结一下迭代器的作用:

为各种数据结构(Array,Map,Set,String等),提供一个统一的、简便的访问接口。
使得数据结构的成员能够按某种次序排列。
创造了一种新的遍历命令 for..of 循环。
4. for…of
for...of 会遍历可迭代的对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等),调用对象上的 Symbol.iterator 方法。

let iterable = [, , ]
for (const value of iterable) {
  console.log(value)
}
// 10
// 20
// 30
解释: 通过 for...of 循环遍历数组 iterable 的每一项元素。

const heroes = [
  {
    name: '艾希',
    gender: 
  },
  {
    name: '泰达米尔',
    gender: 
  }
]
for (let { name } of heroes) {
  console.log(name)
}
解释: 通过 let { name } of heroes 循环迭代 heroes 对象数组,将每一个对象解构,得到每一个对象的 name 属性值。

let iterable = 'imooc'
for (const s of iterable) {
  console.log(s)
}
// i
// m
// o
// o
// c
字符串具有可迭代性,通过 for...of 可以快速遍历出每一个字符。

let iterable = new Map()
iterable.set('a', )
iterable.set('b', )
iterable.set('c', )
for (let entry of iterable) {
  console.log(entry)
}
// ['a', 1]
// ['b', 2]
// ['c', 3]
for (let [key, value] of iterable) {
  console.log(value)
}
// 1
// 2
// 3
解释: 一个 Map 对象在迭代时会根据对象中元素的插入顺序来进行。for...of 循环在每次迭代后会返回一个形式为 [key,value] 的数组。通过使用 let [key, value] 这种解构形式,可以快速获取每一项属性值。

(编辑:汽车网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章