站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

十分钟搞懂什么是JavaScript迭代器1. 什么是迭代器 ?2. 自定义迭代器

时间:2021-12-26 [网络编程]作者:fabuyuan 浏览:8 次

本篇文章给大家带来了JavaScript中关于迭代器的相关知识,下面我们就一起来看一下什么是迭代器又怎样自定义迭代器,希望对大家有帮助。

十分钟搞懂什么是JavaScript迭代器1. 什么是迭代器 ?2. 自定义迭代器  2

1. 什么是迭代器 ?

  • 迭代器就是一种接口机制,为各种不同的数据结构提供统一访问的机制。(即为了让一些不支持遍历的数据结构可遍历)

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

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

十分钟搞懂什么是JavaScript迭代器1. 什么是迭代器 ?2. 自定义迭代器  2


2. 自定义迭代器

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

首先,它需要满足两点:

  • 可迭代协议
  • 迭代器协议

可迭代协议

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

如何满足可迭代协议 ?

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

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

迭代器协议

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

如何满足迭代器协议 ?

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

  • done:
    如果迭代器可以产生序列中的下一个值,则为 false。
    如果迭代器已将序列迭代完毕,则为 true
  • value
    迭代器返回的值。done 为 true 时可省略

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

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

  • 成为可迭代对象,即有一个 Symbol.iterator 属性
    (即可迭代协议:Symbol.iterator)
  • 该迭代器对象返回一个 next() 方法,这个 next() 方法返回一个包含valuedone 属性的对象
    (即迭代器协议:return { next() { return { value, done } })
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迭代器1. 什么是迭代器 ?2. 自定义迭代器  2

【相关推荐:javascript学习教程

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

本文标签:  JavaScript

转载请注明来源:十分钟搞懂什么是JavaScript迭代器1. 什么是迭代器 ?2. 自定义迭代器

本文永久链接地址:https://www.adminjie.com/post/6807.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • oracle中not的用法是什么

      oracle中not的用法是什么

      在oracle中,not用于对指定的条件取反,当指定的条件为真时,not的结果就是假,当指定的条件为假时,not的结果就是真,语法为“Selectwhere...

    • Vue3中5个可以提高开发效率的小知识【整理分享】

      Vue3中5个可以提高开发效率的小知识【整理分享】

      本篇文章给大家聊聊Vue3开发,整理分享5个可以提高开发效率的小知识,让你在Vue3的项目开发中更加丝滑,希望对大家有所帮助!最近鼓捣了一下Vue3+...

    • php5.6.31如何编译安装

      php5.6.31如何编译安装

      php5.6.31编译安装的方法:1、添加epel源;2、安装依赖;3、下载并解压php5.6.31;4、修改php-fpm.conf;5、启动php-fpm即...

    • oracle怎样进行空值替换

      oracle怎样进行空值替换

      在oracle中,可利用nvl()函数进行空值替换,该函数用于从两个表达式中返回一个非null值,语法为“nvl(字段值,替换值)”;当字段值的结果为null值...

    • oracle数据库有什么用

      oracle数据库有什么用

      oracle数据库的作用:1、oracle可以按照数据结构来组织、存储和管理数据;2、oracle能够适用于大型、中型和微型计算机的关系数据库管理。本教程操作环...

    热门文章