迭代器是什么?
迭代器(iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 iterator 接口,就可以完成遍历操作
ES6创造了一种新的遍历方法for…of循环,iterator 接口主要供 for…of 使用
原生中具备 iterator 接口的数据(可用 for of 遍历)
Array 、Arguments 、Set 、Map 、 String 、TypedArray 、 NodeList
// 声明一个数组
const arr = [1,2,3,4,5]
// 使用for...of
for(let v of arr) {
console.log(v) //1 2 3 4 5
}
console.log(arr)
工作原理:
1.创建一个指针对象,指向当前数据结构的起始位置
const arr = [1,2,3,4,5]
let iterator = arr[Symbol.iterator]()
console.log(iterator)
2.第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员
const arr = [1,2,3,4,5]
let iterator = arr[Symbol.iterator]()
// 调用对象的next方法
console.log(iterator.next())
3.接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员
const arr = [1,2,3,4,5]
let iterator = arr[Symbol.iterator]()
// 调用对象的next方法
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
4.每调用 next 方法返回一个包含 value 和 done属性对象
返回value与done
那我们什么时候需要用到迭代器呢?
当我们需要自定义遍历数据的时候,要用到迭代器
// 声明一个对象
const obj = {
name:"张三",
age:18,
schoolmate:["李四","王五","赵六"]
}
// 使用for...of遍历对象
for(let v of obj) {
console.log(v) //报错 obj is not iterable
}
我们发现我们for…of遍历不了对象,那我们就是想用for…of遍历对象怎么办
我们想取到对象里数组的每一个值
// 声明一个对象
const obj = {
name:"张三",
age:18,
schoolmate:["李四","王五","赵六"],
// 添加方法
[Symbol.iterator](){
// 索引变量
let index = 0
// 存一个this
let _this = this
// 返回一个对象
return {
// next方法
next:function(){
if(index<_this.schoolmate.length){
// 需要控制,要不然一直为false一直执行
const result = {value:_this.schoolmate[index],done:false}
// 下标自增
index++
// 返回结果
return result
}else {
// // 如果我index大于等于了这个长度
return {value:undefined,done:true}
}
}
}
}
}
// 使用for...of遍历对象
for(let v of obj) {
console.log(v) //李四 王五 赵六
}
感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!