for...of的实现底层——迭代器

news/2025/1/13 3:06:49/

在MDN官网学习for...of的时候,会发现for...of是这么描述的:for...of语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,这句话的意思告诉我们不能for...of遍历普通对象,因为普通对象不是一个可迭代对象(iterable)。

那么问题来了,什么是可迭代对象?

可迭代对象,就是说可以通过某种方式逐个访问其中的元素。在JavaScript中,如字符串、数组、Set 对象、Map 对象等都是可迭代对象。通俗点说,可迭代对象就像是一串有序的数据组成的序列,可以通过循环或其他方式按序访问其中的每个数据。

怎样成为可迭代对象?

一个对象要成为可迭代对象,必须实现一个叫做Symbol.iterator的方法,该方法返回一个迭代器对象(Iterator),该迭代器对象有一个名为 next()的方法,这个方法被调用后会返回一个包含 done和 value 属性的对象。done 属性用于是否更多的元素需要返回,value 属性是下一个元素的值。每次 next()方法的调用都会返回下一个元素的值,调用完毕之后,done 返回 true 表示迭代已经结束。

怎么自己模拟一个迭代器?

简单的迭代器的实现:

function makeIterator(array) {let nextIndex = 0;return {next: function () {return nextIndex < array.length ?{ value: array[nextIndex++], done: false } :{ done: true };}};
}
// 使用迭代器遍历数组
let iterator = makeIterator([1, 2, 3]);
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {done: true}

上述代码中,makeIterator() 函数返回一个迭代器对象,其中包含一个 next() 方法。next() 方法每次被调用时,都会返回一个包含 value 和 done 两个属性的对象。其中,value 属性保存的是迭代器对象当前返回的值,done 属性表示迭代器对象是否已经遍历完所有元素。在上述示例中,调用 makeIterator([1, 2, 3]) 返回一个迭代器对象,通过反复调用 next() 方法,可以依次访问数组 [1, 2, 3] 中的每一个元素。

什么是迭代器?

在ES6中,迭代器(Iterator)是一种可以通过遍历操作逐个访问集合中元素的机制。它是一种通用的接口和一组规范,可以通过实现附加到任何对象上,从而使得这些对象支持迭代操作。通俗地说,可以把迭代器看作是一种访问集合元素的方式,它提供了一种标准的遍历数据结构的方式。将其传统的理解方式放到JS中的常见数据类型,比如字符串、数组、Map等对象上,则可以通过 for…of 语句来进行遍历。

Iterator的作用?

  1. 为各种数据结构,提供一个统一的、简便的访问接口;
  2. 使得数据结构的成员能够按某种次序排列;
  3.  ES6 创造了一种新的遍历命令for...of循环,Iterator 接口主要供for...of循环

ES6 规定,默认的 Iterator 接口部署在数据结构的 Symbol.iterator 属性,或者说,一个数据结构只要具有 Symbol.iterator 属性,就可以认为是“可遍历的”(iterable)。

总结:在 JavaScript 中,可迭代对象是指实现了Iterable 接口的对象,该接口包括一个默认的迭代器方法 Symbol.iterator(),该方法返回一个迭代器对象(Iterator),该迭代器对象包含一个 next() 方法,用于返回序列中的下一个值。例如,数组、字符串、Map、Set 等数据结构都是可迭代对象。for...of 循环只能用于遍历实现了 Iterable 接口的对象,并且执行循环时会自动调用该对象的  Symbol.iterator() 方法获取迭代器对象。因此,对于无法返回迭代器对象的对象,for...of 循环是无法使用的。


http://www.ppmy.cn/news/246433.html

相关文章

NBA季后赛对阵图

https://nba.stats.qq.com/playoffs/

nba球星大全

科比布莱恩特&#xff0c;湖人总冠军

韦德高清图片壁纸下载

韦德高清图片壁纸下载这是一款以NBA篮球巨星被誉为闪电侠的德文韦德为主角的高清壁纸。德文韦德&#xff0c;美国职业篮球运动员&#xff0c;司职得分后卫&#xff0c;2003年参加NBA选秀在第五顺位被迈阿密热火选中&#xff0c;职业生涯至今已带领热火队夺得两次总冠军&#xf…

NBA球星信息查询 需求描述 以下是一段包括球员信息的文本,要求编写一个程序,让用户能按照自己喜欢的球队查询其所有球员信 息,并格式化打印出来。 “Carmelo Anthony,Portland

题目&#xff1a; NBA球星信息查询 需求描述 以下是一段包括球员信息的文本&#xff0c;要求编写一个程序&#xff0c;让用户能按照自己喜欢的球队查询其所有球员信 息&#xff0c;并格式化打印出来。 "Carmelo Anthony,Portland Trail Blazers,SF;Anthony Davis,Los Ang…

找了个篮球宝贝女友,我用Python爬取了1000张他喜欢的NBA球星图片送给她

大家好&#xff0c;我是IT界搬运工。 女朋友快过生日了&#xff0c;不知道送啥礼物【绝对不是因为我抠】&#xff0c;想着她非常喜欢打篮球&#xff0c;篮球球衣她很多个了&#xff0c;应该也不会缺【不会是因为篮球贵】&#xff0c;那我就用技术白嫖点东西送给她吧&#xff0c…

一些NBA球星的Twitter

[sizemedium]在NBA圣诞大战之际&#xff0c;闲着没事上Twitter逛了一下&#xff0c;发现NBA里很多球员都有Twitter账号&#xff0c;我找了几个&#xff0c;发出来&#xff0c;大家可以follow.感觉应该不会是假的。 艾弗森的&#xff1a;[url]http://twitter.com/alleniverson[/…

NBA表格_NBA球星大排位16—季后赛荣誉汇总

《NBA球星大排位》1—开篇必读阅读前请先阅读《开篇必读》《NBA球星大排位》13—季后赛①总论《NBA球星大排位》14—季后赛②2019赛季分析《NBA球星大排位》15—季后赛③“王朝”的领袖到底是谁&#xff1f; 本节将是全文中最重要的一节&#xff0c;也将是所占比例(权重)最大的…

杜克大学出来的NBA球星有哪些?

公牛&#xff1a;罗尔邓 、克里斯杜洪 魔术&#xff1a; JJ里迪克 老鹰&#xff1a;谢尔顿威廉姆斯 爵士&#xff1a;卡洛斯布泽尔 火箭&#xff1a;肖恩巴蒂尔 灰熊&#xff1a;达迪琼斯 快船&#xff1a;埃尔顿布兰德、 科里马盖蒂 步行者&#xff1a;迈克邓利维. 湖…