详解简单易懂的 ES6 Iterators 指南和示例


Posted in Javascript onSeptember 24, 2019

本文旨在分析理解 Iterators。 Iterators 是 JS中的新方法,可以用来循环任意集合。 在ES6中登场的Iterators。因其可被广泛使用,并且已在多处场景派上用场,我们将从概念上理解迭代器是什么,以及在何处使用它们和示例。我们还将看到它在JS 中的一些实现。

简介

假设有这样数组

const myFavouriteAuthors = [
 'Neal Stephenson',
 'Arthur Clarke',
 'Isaac Asimov', 
 'Robert Heinlein'
];

在某些情况下,希望返回数组中的所有单独值,以便在屏幕上打印它们、操作它们或对它们执行某些操作。

如何处理? 简单方法就是使用 for, while, for-of 方法。

如下:

详解简单易懂的 ES6 Iterators 指南和示例

现在,假设你拥有一个自定义数据结构来保存所有authors

详解简单易懂的 ES6 Iterators 指南和示例

myFavouriteAuthors 是一个对象,它包含另一个对象 allAuthorsallAuthors 包含三个数组,其中包含 fictionscienceFictionfantasy

现在,如果要求你循环遍历 myFavouriteAuthors 以获得所有的author,你的方法是什么? 你可能会尝试一些循环组合来获得所有数据。

但是,如果你这样做了 ——

for (let author of myFavouriteAuthors) { 
 console.log(author)
}
// TypeError: {} is not iterable

你将得到一个类型错误,说明该对象不可迭代。让我们看看什么是可迭代的,以及如何使对象可迭代。

可迭代对象与迭代器 (Iterables and Iterators)

在上一节中看到了问题,从我们的自定义对象中获取所有的author 是不容易的。我们需要某种方法,通过它我们可以有序地获取内部数据。

我们在 myFavouriteAuthors 中添加一个返回所有作者的方法 getAllAuthors。如:

详解简单易懂的 ES6 Iterators 指南和示例

这是一个简单的方法。它帮我们完成了获取所有author的功能。但是,这种实现可能会出现一些问题:

  • getAllAuthors 的名称非常具体。如果其他人正在创建自己的 myFavouriteAuthors,他们可能会将其命名为retrieveAllAuthors
  • 作为开发人员,我们总是需要知道返回所有数据的特定方法,在本例中,它被命名为getAllAuthors
  • getAllAuthors 返回的是字符串数组,如果另一个开发人员以这种格式返回一个对象数组,该怎么办:
[ {name: 'Agatha Christie'}, {name: 'J. K. Rowling'}, ... ]

开发人员必须知道返回所有数据的方法的确切名称和返回类型。

如果我们规定方法的名称和它的返回类型是固定不变的呢?

让我们将这个方法命名为 --- iteratorMethod

ECMA 也采取了类似的步骤来标准化在定制对象上循环的过程。但是,ECMA 没有使用名称 iteratorMethod,而是使用名称 Symbol.iterator。

Symbols 提供的名称是唯一的,不能与其他属性名称冲突。同时,Symbol.iterator 返回一个名为迭代器的对象,这个迭代器将拥有一个名为next的方法,该方法将返回一个具有键值为 valuedone 的对象。

值键 value 包含当前值,它可以是任何类型的,done 是布尔值,它表示是否获取了所有的值。

下图可以帮助建立可迭代对象、迭代器和next之间的关系,这种关系称为迭代协议。

详解简单易懂的 ES6 Iterators 指南和示例

根据Axel Rauschmayer博士的《探索JS》一书:

可迭代是一种数据结构,它希望使其元素对外部可访问,通过实现一个关键字是Symbol.iterator的方法来实现,该方法是迭代器的工厂,也就是说,它将创建迭代器。迭代器是一个指针,用于遍历数据结构的元素,我们将使用computed property语法来设置这个键,如下:

使用对象可迭代

因此,正如我们在上一节学到的,我们需要实现一个名为Symbol.iterator的方法

详解简单易懂的 ES6 Iterators 指南和示例

在第4行,我们创建迭代器。它是一个定义了next方法的对象。next方法根据step变量返回值。在第25行,我们检索iterator,27 行,我们调用next方法,直到 done的值为 true。

这正是for-of循环中发生的事情,for-of接受一个迭代器,并创建它的迭代器,它会一直调用next(),直到 done为 true。

JavaScript中可迭代对象(iterable)

JS 中的很多对象都是可迭代的。它们可能不是很好的察觉,但是如果仔细检查,就会发现迭代的特征:

  • Arrays and TypedArrays
  • Strings —— 遍历每个字符或Unicode代码点
  • Maps —— 遍历其键-值对
  • Sets —— 遍历元素
  • arguments  —— 函数中类似数组的特殊变量
  • DOM elements (Work in Progress)

JS中使用迭代的其他一些结构是:

for-of -- for-of 循环需要一个可迭代的对象,否则,它将抛出一个类型错误。

for (const value of iterable) { ... }

数组解构 -- 由于可迭代性,会发生析构。让我们来看看:

const array = ['a', 'b', 'c', 'd', 'e'];
const [first, ,third, ,last] = array;

等价于:

const array = ['a', 'b', 'c', 'd', 'e'];
const iterator = array[Symbol.iterator]();
const first = iterator.next().value
iterator.next().value // Since it was skipped, so it's not assigned
const third = iterator.next().value
iterator.next().value // Since it was skipped, so it's not assigned
const last = iterator.next().value

扩展操作符(…)

const array = ['a', 'b', 'c', 'd', 'e'];

const newArray = [1, ...array, 2, 3];

等价于:

const array = ['a', 'b', 'c', 'd', 'e'];
const iterator = array[Symbol.iterator]();
const newArray = [1];
for (let nextValue = iterator.next(); nextValue.done !== true; nextValue = iterator.next()) {
 newArray.push(nextValue.value);
}
newArray.push(2)
newArray.push(3)

Promise.allPromise.race 接受可迭代对象

Maps 和 Sets

让 myFavouriteAuthors 可迭代

下面是一个实现,它使myFavouriteAuthors 具有可迭代性:

const myFavouriteAuthors = {
 allAuthors: {
  fiction: [
   'Agatha Christie', 
   'J. K. Rowling',
   'Dr. Seuss'
  ],
  scienceFiction: [
   'Neal Stephenson',
   'Arthur Clarke',
   'Isaac Asimov', 
   'Robert Heinlein'
  ],
  fantasy: [
   'J. R. R. Tolkien',
   'J. K. Rowling',
   'Terry Pratchett'
  ],
 },
 [Symbol.iterator]() {
  // 获取数组中的所有作者
  const genres = Object.values(this.allAuthors);
  
  // 存储当前类型和索引
  let currentAuthorIndex = 0;
  let currentGenreIndex = 0;
  
  return {
   // Implementation of next()
   next() {
    // 根据当前的索引获取对应的作者信息
    const authors = genres[currentGenreIndex];
    
    // 当遍历完数组 authors是,oNotHaveMoreAuthors 为 true
    const doNothaveMoreAuthors = !(currentAuthorIndex < authors.length);
    if (doNothaveMoreAuthors) {
     // 加一继续访问下一个
     currentGenreIndex++;
     // 重置
     currentAuthorIndex = 0;
    }
    
    // 如果所有 genres 都遍历完了结,那么我们需要告诉迭代器不能提供更多的值。
    const doNotHaveMoreGenres = !(currentGenreIndex < genres.length);
    if (doNotHaveMoreGenres) {
     return {
      value: undefined,
      done: true
     };
    }
    
    // 如果一切正常,从当genre 返回 作者和当前作者索引,以便下次,下一个作者可以返回。
    return {
     value: genres[currentGenreIndex][currentAuthorIndex++],
     done: false
    }
   }
  };
 }
};

for (const author of myFavouriteAuthors) {
 console.log(author);
}

console.log(...myFavouriteAuthors)

通过本文获得的知识,你可以很容易地理解迭代器是如何工作的,这种逻辑可能有点难以理解。因此,理解这个概念的最佳方法是多多敲死代码,多多验证!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
原生js实现放大镜效果
Jan 11 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 #Javascript
基于layui的下拉列表的数据回显方法
Sep 24 #Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 #Javascript
layui动态渲染生成select的option值方法
Sep 23 #Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 #Javascript
layui-select动态选中值的例子
Sep 23 #Javascript
layui多图上传实现删除功能的例子
Sep 23 #Javascript
You might like
php header Content-Type类型小结
2011/07/03 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
input的focus方法使用
2010/03/13 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
js实现点赞效果
2020/03/16 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
详解python while 函数及while和for的区别
2018/09/07 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
python绘制雪景图
2019/12/16 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
给同学的道歉信
2014/01/16 职场文书
市场部岗位职责
2015/02/12 职场文书
法定代表人免职证明
2015/06/24 职场文书
九年级数学教学反思
2016/02/17 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
TypeScript 内置高级类型编程示例
2022/09/23 Javascript