• 技术文章 >web前端 >js教程

    十分钟搞懂什么是JavaScript迭代器

    长期闲置长期闲置2021-12-22 18:20:23转载446
    本篇文章给大家带来了JavaScript中关于迭代器的相关知识,下面我们就一起来看一下什么是迭代器又怎样自定义迭代器,希望对大家有帮助。

    1. 什么是迭代器 ?

    最常见的就是Array迭代器,按顺序返回数组中的值。

    let arr = [1,2,3,4,5];for (let val of arr) {
        console.log(val);}

    在这里插入图片描述


    2. 自定义迭代器

    那么我们如何实现迭代器呢?

    首先,它需要满足两点:

    可迭代协议

    可迭代协议允许 JavaScript 对象定义或定制它们的迭代行为

    如何满足可迭代协议 ?

    要成为可迭代对象, 一个对象必须实现 @@iterator 方法。
    这意味着对象(或者它原型链上的某个对象)必须有一个键为@@iterator 的属性,可通过常量 Symbol.iterator 访问该属性

    也就是说要想满足可迭代协议,那么你的对象需要有一个键名为Symbol.iterator的属性,使其成为可迭代对象。

    迭代器协议

    迭代器协议定义了产生一系列值(无论是有限个还是无限个)的标准方式。
    当值为有限个时,所有的值都被迭代完毕后,则会返回一个默认返回值。

    如何满足迭代器协议 ?

    你的对象需要至少实现一个next()方法,这个方法返回一个迭代器对象IteratorResult。这个迭代器对象包含两个属性done和·value

    那么我们接下来开始自定义一个迭代器

    由前文所讲,要想自定义迭代器,需要符合以下两个条件:

    let colors = {
        blue : "蓝色",
        green : "绿色",
        yellow : "黄色"}

    colors 现在是一个不可迭代对象,我们想使用 for…of 对其进行遍历,那么就可以自定义迭代器。
    接下来,开始实现:

    colors[Symbol.iterator] = function() {
    	let keys = Object.keys(colors);
    	// 如果用 let keys = Reflect.ownKeys(colors),keys 就会包括一些不可枚举的属性
    	// 那么后面的 len 要减一,减去Symbol.iterator这个属性
    	// 根据实际情况选择使用
    	let len = keys.length;
    	let index = 0;
    	
    	return {
    	    next : function() {
    	        if (index < len) {
    	            return {
    	                value : colors[keys[index++]],
    	                done : false
    	            }
    	        }
    	        return { done : true }
    	    }
    	}}

    让我们对其验证一下:

    for (let val of colors) {
        console.log(val);}

    在这里插入图片描述

    【相关推荐:javascript学习教程

    以上就是十分钟搞懂什么是JavaScript迭代器的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除
    专题推荐:JavaScript
    上一篇:javascript语句必须嵌套在什么标签中 下一篇:聊聊Node.js中如何实现Stream流(可读、可写、双工和转换流)
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• JavaScript怎样替换html代码• 详解JavaScript基础之对象(整理分享)• 如何利用Javascript发送GET/POST请求?(实例详解)• javascript怎样实现网页在线时钟功能• 十分钟搞懂什么是JavaScript生成器(整理分享)
    1/1

    PHP中文网