迭代器与 for of的使用和原理

最新推荐文章于 2023-02-13 16:46:40 发布
最新推荐文章于 2023-02-13 16:46:40 发布
阅读量339 收藏 2
点赞数 1

640?wx_fmt=png

起源

一段标准的 for 循环代码：

var colors = ["red", "green", "blue"];	
for (var i = 0, len = colors.length; i < len; i++) {	
    console.log(colors[i]);	
}

看着很简单，但是再回顾这段代码，实际上我们仅仅是需要数组中元素的值，但是却需要提前获取数组长度，声明索引变量等，尤其当多个循环嵌套的时候，更需要使用多个索引变量，代码的复杂度就会大大增加，比如我们使用双重循环进行去重：

function unique(array) {	
    var res = [];	
    for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {	
        for (var j = 0, resLen = res.length; j < resLen; j++) {	
            if (array[i] === res[j]) {	
                break;	
            }	
        }	
        if (j === resLen) {	
            res.push(array[i]);	
        }	
    }	
    return res;	
}

为了消除这种复杂度以及减少循环中的错误(比如错误使用其他循环中的变量)，ES6 提供了迭代器和 for of 循环共同解决这个问题。

迭代器

所谓迭代器，其实就是一个具有 next() 方法的对象，每次调用 next() 都会返回一个结果对象，该结果对象有两个属性，value 表示当前的值，done 表示遍历是否结束。

我们直接用 ES5 的语法创建一个迭代器：

function createIterator(items) {	
    var i = 0;	
    return {	
        next: function() {	
            var done = i >= item.length;	
            var value = !done ? items[i++] : undefined;	
            return {	
                done: done,	
                value: value	
            };	
        }	
    };	
}	
// iterator 就是一个迭代器对象	
var iterator = createIterator([1, 2, 3]);	
console.log(iterator.next()); // { done: false, value: 1 }	
console.log(iterator.next()); // { done: false, value: 2 }	
console.log(iterator.next()); // { done: false, value: 3 }	
console.log(iterator.next()); // { done: true, value: undefined }

for of

除了迭代器之外，我们还需要一个可以遍历迭代器对象的方式，ES6 提供了 for of 语句，我们直接用 for of 遍历一下我们上节生成的遍历器对象试试：

var iterator = createIterator([1, 2, 3]);	
for (let value of iterator) {	
    console.log(value);	
}

结果报错 TypeError: iterator is not iterable，表明我们生成的 iterator 对象并不是 iterable(可遍历的)。

那什么才是可遍历的呢？

其实一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。

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

举个例子：

const obj = {	
    value: 1	
};	
for (value of obj) {	
    console.log(value);	
}	
// TypeError: iterator is not iterable

我们直接 for of 遍历一个对象，会报错，然而如果我们给该对象添加 Symbol.iterator 属性：

const obj = {	
    value: 1	
};	
obj[Symbol.iterator] = function() {	
    return createIterator([1, 2, 3]);	
};	
for (value of obj) {	
    console.log(value);	
}	
// 1	
// 2	
// 3

由此，我们也可以发现 for of 遍历的其实是对象的 Symbol.iterator 属性。

默认可遍历对象

然而如果我们直接遍历一个数组对象：

const colors = ["red", "green", "blue"];	
for (let color of colors) {	
    console.log(color);	
}	
// red	
// green	
// blue

尽管我们没有手动添加 Symbol.iterator 属性，还是可以遍历成功，这是因为 ES6 默认部署了 Symbol.iterator 属性，当然我们也可以手动修改这个属性：

var colors = ["red", "green", "blue"];	
colors[Symbol.iterator] = function() {	
    return createIterator([1, 2, 3]);	
};	
for (let color of colors) {	
    console.log(color);	
}	
// 1	
// 2	
// 3

除了数组之外，还有一些数据结构默认部署了 Symbol.iterator 属性。

所以 for...of 循环可以使用的范围包括：

  • 数组

  • Set

  • Map 类数组对象，如 arguments 对象、DOM NodeList 对象 Generator 对象

字符串

模拟实现 for of 其实模拟实现 for of 也比较简单，基本就是通过 Symbol.iterator 属性获取迭代器对象，然后使用 while 遍历一下：

function forOf(obj, cb) {	
    let iterable, result;	
    if (typeof obj[Symbol.iterator] !== "function")	
        throw new TypeError(result + " is not iterable");	
    if (typeof cb !== "function") throw new TypeError("cb must be callable");	
    iterable = obj[Symbol.iterator]();	
    result = iterable.next();	
    while (!result.done) {	
        cb(result.value);	
        result = iterable.next();	
    }	
}

内建迭代器

为了更好的访问对象中的内容，比如有的时候我们仅需要数组中的值，但有的时候不仅需要使用值还需要使用索引，ES6 为数组、Map、Set 集合内建了以下三种迭代器：

entries() 返回一个遍历器对象，用来遍历[键名, 键值]组成的数组。对于数组，键名就是索引值。keys() 返回一个遍历器对象，用来遍历所有的键名。values() 返回一个遍历器对象，用来遍历所有的键值。以数组为例：

var colors = ["red", "green", "blue"];	
for (let index of colors.keys()) {	
    console.log(index);	
}	
// 0	
// 1	
// 2	
for (let color of colors.values()) {	
    console.log(color);	
}	
// red	
// green	
// blue	
for (let item of colors.entries()) {	
    console.log(item);	
}	
// [ 0, "red" ]	
// [ 1, "green" ]	
// [ 2, "blue" ]

Map 类型与数组类似，但是对于 Set 类型需要注意以下：

var colors = new Set(["red", "green", "blue"]);	
for (let index of colors.keys()) {	
    console.log(index);	
}	
// red	
// green	
// blue	
for (let color of colors.values()) {	
    console.log(color);	
}	
// red	
// green	
// blue	
for (let item of colors.entries()) {	
    console.log(item);	
}	
// [ "red", "red" ]	
// [ "green", "green" ]	
// [ "blue", "blue" ]

Set 类型的 keys() 和 values() 返回的是相同的迭代器，这也意味着在 Set 这种数据结构中键名与键值相同。

而且每个集合类型都有一个默认的迭代器，在 for-of 循环中，如果没有显式指定则使用默认的迭代器。数组和 Set 集合的默认迭代器是 values() 方法，Map 集合的默认迭代器是 entries() 方法。

这也就是为什么直接 for of 遍历 Set 和 Map 数据结构，会有不同的数据结构返回：

const values = new Set([1, 2, 3]);	
for (let value of values) {	
    console.log(value);	
}	
// 1	
// 2	
// 3	
const values = new Map([["key1", "value1"], ["key2", "value2"]]);	
for (let value of values) {	
    console.log(value);	
}	
// ["key1", "value1"]	
// ["key2", "value2"]	
遍历 Map 数据结构的时候可以顺便结合解构赋值：	
const valuess = new Map([["key1", "value1"], ["key2", "value2"]]);	
for (let [key, value] of valuess) {	
    console.log(key + ":" + value);	
}	
// key1:value1	
// key2:value2

Babel 是如何编译 for of 的

我们可以在 Babel 的 Try it out 中查看编译的结果：

const colors = new Set(["red", "green", "blue"]);	
for (let color of colors) {	
    console.log(color);	
}

对于这样一段代码，编译的结果如下：

"use strict";	
var colors = new Set(["red", "green", "blue"]);	
var _iteratorNormalCompletion = true;	
var _didIteratorError = false;	
var _iteratorError = undefined;	
try {	
    for (	
        var _iterator = colors[Symbol.iterator](), _step;	
        !(_iteratorNormalCompletion = (_step = _iterator.next()).done);	
        _iteratorNormalCompletion = true	
    ) {	
        var color = _step.value;	
        console.log(color);	
    }	
} catch (err) {	
    _didIteratorError = true;	
    _iteratorError = err;	
} finally {	
    try {	
        if (!_iteratorNormalCompletion && _iterator.return) {	
            _iterator.return();	
        }	
    } finally {	
        if (_didIteratorError) {	
            throw _iteratorError;	
        }	
    }	
}

至少由编译的结果可以看出，使用 for of 循环的背后，还是会使用 Symbol.iterator 接口。

而这段编译的代码稍微复杂的地方有两段，一段是 for 循环这里：

for (	
    var _iterator = colors[Symbol.iterator](), _step;	
    !(_iteratorNormalCompletion = (_step = _iterator.next()).done);	
    _iteratorNormalCompletion = true	
) {	
    var color = _step.value;	
    console.log(color);	
}

跟标准的 for 循环写法有些差别，我们看下 for 语句的语法：

for (initialize; test; increment) statement;	
initialize、test 和 increment

三个表达式之间用分号分割，它们分别负责初始化操作、循环条件判断和计数器变量的更新。

for 语句其实就相当于：

initialize;	
while (test) {	
    statement;	
    increment;	
}

代码的逻辑为：先进行初始化，然后每次循环执行之前会执行 test 表达式，并判断表达式的结果来决定是否执行循环体，如果 test 计算结果为真值，则执行循环体中的 statement。最后，执行 increment 表达式。

而且值得注意的是，其实 for 循环中的三个表达式中任意一个都可以被忽略，不过分号还是要写的。

比如 for(;;)，不过这就是一个死循环……

比如：

var i = 0,	
    len = colors.length;	
for (; i < len; i++) {	
    console.log(colors[i]);	
}

又比如：

var i = 0,	
    len = colors.length;	
for (; i < len; ) {	
    i++;	
}

然后我们再来看 Babel 编译的这个 for 循环表达式：

for (	
    var _iterator = colors[Symbol.iterator](), _step;	
    !(_iteratorNormalCompletion = (_step = _iterator.next()).done);	
    _iteratorNormalCompletion = true	
) {	
    var color = _step.value;	
    console.log(color);	
}

用 while 的写法相当于：

var _iterator = colors[Symbol.iterator](),	
    _step;	
while (!(_iteratorNormalCompletion = (_step = _iterator.next()).done)) {	
    var color = _step.value;	
    console.log(color);	
    _iteratorNormalCompletion = true;	
}

是不是就好懂了很多呢，然后你就会发现，其实 _iteratorNormalCompletion = true 这句是完全没有必要的……

另外一段稍微复杂的代码是:

try {	
  ...	
} catch (err) {	
  ...	
} finally {	
  try {	
    if (!_iteratorNormalCompletion && _iterator.return) {	
      _iterator.return();	
    }	
  } finally {	
    ...	
  }	
}

因为 iteratorNormalCompletion = (step = _iterator.next()).done，所以 _iteratorNormalCompletion 表示的就是是否完成了一次完整的迭代过程，如果没有正常的迭代完成，并且迭代器有 return 方法时，就会执行该方法。

而之所以这么做，就要提到迭代器的 return 方法。

引用阮一峰老师的 ECMAScript 6 入门:

遍历器对象除了具有 next 方法，还可以具有 return 方法和 throw 方法。如果你自己写遍历器对象生成函数，那么 next 方法是必须部署的，return 方法和 throw 方法是否部署是可选的。

return 方法的使用场合是，如果 for...of 循环提前退出（通常是因为出错，或者有 break 语句或 continue 语句），就会调用 return 方法。如果一个对象在完成遍历前，需要清理或释放资源，就可以部署 return 方法。

我们可以举个例子：

function createIterator(items) {	
    var i = 0;	
    return {	
        next: function() {	
            var done = i >= items.length;	
            var value = !done ? items[i++] : undefined;	
            return {	
                done: done,	
                value: value	
            };	
        },	
        return: function() {	
            console.log("执行了 return 方法");	
            return {	
                value: 23333,	
                done: true	
            };	
        }	
    };	
}	
var colors = ["red", "green", "blue"];	
var iterator = createIterator([1, 2, 3]);	
colors[Symbol.iterator] = function() {	
    return iterator;	
};	
for (let color of colors) {	
    if (color == 1) break;	
    console.log(color);	
}	
// 执行了 return 方法

不过正如你在编译后的代码中看到，仅仅是在有 return 函数的时候执行了 return 函数而已，return 函数中返回的值其实并不生效……

但是你不返回值或者返回一个基本类型的值的话，结果又会报错……

TypeError: Iterator result undefined is not an object 这是因为 return 方法必须返回一个对象，而这又是 Generator 规范决定的……

总之如果是在浏览器中使用的话，return 函数的返回值其实并不生效 T^T

前端技术江湖，一个高质量、独特、务实的前端技术号

640?wx_fmt=png

zz_jesse
关注
Javascript中for..of快速遍历对象时用到的迭代器到底是个啥？
FengziTianYu的专栏
04-09 1631
一个菜鸡自己对着文档瞎琢磨，琢磨出来的玩意儿，鬼知道有多少漏洞...欢迎指正
Es6 for-of中的迭代器
zwy123z的博客
08-02 206
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录集合对象迭代器一、entries()迭代器二、values()迭代器三、keys()迭代器总结 集合对象迭代器 for-of循环每执行一次都会调用可迭代对象的next()方法，并将迭代器返回的结果对象的value属性存储在一个变量中，循环将持续执行这一过程直到返回对象的done属性的值为true 一、entries()迭代器 每次调用next()方法时，entries()迭代器都会返回一个数组，数组中的两个元素分别表示集合中每个
ES6 系列之迭代器与 for of
weixin_34122548的博客
07-10 215
起源 一段标准的 for 循环代码： var colors = ["red", "green", "blue"]; for (var i = 0, len = colors.length; i &lt; len; i++) { console.log(colors[i]); } 复制代码看着很简单，但是再回顾这段代码，实际上我们仅仅是需要数组中元素的值，但是却需要提前获取数组长度，声明索...
迭代器与for of
何小变
09-12 246
迭代 按照一定的顺序取出数据，无须知道数据的长度。 与循环的区别：迭代是不知道数据的长度，而循环是实现知道数据的长度的。 迭代的两个条件 能知道是否有下一个数据； 能拿到下一个数据。 迭代器 一个具有next()方法的对象，next方法返回下一个数据并且指示迭代是否完成 数组和类数组是迭代器。 迭代协议 含有Symbol.iterator属性（可迭代对象），且该属性的值是一个函数，函数的返回值是next()方法，next()方法的返回值是一个对象，对象中有两个属性（value：下一个属性的值，done：
JS 迭代器 和 for...of 循环
Ares5k
08-20 655
迭代器，Iterator接口，for...of 循环
javascript设计模式 – 迭代器模式原理与用法实例分析
11-20
在实际编程中，JavaScript的数组已经内置了迭代能力，例如，可以使用`for...of`循环或`Array.prototype.forEach()`等方法进行遍历，但这并不意味着迭代器模式失去了价值。在处理更复杂的集合结构或自定义数据结构时...
ES6 迭代器与可迭代对象的实现
10-17
本文将探讨ES6迭代器和生成器的实现机制，以及可迭代对象的内部原理和使用方法。 迭代器是一种特殊对象，它遵循特定的接口（iterator interface），这个接口要求有next方法，该方法返回一个包含两个属性的对象，即...
php和C#的yield迭代器实现方法对比分析
10-16
在PHP和C#中，yield的使用和其背后的工作原理有着明显的差异。 首先，我们要了解yield关键字的基本概念和作用。yield是一个用于简化迭代器实现的关键字，它允许函数或方法返回一个序列的值，每个值都可以在下一次...
for await of异步迭代器（ES9）
weixin_44011306的博客
06-27 4480
for await of异步迭代器for await of for await of 异步迭代器(for-await-of)：循环等待每个Promise对象变为resolved状态才进入下一步。 我们知道 for…of 是同步运行的，有时候一些任务集合是异步的，那这种遍历怎么办呢？ function Gen(time) { return new Promise(function(resolve, reject) { setTimeout(function() {
迭代器与生成器
qq_53841687的博客
07-19 1596
迭代器(lterator)是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署lterator接口，就可以完成遍历操作，ES6新增遍历方式for...of。原生具备lterator接口的数据有Array，Arguments，Set，Map，String，NodeList。...
ES6—迭代器：for... of 循环的原理是什么
gardenia的博客
05-17 192
迭代器的介绍： 迭代器（Iterator）是一种接口，为不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。 1.ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 使用 const role = ['狼人','预言家','村民','女巫'] // for...of 遍历的是 value for(let i of role){ console.log(i)//狼人,预言家,村民,女巫 } // f
迭代器.Iterator 和 for...of 循环
m0_57942863的博客
07-11 162
迭代器.Iterator 和 for...of 循环1.Iterator（遍历器）的概念2默认 Iterator 接口3.for...of 循环 1.Iterator（遍历器）的概念 JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。 遍历器（Iterator）
ES6新特性之迭代器与for-of循环
但愿人长久 千里共婵娟
05-03 949
ES6新特性：ofr-of循环与迭代器机制
for...of循环的使用
web前端开发
06-26 728
来源 | https://kai666666.com/2021/06/24/for-of循环的使用/for…of语句在可迭代对象（包括 Array，Map，Set，String，Typed...
JavaScript里迭代器的定义和使用
Baokuanqing的博客
12-20 328
在Javascrpt中用于对于一个对象或内建对象里每个属性的迭代。简单说就是遍历可迭代对象用的。可迭代是指可在for … of … 这个语法结构中遍历// 1. for..of 调用首先会调用这个： range [ Symbol . iterator ] = function() {// ……它返回迭代器对象（iterator object）： // 2. 接下来，for..of 仅与下面的迭代器对象一起工作，要求它提供下一个值 return {
ES6 迭代器(Iterator)和 for...of循环使用方法
hsany330的专栏
08-08 966
一、什么是迭代器？ 生成器概念在Java，Python等语言中都是具备的，ES6也添加到了JavaScript中。Iterator可以使我们不需要初始化集合，以及索引的变量，而是使用迭代器对象的 next 方法，返回集合的下一项的值，偏向程序化。 迭代器是带有特殊接口的对象。含有一个next()方法，调用返回一个包含两个属性的对象，分别是value和done，value表示当前位置的值，don...
前端真实面试题
沐小侠
06-30 201
1. 用过Symbol吗， 什么场景用？ 2. 迭代器是什么，怎么自定义迭代(forof), 异步迭代？ 3. Promise A+规范，手写all、race、 any、allsettled？ 4. 用过生成器吗，什么场景用？
ES6-阮一峰
最新发布
MichaelAn的博客
02-13 5897
ES6-阮一峰 ES6补充 0.浏览器中的ES6 方法一：引入文件相关js文件 <script src="traceur.js"></script> <script src="bootstrap.js"></script> <script type="mod...
详解for..of遍历可迭代对象
热门推荐
Army-海军的博客
05-29 1万+
主要讲解关于迭代对象的生成，怎么实现迭代器。for of 的使用
深入理解ES6：迭代器与可迭代对象
在ES6的Generator基础上，Promise和async/await语法也与迭代器密切相关，它们使得异步编程更加直观。通过`yield`关键字可以等待Promise的结果，而async函数本质上返回的是一个隐式的生成器迭代器： ```javascript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值