意见箱
恒创运营部门将仔细参阅您的意见和建议,必要时将通过预留邮箱与您保持联络。感谢您的支持!
意见/建议
提交建议

JavaScript迭代器如何理解,怎样实现自定义

来源:恒创科技 编辑:恒创科技编辑部
2024-01-22 15:01:59
本篇内容介绍了“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全局函有多少,怎么样应用 下一篇: 手机怎么远程登录云服务器?