ES6新特性--迭代器

魔笛手7

已于 2023-09-01 11:48:06 修改

阅读量69

点赞数

分类专栏：前端文章标签： es6 数据结构前端迭代器数据遍历输出

于 2023-03-21 10:37:24 首次发布

本文链接：https://blog.csdn.net/u013185175/article/details/129682099

版权

前端专栏收录该内容

75 篇文章 9 订阅

订阅专栏

文章介绍了JavaScript中的Iterator接口，它是为各种数据结构提供统一遍历机制的关键。for...of循环是用于消费Iterator的主要方式。原生支持Iterator的数据结构包括数组、Arguments、Set、Map等。迭代器工作原理涉及创建指针对象，通过调用next方法遍历数据结构。此外，文章还展示了如何自定义对象的迭代器来遍历非原生支持的数据。

摘要由CSDN通过智能技术生成

迭代器概述

遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口(这里其实就是指Symbol.Iterator)，就可以完成遍历操作。

(1).ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费 (2).原生具备 iterator 接口的数据(可用 for of 遍历),具备了原生接口的有:array、Arguments 、set、map、string、Nodelist、TypedArray。

(3).看一个对象是否能够使用for...of...遍历，其实只需要看是否有Symbol.Iterator的接口即可。

const arr = ["刘备","关羽","张飞","赵云"];
//查看是否有Symbol的iterator
console.log(arr)

迭代器的工作原理

(1). 创建一个指针对象，指向当前数据结构的起始位置 (2).第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员 (3). 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员 (4).每调用 next 方法返回一个包含 value 和 done 属性的对象

const arr = ["刘备","关羽","张飞","赵云"];
            
//创建一个对象
let it = arr[Symbol.iterator]();
console.log(it.next())//刘备
console.log(it.next())//关羽
console.log(it.next())//张飞
console.log(it.next())//赵云
console.log(it.next())//done(是否完成),undefined

迭代器的基本使用

(1).使用for of遍历数组元素

const arr = ["刘备","关羽","张飞","赵云"];
            
//遍历键名称:for...in...
for(let s in arr){
   console.log("---" + s)//输出的是键名称:0,1,2,3
}
         
//遍历值得:for...of...
for(let s of arr){
   console.log("---" + s)//输出的是值内容:"刘备","关羽","张飞","赵云"
}

自定义遍历数据

这里如果是自定义的对象内容进行数据的遍历，就需要重写一个Symbol的iterator内容的遍历输入方法。

<script type="text/javascript">
            //自定义对象
            const stu = {
                name: '计算机班级',
                stus: [
                    "张三",
                    "李四",
                    "王五",
                    "赵六"
                ],
                //设置自定义迭代器内容
                [Symbol.iterator]() {
                    let index = 0;
                    let _this = this;
                    return {
                        next: function() {
                            if (index < _this.stus.length) {
                                const result = {
                                    value: _this.stus[index],
                                    done: false
                                }
                                index++;
                                return result;
                                
                            } else {
                                return {
                                    value: undefined,
                                    done: true
                                }
                            }
                        }
                    }
                }
            }
            
            //遍历输出
            for(let s of stu){
                console.log(s)
            }
 </script>