[[toc]]
iterator是什么
痛点
- JavaScript提供了四种数据集合,分别是array、object、map和set。
- 这四种数据集合的数据结构各不相同,但都可以被循环遍历,背后都离不开iterator(迭代器)的支撑。
总结
- Iterator是种机制,也可说是种接口,它为各种不同的数据结构提供了统一的访问机制。
- 任何数据结构只要配置了 Iterator 接口,就可以完成遍历操作
demo:for-of机制
- ES6 创造了新的遍历for…of循环
- iterator接口主要供for…of消费
- 也就是说: 数组内置了iterator属性,因此成为可迭代对象,从而可被for…of遍历
ps
- for…of ES6新增,遍历变量为 value
- for…in 遍历遍历为 key
// for-of可以遍历: Array,Map,Set,String 等
// 注: object 不可以,因为 obj is not iterable
const arr=['a','b','c'];
for (let i of arr){
console.log(i)
//a、b、c
}
const m=new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (let j of m){
console.log(j)
//[1, 'x'], [2, 'y'], [3, 'z']
}
demo:可迭代性
可迭代(iterable)意味着
- 数据支持for…of遍历
- 可以调用自身的symbol.iteration方法
- 在js里原生具备 Iterator 接口的数据结构有:Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象、
// 迭代器的next方法
let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();
// TEST
console.log('iter=',iter) // iter={next:function}
console.log(iter.next()) // { value: 'a', done: false }
console.log(iter.next()) // { value: 'b', done: false }
console.log(iter.next()) // { value: 'c', done: false }
console.log(iter.next()) // { value: undefined, done: true }
迭代器工作原理
过程
- 遍历器对象本质是一个指针对象,指针对象里有个next方法
- 初始时用该next方法,移动指针使得指针指向数据的第一个元素
- 然后每调用一次next方法,指针就指向数据结构里的下一个元素,直到指向最后一个元素
- 不断调用next方法就可以实现遍历元素的效果了
next返回结果
- 每次调用next方法,都会返回所指向数据中的成员信息,包含value和done两个属性
- value属性是当前成员的值,done属性是布尔值,表示遍历是否结束
demo: 自定义迭代器
改写思路
- 数组默认iterator接口例如
arr = ['a','b','c']
- 实际内部相当于
{0:'a',1:'b',2:'c',length:3,[Symbol.iterator]: function}
- 自定义迭代器就是内部实现属性
[Symbol.iterator]
并返回{next:function}
对象
// 1. 探究默认迭代器
const arr = ['a','b','c'] // 数组
const iter = arr[Symbol.iterator] // 迭代器方法
const iterResult = arr[Symbol.iterator]() // 执行迭代器返回值
// TEST
console.log('arr=',arr)
console.log('iter=',iter)
console.log('iterResult',iterResult)
// arr= (3) ['a', 'b', 'c'] prototype包含属性 Symbol(Symbol.iterator): ƒ values()
// iter= ƒ values() { [native code] }
// iterResult Array Iterator {} prototype包含属性 next: ƒ next()
// 2. object 默认是不可以被遍历的
name: 'abc',
cities:[ 'London', 'New York', 'Tokyo']
}
for (const v of obj) {
console.log('v=',v)
}
// 报错: Uncaught TypeError: obj is not iterable
// 3. 自定义object内部迭代器,遍历object内部数组
const obj = {
name: 'abc',
cities:[ 'London', 'New York', 'Tokyo'],
[Symbol.iterator](){
let index = 0;
let _self = this;
return {
next: function(){
if(index >= _self.cities.length){
return {
value:undefined,done:true}
}else{
const result = {
value: _self.cities[index], done:false}
index++
return result
}
}
}
}
}
for (const v of obj) {
console.log('v=',v)
}
// v= London
// v= New York
// v= Tokyo