返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中Iterator迭代器接口和循环
  • 212
分享到

JavaScript中Iterator迭代器接口和循环

2024-04-02 19:04:59 212人浏览 薄情痞子
摘要

目录javascript的迭代器(Iterator)介绍for...of循环与for...in循环JavaScript的迭代器(Iterator)介绍 迭代器是数据结构遍历的一种机制

JavaScript的迭代器(Iterator)介绍

迭代器是数据结构遍历的一种机制(或者是什么我也不太懂的行业术语),为数据结构定义了统一的遍历规则。 迭代器(Iterator)主要是提供for...of使用,或者说,数据结构只有实现了迭代器(Iterator)接口才能使用for...of进行遍历数据,当一种数据结构没有实现迭代器(Iterator)接口时,去使用for...of操作,就会被抛出异常Uncaught TypeError: xxx is not iterable

JavaScript的迭代器(Iterator)的接口规范和操作过程:

  • 迭代器被调用时,返回一个指针对象,指针对象中必须包含一个next()的方法,每次调用next()方法,都会返回一个代表当前成员的信息对象,具有valuedone两个属性。value可为任意数据类型,done则是一个布尔类型,当调用next的方法时返回的对象中的done属性为false时,表示还可以继续进行遍历,当done属性为true时,表示遍历结束(没有的东西遍历了)了。
  • 迭代器(Iterator)对象的可选属性return()方法和throw()方法,也就是说当我们要自己去实现迭代器(Iterator)的时候,迭代器里必须要有next()方法,而return()方法和throw()是否要实现是可选的。而自己实现迭代器(Iterator)时,不管是next()return()还是throw()方法必须有返回值并且是对象,否则进行遍历的时候会抛出异常Uncaught TypeError: Iterator result xxx is not an object
  • 自己实现迭代器,只要给数据结构或者对象添加[Symbol.iterator]属性即可,其值必须是一个函数,返回一个只针对象,需遵循第2点的规范。为什么必须是[Symbol.iterator]的属性名,因为JavaScript的定义中,寻找遍历器时就是用这个字段,这也是一个标准规范。

下面是自己实现迭代器的演示代码:

const obj = {a: "age 18", b: 2};
// 实现迭代器
obj[Symbol.iterator] = function () {
    const keys = Object.keys(obj);
    let keyIndex = 0;

    return {
        next() {
            if (keys.length === 0 || keyIndex >= keys.length) {
                return {
                    value: undefined,
                    done: true
                }
            }

            const key = keys[keyIndex],
                value = [key, obj[key]];
            keyIndex += 1;

            return {
                value,
                done: false
            }
        }
    };
}

// 使用for...of进行遍历
for (let [key, value] of obj) {
    console.log(`${key}--${value}`)
}
// a--age 18
// b--2

返回参数简写,当返回正常值的时候,done字段可以省略,当循环结束的时候,value可以省略。但是注意不能两个都不写,不然会死循环,而且必须要有条件结束的操作,不然也会死循环,就像递归一样,一定要有条件结束的操作

Number.prototype[Symbol.iterator] = function () {
    let that = +this,
        i = that < 0 ? that : 0;
    that = that < 0 ? 0 : that;

    return {
        next() {
            if (i <= that) {
                const value = i;
                i += 1;
                return { value };
            }
            
            return { done: true };
        }
    };
};

for (const item of 20) {
    console.log(item);
}
// 数组的扩展运算符也是调用迭代器的哦
console.log([...5]);// [0, 1, 2, 3, 4, 5]

迭代器的可选参数return()throw()

return()方法是在遍历中断的时候会调用,如使用了break关键字中断或者抛出了异常都会调用这个方法。return()方法必须有返回参数并且要求是object类型的数据,否则就会抛出异常Uncaught TypeError: Iterator result undefined is not an object,至于object里内容要求是什么,我测了一下,毫无影响,返回空对象也没问题。

const obj = {
    size: 5,
    [Symbol.iterator]() {
        return {
            // 这里用箭头函数为的是可以直接使用this
            next: () => {
                if (this.size >= 0) {
                    const value = this.size;
                    this.size -= 1;
                    return {
                        value
                    };
                }

                return {
                    done: true
                };
            },
            return() {
                console.log("中断了");
                return { done: true };
                // 返回以下内容照样不会有问题,但是最好不这么操作,因为代码具有语义化才能更好的阅读
                // return {};
                // return new Date();
            }
        };
    }
};

for (const item of obj) {
    if (item < 3) {
        break;// 中断了
    }
    console.log(item);
}

throw()方法在迭代器中基本用不到,而是配合Generator使用,这里就不做过多的叙述。

原生具备 Iterator 接口的数据结构如下:

  • Array
  • Map
  • Set
  • String
  • TypedArray
  • 函数的 arguments 对象
  • nodeList 对象

for...of循环与for...in循环

上面已经详细的说明了迭代器(Iterator)主要是提供for...of循环使用,所以for...of循环时调用的是迭代器(Iterator),而循环的值是由实现的迭代器(Iterator)而定,而for...in循环是循环键值。

const arr = ["a", "b", "c"];
// 原生的数组迭代器(Iterator)的实现遍历时返回的是每一个元素
for (const item of arr) {
    console.log(item);
    // a
    // b
    // c
}
// for...in 返回的是key,这里是数组,key就是索引
for (const key in arr) {
    console.log(key);
    // 0
    // 1
    // 2
}

还有一个更直观的区别。for...of只是根据迭代器(Iterator)实现的内容返回结果,所以就不会遍历不在范围的东西,而for...in会把所有的键遍历出来。

const arr = ["a", "b", "c"];
arr.testValue = 1;

for (const item of arr) {
    console.log(item);
    // a
    // b
    // c
}
for (const item in arr) {
    console.log(item);
    // 0
    // 1
    // 2
    // testValue
}

到此这篇关于JavaScript中Iterator迭代器接口与循环的文章就介绍到这了,更多相关JavaScript Iterator 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript中Iterator迭代器接口和循环

本文链接: https://lsjlt.com/news/150584.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript中Iterator迭代器接口和循环
    目录JavaScript的迭代器(Iterator)介绍for...of循环与for...in循环JavaScript的迭代器(Iterator)介绍 迭代器是数据结构遍历的一种机制...
    99+
    2024-04-02
  • Javascript的迭代器和迭代接口详解
    目录1,什么是迭代器2,自定义迭代接口3,原生语言的迭代总结1,什么是迭代器 每一个可迭代对象都对应着一个可迭代接口[Symbol.iterator]; [Symbol.iterat...
    99+
    2024-04-02
  • Java深入分析Iterator迭代器与foreach循环的使用
    目录一、Iterator迭代器接口1. 使用Iterator接口遍历集合元素2. Iterator接口的方法3. 迭代器的执行原理3.1 代码演示3.2 代码执行过程解析4. Ite...
    99+
    2024-04-02
  • JavaList接口与Iterator接口及foreach循环使用解析
    目录List接口ArrayList集合LinkedList集合Iterator接口foreach循环List接口 List接口继承Collection接口,属于单列集合,在List集...
    99+
    2024-04-02
  • 白话解释 迭代器(ITERATOR)和
    来源:本人博客 前言 迭代器和生成器可能对于一些人来说知道是什么东东,但是并没有比较深入的了解,那么今天,就跟随我来了解一下这两者的概念,关系及优点,我将使用python中的迭代器和生成器作为演示,如果你不懂python没关系,明白了概念...
    99+
    2023-01-31
    白话 迭代 ITERATOR
  • Python循环和迭代器怎么使用
    今天小编给大家分享一下Python循环和迭代器怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了...
    99+
    2024-04-02
  • Java List接口与Iterator接口及foreach循环使用的方法
    这篇文章主要介绍“Java List接口与Iterator接口及foreach循环使用的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Java List接口与Iterator...
    99+
    2023-06-30
  • Python中Iterator迭代器的使用杂谈
    迭代器是一种支持next()操作的对象。它包含一组元素,当执行next()操作时,返回其中一个元素;当所有元素都被返回后,生成一个StopIteration异常。 >>>a=[1,2,...
    99+
    2022-06-04
    杂谈 迭代 Python
  • Java中Iterator(迭代器)的用法详解
    Java迭代器(Iterator)是 Java 集合框架中的一种机制,它提供了一种在不暴露集合内部实现的情况下遍历集合元素的方法。Java Iterator(迭代器)不是一个集合,它...
    99+
    2023-05-19
    Java Iterator迭代器使用 Java Iterator Java 迭代器
  • Java中Iterator迭代器的使用详解
    目录Iterator接口迭代器的实现原理增强for练习1:遍历数组练习2:遍历集合Iterator接口 在程序开发中,经常需要遍历集合中的所有元素。针对这种需求,JDK专门提供了一个...
    99+
    2022-11-13
    Java Iterator迭代器 Java Iterator Java 迭代器
  • java中迭代器和for循环的优劣势有哪些
    这篇文章给大家分享的是有关java中迭代器和for循环的优劣势有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。常用的java框架有哪些1.SpringMVC,Spring Web MVC是一种基于Java的实...
    99+
    2023-06-14
  • JavaIterator迭代器与foreach循环代码解析
    目录一、 Iterator迭代器接口1. 使用 Iterator 接口遍历集合元素2. Iterator接口的方法3. 迭代器的执行原理3.1 代码演示3.2 代码执行过程解析4. ...
    99+
    2024-04-02
  • Python中for循环怎么定义迭代
    本文小编为大家详细介绍“Python中for循环怎么定义迭代”,内容详细,步骤清晰,细节处理妥当,希望这篇“Python中for循环怎么定义迭代”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。Python的 for...
    99+
    2023-06-30
  • Python中for循环可迭代对象迭代器及生成器源码学习
    目录问题:1. 迭代1.1 可迭代对象Iterable1.2 迭代器Iterator1.3 for循环1.3.1 iter()方法和next()方法1.3.2 iter()和__it...
    99+
    2024-04-02
  • Java迭代器双重循环如何写
    在Java中,可以使用嵌套循环来实现迭代器的双重循环。下面是一个示例代码:javaList matrix = new ArrayLi...
    99+
    2023-10-18
    Java
  • JavaScript前端迭代器Iterator与生成器Generator怎么使用
    这篇文章主要介绍“JavaScript前端迭代器Iterator与生成器Generator怎么使用”,在日常操作中,相信很多人在JavaScript前端迭代器Iterator与生成器Generator怎么使...
    99+
    2024-04-02
  • JavaScript中的迭代器和可迭代对象与生成器
    目录1. 什么是迭代器?1.1 迭代器的基本实现1.2 迭代器的封装实现2. 什么是可迭代对象2.1 原生可迭代对象(JS内置)2.1.1 部分for of 演示2.1.2 查看内置...
    99+
    2024-04-02
  • VUE 循环遍历进阶:善用迭代器和过滤器
    在 Vue.js 开发中,循环遍历数组或对象是常见需求。除了使用基本的 v-for 指令,您还可以使用迭代器和过滤器来提升遍历的灵活性、优化性能并增强代码的可读性。 迭代器 迭代器为循环遍历提供了一种强大的自定义选项。它允许您在遍历过程中...
    99+
    2024-04-02
  • python中实现迭代器(iterator)的方法示例
    概述 迭代器是访问集合元素的一种方式。迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束。迭代器只能往前不会后退。 延迟计算或惰性求值 (Lazy evaluation) 迭代器不要求你事先准...
    99+
    2022-06-04
    示例 迭代 方法
  • Iterator迭代器如何在Java项目中使用
    Iterator迭代器如何在Java项目中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。什么是迭代器  在Java中,有很多的数据容器,对于这些的操作有很多的共性。Java...
    99+
    2023-05-31
    java iterator ava
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作