【JS014】ES6的学习笔记之迭代器（Iterator）

日期：2021年8月31日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006
如果您想了解更多有关javascript的知识，那么请点《javascript学习的奇妙之旅》

---

---

一、迭代器初识

说明：迭代器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，那么就是可迭代的，可以完成遍历操作。

• 遍历语法：for...of...
• 遍历条件：部署Iterator接口的数据结构
• 原生具备Iterator接口的数据：

序号	数据
1	Array
2	Arguments
3	Set
4	Map
5	String
6	TypedArray
7	NodeList

let arr = [1,2,3,4];
console.log(arr);
//控制台输出：(4) [1, 2, 3, 4]

console.log(arr[Symbol.iterator]());
//控制台输出：Array Iterator {}

for(let item of arr){
    console.log(item);
};
//控制台输出：
//1
//2
//3
//4

二、迭代器工作原理

• 创建一个指针对象，指向当前数据结构的起始位置；
• 第一次调用对象的next方法，指针自动指向数据结构的第一个成员；
• 接下来不断调用next方法，指针一直往后移动，直到只想最后一个成员；
• 每次调用next方法，将会返回一个包含value和done属性的对象；
• 当指针指向最后一个成员，再次调用next方法，将会返回一个包含value=undefined和done=true属性的对象，其中done=true表示已经完成工作，value值则为未定义undefined；

let arr = [11,22,33,44];

for(let item of arr){
    console.log(item);
};
//控制台输出：
//11
//22
//33
//44

//（0）迭代器
let iterator = arr[Symbol.iterator]();
console.log(iterator);       //Array Iterator {}

//（1）第一次调用,指向数据结构的第一个成员
console.log(iterator.next());//{value: 11, done: false}

//（2）不断调用，指针不断往后移动
console.log(iterator.next());//{value: 22, done: false}
console.log(iterator.next());//{value: 33, done: false}
console.log(iterator.next());//{value: 44, done: false}

//（3）超过最后一个成员
console.log(iterator.next());//{value: undefined, done: true}

三、迭代器实现数据结构的自定义遍历

任何数据结构只要部署Iterator接口，那么就是可迭代的，for...of...可以完成遍历操作

• 对象原生不支持for...of...遍历
  

o = {
    name:"张三",
    age:18,
    sex:"female"
}

//（1）for...in...不可以遍历
for(let k in o){
    console.log(k,o[k]);
}
//控制台输出：
//name 张三
//age 18
//sex female

//（2）for...of...不可以遍历
for(let v of o){
    console.log(v);
}
//控制台输出：
//Uncaught TypeError: o is not iterable

• 对象实现Iterator接口，可以for...of...遍历

o = {
    name:"张三",
    age:18,
    sex:"female",
    [Symbol.iterator](){
        //部署Iterator接口

        let aryKey = Object.keys(o);
        //console.log(aryKey);
        //(3) ["name", "age", "sex"]
        
        let index = 0;
        return {
            next:function(){
                if(index<aryKey.length){
                    //正在进行遍历工作
                    const result = {value:aryKey[index],done:false}
                    index++;
                    return result;
                }else{
                    //已经完成了遍历工作
                    return {value:undefined,done:true}
                }
            }
        };

    }
}

for(let k of o){
    console.log(k,o[k]);
}
//控制台输出：
//name 张三
//age 18
//sex female

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/120015456