【ES6入门13】：Iterator

chnmagnus 发布于2019-08-23 12:34 / 3157人阅读

摘要：中，操作某些数据结构时，怎么用一个统一的方法操作，接口实现了这样的功能在数组中的应用数组内部实现了接口，所以直接调用表示数组元素，表示循环是否有下一步状态，没有下一步了，循环没有结束自定义接口没有内置接口，自定义接口，让也可以使用声明接口方

es6中，操作某些数据结构（array object map set）时，怎么用一个统一的方法操作，Iterator接口实现了这样的功能

1.Iterator在数组中的应用

{
    let arr = ["hello", "world"];
    // 数组内部实现了iterator接口，所以直接调用[Symbol.iterator]()
    let map = arr[Symbol.iterator]();
    console.log(map.next()); // {value: "hello", done: false}
    console.log(map.next()); // {value: "world", done: false}
    console.log(map.next()); // {value: undefined, done: true}
    // value 表示数组元素，done表示循环是否有下一步状态，true:没有下一步了，false:循环没有结束
}

2.自定义Iterator接口

{
    // object没有内置iterator接口，自定义iterator接口，让obj也可以使用for...of
    let obj = {
        start: [1,2,3],
        end: [4,5,6],
        // 声明iterator接口方法
        [Symbol.iterator]() {
            // 先遍历start，再遍历end
            let arr = this.start.concat(this.end);
            let index = 0;
            // 返回next()
            return {
                next() {
                    if (index < arr.length) {
                        return {
                            value: arr[index++],
                            done: false
                        }
                    } else {
                        return {
                            value: arr[index++],
                            done: true
                        }
                    }
                }
            }
        }
    };
    // for...of 实现的原理就是不断调用Iterator接口
    // 通过 for...of 验证接口是否配置成功，如果没有配置成功，object就无法使用 for...of循环
    for (let key of obj) {
        console.log(key); // 1 2 3 4 5 6
    }
}

3.for...of循环

{
    // 数组内部实现了iterator接口，所以可以直接使用for...of循环
    let arr = ["hello", "world"];
    for (let value of arr) {
        console.log(value); // hello world
    }
}

GPU云服务器云服务器 ES6入门 Iterator Iterator模式 ES6

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

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

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

摘要：也就是说，遍历器对象本质上，就是一个指针对象。执行这个函数，就会返回一个遍历器。一个对象如果要有可被循环调用的接口，就必须在的属性上部署遍历器生成方法原型链上的对象具有该方法也可。后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。 ES6 Iterator笔记（摘抄至阮一峰的ECMAScript 6入门） Iterator的遍历过程创建一个指针对象，指向当前数据结构的起始位...

mayaohua 2019-08-20 18:19 评论0 收藏0
【重温基础】13.迭代器和生成器

摘要：迭代器和生成器将迭代的概念直接带入核心语言，并提供一种机制来自定义循环的行为。本文主要会介绍中新增的迭代器和生成器。属性本身是函数，是当前数据结构默认的迭代器生成函数。本文是重温基础系列文章的第十三篇。今日感受：每次自我年终总结，都会有各种情绪和收获。系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1.语法和数据类型【重温基础】2.流...

ymyang 2019-08-23 14:32 评论0 收藏0
2017-08-13 前端日报

摘要：前端日报精选从源码看数组排序的诡异问题显示网格和隐式网格的区别打包工具完全入门指南使用之前要在里学的件事工作机制第部分中文深入理解中的代码片段，你能猜对几个掘金深入理解笔记中的类深入理解笔记迭代器和生成器最新版构建分享小王子 2017-08-13 前端日报精选从 V8 源码看 JS 数组排序的诡异问题显示网格和隐式网格的区别JS打包工具rollup——完全入门指南使用 Redux ...

Eastboat 2019-08-21 11:54 评论0 收藏0
ES6简单总结（搭配简单的讲解和小案例）

摘要：方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的方法类似。不可以当作构造函数，也就是说，不可以使用命令，否则会抛出一个错误。本身是一个构造函数，用来生成数据结构。返回一个布尔值，表示该值是否为的成员。清除所有成员，没有返回值。在学习es6的过程中，为了方便自己复习，以及查看，对api做了一个极简用例介绍。如有错误多多指正。一 let和const 1.let (1)一个大...

joyqi 2019-08-26 11:31 评论0 收藏0