首页前端开发JavaScript十分钟搞懂什么是JavaScript迭代器

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

时间2024-01-31 02:58:03发布访客分类JavaScript浏览772
导读:收集整理的这篇文章主要介绍了十分钟搞懂什么是JavaScript迭代器,觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章给大家带来了JavaScript中关于迭代器的相关知识,下面我们就一起来看一下什么是迭代器又怎样自定义迭代器,希...
收集整理的这篇文章主要介绍了十分钟搞懂什么是JavaScript迭代器,觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章给大家带来了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

  • 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学习教程

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

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: 聊聊Node.js中如何实现Stream流(...下一篇:javascript语句必须嵌套在什么标...猜你在找的JavaScript相关文章 html font标签如何设置字体大小?html font标签属性用法介绍2022-05-16vue3+TypeScript+vue-router的使用方法2022-04-16vue3获取当前路由地址2022-04-16如何利用React实现图片识别App2022-04-16JavaScript展开运算符和剩余运算符的区别详解2022-04-16微信小程序中使用vant框架的具体步骤2022-04-16Vue elementUI表单嵌套表格并对每行进行校验详解2022-04-16如何利用Typescript封装本地存储2022-04-16微信小程序中wxs文件的一些妙用分享2022-04-16JavaScript的Set数据结构详解2022-04-16 其他相关热搜词更多phpjavapython程序员loadpost-format-gallery

若转载请注明出处: 十分钟搞懂什么是JavaScript迭代器
本文地址: https://pptw.com/jishu/593390.html
C中scanf()和gets()之间的区别 javascript语句必须嵌套在什么标签中

游客 回复需填写必要信息