JavaScript迭代器如何理解,怎样实现自定义
Admin 2022-07-29 群英技术资讯 735 次浏览
本篇内容介绍了“JavaScript迭代器如何理解,怎样实现自定义”的有关知识,在实际项目的操作过程或是学习过程中,不少人都会遇到这样的问题,接下来就让小编带大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
最常见的就是Array迭代器,按顺序返回数组中的值。
let arr = [1,2,3,4,5];for (let val of arr) {
console.log(val);}
那么我们如何实现迭代器呢?
首先,它需要满足两点:
可迭代协议允许 JavaScript 对象定义或定制它们的迭代行为
如何满足可迭代协议 ?
要成为可迭代对象, 一个对象必须实现 @@iterator 方法。
这意味着对象(或者它原型链上的某个对象)必须有一个键为@@iterator 的属性,可通过常量 Symbol.iterator 访问该属性
也就是说要想满足可迭代协议,那么你的对象需要有一个键名为Symbol.iterator的属性,使其成为可迭代对象。
迭代器协议定义了产生一系列值(无论是有限个还是无限个)的标准方式。
当值为有限个时,所有的值都被迭代完毕后,则会返回一个默认返回值。
如何满足迭代器协议 ?
你的对象需要至少实现一个next()方法,这个方法返回一个迭代器对象IteratorResult。这个迭代器对象包含两个属性done和·value。
那么我们接下来开始自定义一个迭代器
由前文所讲,要想自定义迭代器,需要符合以下两个条件:
Symbol.iterator 属性next() 方法,这个 next() 方法返回一个包含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);}
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!
js有多种数据类型(Number(数值)、String(字符串)、Boolean(布尔值)、Null、Undefined、Symbol、Object、函数等),在开发过程中难免需要判断数据类型,本文总结了四种判断方法给大家分享,需要的朋友可以参考一下
path.resolve([...paths])#Addedin:v0.3.4参数[...paths]: <String> 参数是一个路径序列或路径片段返回: <String>功能:该函数将一个路径序列或路径片段组合成一个绝对路径;path.resolve([path1][,
本篇文章给大家带来了关于JavaScript的相关知识,其中主要整理了事件监听的相关问题,包括了什么是事件监听、设置事件监听的方法等等内容,下面一起来看一下,希望对大家有帮助。
这篇文章主要为大家详细介绍了vue实现全选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008