ES6中Iterator接口的代码示例讲解

2020-11-27 来源：爱问旅游网

本篇文章给大家带来的内容是关于ES6中Iterator接口的代码示例讲解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

es6中，操作某些数据结构（array object map set）时，怎么用一个统一的方法操作，Iterator接口实现了这样的功能

1.Iterator在数组中的应用

{
 let arr = ['hello', 'world'];
 // 数组内部实现了iterator接口，所以直接调用[Symbol.iterator]()
 let map = arr[Symbol.iterator]();
 console.log(map.next()); // {value: "hello", done: false}
 console.log(map.next()); // {value: "world", done: false}
 console.log(map.next()); // {value: undefined, done: true}
 // value 表示数组元素，done表示循环是否有下一步状态，true:没有下一步了，false:循环没有结束
}

2.自定义Iterator接口

{
 // object没有内置iterator接口，自定义iterator接口，让obj也可以使用for...of
 let obj = {
 start: [1,2,3],
 end: [4,5,6],
 // 声明iterator接口方法
 [Symbol.iterator]() {
 // 先遍历start，再遍历end
 let arr = this.start.concat(this.end);
 let index = 0;
 // 返回next()
 return {
 next() {
 if (index < arr.length) {
 return {
 value: arr[index++],
 done: false
 }
 } else {
 return {
 value: arr[index++],
 done: true
 }
 }
 }
 }
 }
 };
 // for...of 实现的原理就是不断调用Iterator接口
 // 通过 for...of 验证接口是否配置成功，如果没有配置成功，object就无法使用 for...of循环
 for (let key of obj) {
 console.log(key); // 1 2 3 4 5 6
 }
}

3.for...of循环

{
 // 数组内部实现了iterator接口，所以可以直接使用for...of循环
 let arr = ['hello', 'world'];
 for (let value of arr) {
 console.log(value); // hello world
 }
}

ican 26 发布于超级有温度的代码

1 天前发布

【ES6入门13】：Iterator

前端

es6

javascript

14 次阅读 · 读完需要 6 分钟