第十七节: TypeScript迭代器(Iterator)
迭代器(Iterator)
如果要从一个数据集中获取一个数据项，可以对这个数据集进行迭代。
JavaScript 提供了许多迭代集合的方法，从简单的 for 循环到 map() 和 filter()。本节要介绍的迭代器也是一种方案，并且迭代器将迭代的概念直接带入核心语言，同时提供了一种机制来自定义 for...of 循环的行为。
1. 模拟一个迭代器
迭代器是一种特殊对象，迭代器对象上有个next方法, 每次调用next()方法都会返回一个对象{value:'', done:false}, 其中value属性是每次迭代的值, done属性是一个布尔值, 判断当前是否迭代完毕, 迭代完成后,返回true
可以使用TypeScript定义一个迭代器接口
// 迭代器接口
interface IteratorInterface{
next:() => ({
value: any,
done:boolean
})
}
// 迭代器函数
function createInterator(arr:any[]):IteratorInterface{
let index = 0; // 从索引为0 开始查询 数据
let len = arr.length; // 数组长度
return { // 返回迭代器对象
next(){
return index < len
? { value: arr[index++], done:false}
: { value: undefined, done:true}
}
}
}
// 手动调用迭代器
let interator = createInterator([10,20,30])
console.log(interator.next()) // {value: 10, done: false}
console.log(interator.next()) // {value: 20, done: false}
console.log(interator.next()) // {value: 30, done: false}
console.log(interator.next()) // {value: undefined, done: true}
2. 可迭代性
不是所有对象都可以这样迭代的, 只有实现了Symbol.iterator属性的对象, 才认为它是可迭代的.
一些内置的类型,如Array,Map,Set,String,等已经实现了Symbol.interator迭代属性, 对象上的迭代属性负责返回迭代值列表
Symbol.iterator 属性本身是一个函数，就是当前数据结构默认的迭代器生成函数。执行这个函数，就会返回一个迭代器。
比如, String是一个内置的可迭代对象:
// 查看String 是否有迭代函数
let str: string = 'Hi'
console.log(typeof str[Symbol.iterator]) // function
String 的默认迭代器会依次返回该字符串的字符：
let str: string = 'Hi'
// 获取String的迭代器
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 }
3. for...of 遍历
for..of循环遍历一个可迭代对象，调用该Symbol.iterator对象的属性。for..of是数组上的简单循环：
例如:
// 数组
const arr = ['hello','world', 30, false ]
// 遍历数组
for(let entry of arr){
// entry类型: let entry: string | number | boolean
console.log(entry)
}
4. for...of与for...in
for..of和for..in都是迭代列表语句；但是，迭代的值是不同的，
for..in迭代对象的可枚举属性，而for..of遍历可迭代对象定义的迭代数据
例如:
const arr = ['hello','world', 30, false ]
// 遍历值
for(let val of arr){
console.log(val) // hello world 30 false
}
// 遍历属性
for(let key in arr){
console.log(key) // 0 1 2 3
}
另一个区别是for..in对任何对象进行操作；迭代对象的可枚举属性,
for..of主要是迭代对象的值, 不能用在普通对象上, 普通对象没有迭代器
例如:
let obj = {
name: 'cat',
age: 3
}
// for..in 遍历属性
for (let key in obj) {
console.log(key); // "name" "age"
}
// for...of 报错
// 类型“{ name: string; age: number; }”必须具有返回迭代器的 "[Symbol.iterator]()" 方法。
for (let val of obj) {
console.log(val); // "Cat", "Dog", "Hamster"
}
5. 解构赋值与扩展运算符
对数组和 Set 结构进行解构赋值时，会默认调用 Symbol.iterator 方法：
let [x, ...y] = [1, 2, 3, 4]
// y = [2, 3, 4]
扩展运算符也会调用默认的 Iterator 接口，得到一个数组结构:
let arr = [...'hello']
console.log(arr) // ['h', 'e', 'l', 'l', 'o']
4. 内置Iterable泛型
如果我们想列出的可迭代类型，我们可以使用Iterable<Type>这种类型
例如:
function toArray<Type>(arr: Iterable<Type>):Type[]{
return [...arr]
}
const arr = ['hello','world', 30 ]
// 类型: const arr: (string | number)[]
const arr2 = toArray(arr)
// 类型 const arr2: (string | number)[]
5. 代码编译
当以 ES5 或 ES3 兼容引擎为目标时， 由于很多对象没有 实现迭代器, 因此TypeScript会将你使用的for...of编译成普通的循环语句
例如:
let numbers = [1, 2, 3];
for (let num of numbers) {
console.log(num);
}
编译后的代码:
var numbers = [1, 2, 3];
for (var _i = 0, numbers_1 = numbers; _i < numbers_1.length; _i++) {
var num = numbers_1[_i];
console.log(num);
}
