(精华)2020年7月3日 JavaScript高级篇 ES6(Iterator迭代器)

为什么要有iterator

// Map Set 等数据结构 需要一个统一的接口去处理 iterator就是提供了这么一个机制

作用

// 数据部署了iterator接口 就可以用for ... of 循环遍历

for…of 循环的遍历过程的本质

// for...of 循环遍历的过程 // 1 创建一个指针对象 指向数据的初始位置 iterator就是一个指针对象 // 2 第一次调用指针对象的next() 可以将指针指向第一个成员 // ..... // 直到结束 // !!!! 每一次调用指针对象的时候每次调用next()方法 会返回 value 指的是值 done是布尔值 用来标识遍历是否完成 const arr = [1,2] function makeIterator(array){ let nextIndex = 0; return { next:function(){ return nextIndex < array.length ? { value:array[nextIndex++], done:false } :{ value:undefined, done:true } } } } let res = makeIterator(arr) console.log(res.next()); console.log(res.next()); console.log(res.next()); console.log(res.next());

Iterator接口部署在数据结构的Symbol.iterator属性

// 重中之重 let arr1 = [1,2,3,4,5] // let iter = arr1[Symbol.iterator]() // console.log(iter.next()); // console.log(iter.next()); // console.log(iter.next()); // console.log(iter.next()); // console.log(iter.next()); // console.log(iter.next()); // console.log(iter.next()); // console.log(iter.next()); // console.log(iter.next());

原生具备Iterator接口的数据结构

具有iterator接口 Array Map Set String

对象不具备Iterator接口 可以手动部署迭代器接口 让其可以用for…of 循环遍历

// 想让对象也可以通过for...of 循环遍历 let obj = { data:[1,2,3,4], [Symbol.iterator](){ let index = 0 let that = this return { next(){ if(index<that.data.length){ return { value:that.data[index++], done:false } }else{ return { value:undefined, done:true } } } } } } for (let i of obj ){ console.log(i); }