ES6 Iterator笔记（摘抄至阮一峰的ECMAScript 6入门）

mayaohua 发布于2019-08-20 18:19 / 1147人阅读

摘要：也就是说，遍历器对象本质上，就是一个指针对象。执行这个函数，就会返回一个遍历器。一个对象如果要有可被循环调用的接口，就必须在的属性上部署遍历器生成方法原型链上的对象具有该方法也可。后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。

Iterator的遍历过程

创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员信息。具体来说，就是返回一个包含value和 done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

数据结构的默认Iterator接口

在ES6中，有些数据结构原生具备Iterator接口（比如数组），即不用任何处理，就可以被for...of循环遍历，有些就不行（比如对象）。原因在于，这些数据结构原生部署了Symbol.iterator属性，另外一些数据结构没有。凡是部署了Symbol.iterator属性的数据结构，就称为部署了遍历器接口。调用这个接口，就会返回一个遍历器对象。

Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。

一个对象（Object）如果要有可被for...of循环调用的Iterator接口，就必须在Symobol.iterator的属性上部署遍历器生成方法（原型链上的对象具有该方法也可）。

    class RangeIterator {
        // 构造方法
        constructor (start, stop) {
            this.value = start
            this.stop = stop
        }
        
        // 返回Symbol对象的iterator属性，这是一个预定好的、类型为Symbol的特殊值，所以要放在方括号内。
        [Symbol.iterator] () {
            return this
        }
        
        next () {
            var value = this.value
            if (value < this.stop) {
                this.value++
                return {
                    done: false,
                    value: value
                }
            }
            return {
                done: true,
                value: undefined
            }
        }
    }
    
    function range (start, stop) {
        return new RangeIterator(start, stop)
    }
    
    for (var value of range(0, 3)) {
        console.log(value)
    }

调用Iterator接口的场合

解析赋值

对数组和Set结构进行解构赋值时，会默认调用Symbol.iterator方法。

扩展运算符

扩展运算符（...）也会调用默认的iterator接口

只要某个数据结构部署了iterator接口，就可以对它使用扩展运算符，将其转为数组。

yield*

yield*后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。

其他场合

由于数组的遍历会调用遍历器接口，所以任何接收数组作为参数的场合，其实都调用了遍历器接口。

云服务器 GPU云服务器 ECMAScript 6 ES6入门 es6-系列 java开发入门笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84345.html

JS学习笔记 - 模块化

摘要：在开发大型的项目中，可能会使用到管理的模块化工具。说道，学习过的同学会比较熟悉，是服务器模块的规范，采用了这个规范。可能是未来模块化解决方案的首选。本文章记录本人在学习 JavaScript 中理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。在开发大型的web项目中，可能会使用到管理js的模块化工具。但是在前端轮子漫天飞的时代。那一款js模块化工具真正适合我...

CntChen 2019-08-22 10:57 评论0 收藏0
（for in）遍历键名和（for of）遍历键值，这种说法严谨吗？

摘要：但也可用于数组遍历，返回的值是数组的索引，因为，严格来说，数组也是一个对象，所对应的属性是每个值的索引。只遍历对象自身的和继承的可枚举的属性摘自阮一峰入门对象扩展一章。为新增遍历方法。 [1] const arr = [7, 8, 9]; const obj = { a: 4, b: 5, c: 6 }； [2] for (let v in arr){ console.l...

Labradors 2019-08-23 12:01 评论0 收藏0
《ECMAScript 6 入门》读书笔记

摘要：阮一峰老师开源作品。书上的示例代码可以通过在线网站代码调试工具调试。阮一峰老师开源作品。书上的示例代码可以通过在线网站代码调试工具 JS Bin 调试。作用域作用域链每个变量或函数通过执行环境 (execution context) 定义了其有权访问的其他数据，决定了他们各自的行为；全局执行环境是最顶层的执行环境，根据宿主环境的不同，表示全局执行环境的对象也不同：在浏览...

qieangel2013 2019-08-20 15:21 评论0 收藏0
一次掌握 JavaScript ES5 到 ES8 数组内容

摘要：可选到该位置前停止读取数据，默认等于数组长度。找出第一个符合条件的数组元素，参数是一个回调函数，所有数组元素依次执行该回调函数，直到找出第一个返回值为的元素，然后返回该元素。回调函数可以接受三个参数，依次为当前的值当前的位置和原数组。 ECMAScript 5.1 中提供的数组方法 ECMA-262/5.1 规范判断是否是数组 Array.isArray ( arg ) // fal...

baiy 2019-08-21 17:29 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

zxhaaa 2019-08-22 16:11 评论0 收藏0