一文带你了解ES6迭代器(iterator)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
一、迭代器(iterator)是什么?
迭代器(iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口,就可以完成遍历操作。 ES6创造了一种新的遍历命令for…of循环,iterator主要供for…of使用 原生具备了iterator接口的数据结构(可用for…of遍历) (1)Array (2)Arguments (3)Set (4)Map (5)String (6)TypedArray (7)NodeList
二、工作原理
1.创建一个指针对象,指向当前数据结构的起始位置 2.第一次调用对象的next方法,指针自动指向数据结构的第一个成员 3.接下来不断调用next方法,指针一直往后移,直到指向最后一个成员 4.每次调用next方法返回一个包含value和done属性的对象 注意 需要自定义遍历数据的时候,记得想到使用迭代器
代码如下(示例):
let obj = { name:"张三", age:18, arr:[1,2,3,4,"壹","贰","叁"] }
现在我们需要拿到obj对象里arr数组的数据 由于Object并没有内置iterator,所以我们使用for…of遍历时,控制台报错
let obj = { name:"张三", age:18, arr:[1,2,3,4,"壹","贰","叁"] } for(value of obj){ console.log(value) } //Uncaught TypeError: obj is not iterable
现在我们给obj对象加入iterator 代码如下(示例):
let obj = { name:"张三", age:18, arr:[1,2,3,4,"壹","贰","叁"], [Symbol.iterator](){ let index =0 let _this = this return { next:function(){ if(index<_this.arr.length){ const result={ value:_this.arr[index],done:false} index++ return result }else{ return { value:undefined,done:true} } } } } } for(value of obj){ console.log(value) } //1 2 3 4 "壹" "贰" "叁"
总结
当然还可以有很多方法能拿到obj对象中arr数组的数据,比如直接对obj.arr遍历,在这里只是提供一个优雅的方法。