PublishedbyArfatSalman本文旨在分析和理解Iterators。迭代器是JavaScript中的新方法，可用于循环遍历任意集合。在ES6中首次亮相的迭代器。它非常受欢迎，因为它可以广泛使用，并且在许多场景中都派上了用场。我们从概念上理解迭代器，并通过示例告诉在哪里使用它们。和。我们还将看到它在JavaScript中的一些实现。简介如果您有以下数组-constmyFavouriteAuthors=['NealStephenson','ArthurClarke','IsaacAsimov','RobertHeinlein'];有时，您需要访问此数组中的每个值，将它们显示在屏幕上，操作它们，或对它们执行某些操作。如果我问你，你会怎么处理？这很简单，您会说——我只是循环遍历它们，使用for__、while__、for-of或任何这些循环方法。如果不是以前的数组，所有的作者都存储在一个自定义的数据结构中，例如——现在，myFavouriteAuthors是一个包含对象allAuthors的对象，allAuthors包含三个数组，对应的键值为fiction、scienceFiction和fantasy.现在，如果您需要遍历myFavouriteAuthors以获取所有作者，您的方法是什么？您可以继续尝试一些循环组合以获取所有数据。然而，如果你这样做--for(letauthorofmyFavouriteAuthors){console.log(author)}//TypeError:{}isnotiterable你会得到一个TypeError对象是不可迭代的。让我们来看看迭代是什么以及如何使对象可迭代。在本文结尾处，您将了解如何在自定义对象上使用for-of循??环，在这种情况下，在myFavouriteAuthors上。Iterables（可迭代对象）和Iterators（迭代器）在上一节中看到了问题。没有办法简单地从我们的自定义对象中获取所有作者。我们想要一种可以有序地呈现所有内部数据的方法。让我们向myFavouriteAuthors添加一个方法getAllAuthors以返回所有作者。像这样-这是一种简单的方法。它实现了获得所有作者的直接目标。但是，此实现可能会出现一些问题。例如-名称getAllAuthors非常具体。如果其他人正在创建自己的myFavouriteAuthors，他们可能会将其命名为retrieveAllAuthors。作为开发人员，我们总是需要知道返回所有数据的具体方法。在本例中，它被命名为getAllAuthors。getAllAuthors返回一个包含所有作者的字符串数组。如果另一个开发人员以这种格式返回对象数组怎么办——[{name:'AgathaChristie'},{name:'J.K.Rowling'},...]开发人员必须知道，return所有数据的方法的确切名称和返回类型。如果我们制定一个规则，方法的名称及其返回类型是固定且不可更改的呢？让我们将此方法命名为-iteratorMethod。ECMA采取了类似的步骤来标准化循环自定义对象的过程。但是，ECMA使用Symbol.iterator而不是iteratorMethod。符号提供的名称是唯一的，不能与其他属性名称冲突。此外，Symbol.iterator将返回一个名为iterator的对象。该迭代器将有一个名为next的方法，该方法将返回一个具有键value和done的对象，其中键值将包含当前值。它可以是任何类型。done是一个布尔值。表示是否所有的值都取完了。下图可能有助于建立iterables、iterators和next之间的关系。这种关系称为迭代协议。直到done为真。JavaScript中的Iterables许多东西在JavaScript中都是可迭代的。它可能不是即时的等可见的，但如果你仔细观察，你可以看到iterables。这些是可迭代对象-数组和TypedArraysStrings-遍历每个字符或Unicode代码点。地图-遍历键值组合集合-遍历它们的元素参数-函数中的特殊数组变量DOM元素（在实现中）其他在JS中使用迭代——for-of循??环——for-of循??环需要迭代。否则会抛出TypeError.for(constvalueofiterable){...}数组的解构——由于iterable而导致解构。让我们看看如何实现它。代码：constarray=['a','b','c','d','e'];const[first,,third,,last]=array;相对于constarray=['a','b','c','d','e'];constiterator=array[Symbol.iterator]();constfirst=iterator.next().valueiterator.next().value//因为跳过了，所以没有赋值constthird=iterator.next().valueiterator.next().value//因为跳过了，所以没有赋值constlast=iterator.next().value延展符(…)代码：constarray=['a','b','c','d','e'];constnewArray=[1,...array,2,3];可以写成constarray=['a','b','c','d','e'];constiterator=array[Symbol.iterator]();constnewArray=[1];for(letnextValue=iterator.next();nextValue.done!==true;nextValue=iterator.next()){newArray.push(nextValue.value);}newArray.push(2)newArray.push(3)Promise.all和Promise.race接受Promises上的替代。Maps和SetsMap的构造函数将[key,value]形式的迭代器转换为Map，Set的构造函数将可迭代元素转换为Set——constmap=newMap([[1,'one'],[2,'two']]);map.get(1)//oneconstset=newSet(['a','b','c]);set.has('c');//trueto要理解生成器函数，首先要理解迭代器。使myFavouriteAuthors可迭代这是使myFavouriteAuthors可迭代的实现。一个可迭代的实现示例从本文中，您可以轻松理解迭代器的工作原理。它的逻辑可能有点难以理解，所以，我对代码进行了注释。然而，吸收和理解这些概念的最佳方式是让这段代码在浏览器或节点中运行。如有任何问题，欢迎回复！参考：AxelRauschmayer博士的ExploringJS[MDN上的迭代器协议](https://developer.mozilla.org...
