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

JavaScript基本功之迭代器(iterator)的使用和原理

news 2025/6/6 12:59:37

[[toc]]

iterator是什么

痛点

JavaScript提供了四种数据集合，分别是array、object、map和set。
这四种数据集合的数据结构各不相同，但都可以被循环遍历，背后都离不开iterator(迭代器)的支撑。

总结

Iterator是种机制，也可说是种接口，它为各种不同的数据结构提供了统一的访问机制。
任何数据结构只要配置了 Iterator 接口，就可以完成遍历操作

demo:for-of机制

ES6 创造了新的遍历for…of循环
iterator接口主要供for…of消费
也就是说: 数组内置了iterator属性，因此成为可迭代对象，从而可被for…of遍历

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