js中的迭代器iterator

标题首先让我们了解一下迭代器 iterator 是什么

迭代器（iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数
据结构只要部署iertator接口，就可以完成便遍历操作
1. ES6创造了一种新的遍历命令 for…of循环，iterator接口主要供for…of消费
2. 原声具备iterator接口的数据(可用for…of循环)
a. Array
b. Arguments
c. Set
d. Map
e. String
f. TypeArray
g. NodeList
3. 工作原理
a. 创建一个指针对象，指向当前数据结构的起始位置
b. 第一次调用对象的next方法，指针自动指向数据结构的第
一个成员
c. 接下来不断的调用next方法，指针一直往后移动，直到指
向最后一个成员
d. 每调用next方法返回一个包含value和done属性的对象，
当value的值为undefined时，done的值为true，当done的值为
true时，调用终止

举个栗子 for of iterator实现原理

 obj ={
        name:"张三",
        age:[66,11,12,3,12,1,2231,3,2,123,1,3,2],
        //这里的Symbol.iterator 就代表着内置的 iterator方法
        [Symbol.iterator](){
           let index = 0
            return {
                next:()=>{
                    if(index < this.age.length){
                        index++
                        //这里的value就代表着每次返回的结果
                        return {values:this.age[index-1],done:false}
                    }else{
                        //一直到循环遍历完
                        return {values:undefined,done:true}
                    }
                }
            }
        }
    }
    	// 声明变量接受每次所return出来的值
        let item = obj[Symbol.iterator]()
        console.log(item.next()) //第一次打印结果 66
        console.log(item.next()) //以此类推
        一直到最后返回结果 undefined done true结束 

话不多说上图

具体实现代码就是这些 话不多说 下面来谈谈Generator

Generator 生成器 这玩意是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同

生成器其实就是一个特殊的函数，异步编程 以往都是纯回调函数

上代码

4 function * gen(){
5 console.log("hello world")
6 yield '1111111';
7 yield '2222222';
8 yield '3333333';
9 }
10 let iterator = gen();
11 iterator.next();
12 console.log(iterator.next());
13 console.log(iterator.next());
14 console.log(iterator.next());
15 console.log(iterator.next());
16
17
18 //生成器案例
19 // 定时器 1s后控制台输出111 间隔2s后控制台输出222 再间隔3s后控制台输出333
20 //原始写法 回调地狱
21 setTimeout(() => {
22 console.log(111);
23 setTimeout(() => {
24 console.log(222);
25 setTimeout(() => {
26 console.log(333);
27 },3000)
28 },2000)
29 },1000)
30
31 //生成器写法
32 //先定义要分阶段执行的每个函数
33 function one(){
34 setTimeout(()=>{
35 console.log(111)
36 //在每一个阶段函数中分别调用next方法，用来执行下一个阶段函数
37 iterator.next();
 },1000)
39 }
40 function two(){
41 setTimeout(()=>{
42 console.log(222)
43 iterator.next();
44 },2000)
45 }
46 function three(){
47 setTimeout(()=>{
48 console.log(333)
49 iterator.next();
50 },3000)
51 }
52 //定义一个生成器函数 分别调用各个阶段函数
53 function * gen(){
54 yield one();
55 yield two();
56 yield three();
57 }
58 //调用生成器函数
59 let iterator = gen();
60 iterator.next(); //先执行一次next方法的调用

每一次调用 都会调用yield 后面定义的内容

这就是 for of 具体实现代码步骤