The iterator protocol is used to define a standard way that an object produces a sequence of values. What that really means is you now have a process for defining how an object will iterate. This is done through implementing the .next()method.

How it Works

An object becomes an iterator when it implements the .next() method. The .next() method is a zero arguments function that returns an object with two properties:

  1. value : the data representing the next value in the sequence of values within the object
  2. done : a boolean representing if the iterator is done going through the sequence of values
    • If done is true, then the iterator has reached the end of its sequence of values.
    • If done is false, then the iterator is able to produce another value in its sequence of values.

Here’s the example from earlier, but instead we are using the array’s default iterator to step through the each value in the array.

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const arrayIterator = digits[Symbol.iterator](); console.log(arrayIterator.next());
console.log(arrayIterator.next());
console.log(arrayIterator.next()); /*
Object {value: 0, done: false}
Object {value: 1, done: false}
Object {value: 2, done: false}
*/
/*
* Programming Quiz: Make An Iterable Object
*
* Turn the `james` object into an iterable object.
*
* Each call to iterator.next should log out an object with the following info:
* - key: the key from the `james` object
* - value: the value of the key from the `james` object
* - done: true or false if there are more keys/values
*
* For clarification, look at the example console.logs at the bottom of the code.
*
* Hints:
* - Use `Object.keys()` to store the object's properties in an array.
* - Each call to `iterator.next()` should use this array to know which property to return.
* - You can access the original object using `this`.
* - To access the values of the original object, use `this` and the key from the `Object.keys()` array.
*/ const james = {
name: 'James',
height: `5'10"`,
weight: 185
}; james[Symbol.iterator] = function() {
var keys = Object.keys(james);
var nextIndex = 0;
return {
next: function() {
var key = keys[nextIndex];
var obj = {
key: key,
value: james[key],
done: nextIndex === keys.length-1 ?
true:
false
};
nextIndex++;
return obj;
}
}
} const iterator = james[Symbol.iterator]();
//
console.log(iterator.next().value); // 'James'
console.log(iterator.next().value); // `5'10`/
console.log(iterator.next().value); //

[ES6] The Iterator Protocol的更多相关文章

  1. ES6的Iterator,jquery Fn

    ES6的Iterator对象详解 Iterator实现原理 创建一个指针对象,指向当前数据结构的起始位置.也就是说,遍历器对象本质上,就是一个指针对象. 第一次调用指针对象的next方法,可以将指针指 ...

  2. Iterator Protocol - Python 描述符协议

    Iterator Protocol - Python 描述符协议 先看几个有关概念, iterator 迭代器, 一个实现了无参数的 __next__ 方法, 并返回 '序列'中下一个元素,在没有更多 ...

  3. ES6的Iterator遍历器

    JS表示集合的对象主要有Array.Set.Object.Map,在以前,遍历它们需要使用2种不同的方法,而现在,JS提出了Iterator机制,可以给不同的数据结构提供统一的遍历方法,就是for…o ...

  4. es6之iterator,for...of

    遍历器(Iterator)是一种统一的接口机制,来处理所有不同的数据结构. JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和 ...

  5. JS的ES6的iterator

    一.iterator 1.概念:iterator是一种接口机制,为各种不同的数据结构提供统一的访问机制. 2.作用: 为各种数据结构,提供一个统一的.简便的访问接口: 使得数据结构的成员能够按某种次序 ...

  6. 前端知识点回顾之重点篇——ES6的Iterator和Generator

    Iterator 迭代器是一种接口.是一种机制. 为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). Iter ...

  7. ES6的 Iterator 遍历器到底是什么?

    这节课要讲的是ES6中的Iterator. for...of为啥不遍历Object对象 第十三节我们讲了简单又实用的for...of,我们可以使用它来遍历数组,字符串,Set和Map结构,但是有没有发 ...

  8. 切图崽的自我修养-[ES6] 迭代器Iterator浅析

    Iterator 这真是毅种循环 Iterator不是array,也不是set,不是map, 它不是一个实体,而是一种访问机制,是一个用来访问某个对象的接口规范,为各种不同的数据结构提供统一的访问机制 ...

  9. Es6 Symbol.iterator

    Symbol.iterator 为每一个对象定义了默认的迭代器.该迭代器可以被 for...of 循环结构使用. --描述 当需要迭代一个对象的时候(比如在 for...of 循环的开始时),它的 @ ...

随机推荐

  1. 图文介绍MyEclipse (2015) 中创建简单的Maven项目的步骤(用于生成可运行jar文件)

    利用MyEclipse的引导,能够非常方便的创建简单的.用于生成可运行jar文件的Maven项目: (原创文章,转载请注明转自Clement-Xu的博客:http://blog.csdn.net/cl ...

  2. Eval函数知识总结

    说道Json,我们先来聊聊eval 一.eval是什么?(解析器) eval是一个函数,看本质function  eval() { [native code] } 二.怎样使用eval? 语法:str ...

  3. springboot Ehcache缓存配置

    例牌的导包 <!-- 包含支持UI模版(Velocity,FreeMarker,JasperReports), 邮件服务, 脚本服务(JRuby), 缓存Cache(EHCache), 任务计划 ...

  4. windows下远程链接虚拟机Linux下MySQL数据库问题处理

    参考解决:https://www.cnblogs.com/blogforly/p/5997553.html 今天远程连接虚拟机中的MySQL数据库,一直连不上,在网上搜索了一下,发现原因是MySQL对 ...

  5. PostgreSQL 批量生成数据

    create table user_info(userid int,name text,birthday date,crt_time timestamp without time zone,); in ...

  6. ivew语法中'${}`的用法

  7. CF817F MEX Queries(线段树上二分)

    题意 维护一个01串,一开始全部都是0 3种操作 1.把一个区间都变为1 2.把一个区间都变为0 3.把一个区间的所有数字翻转过来 每次操作完成之后询问区间最小的0的位置 l,r<=10^18 ...

  8. CF732F Tourist Reform(边双联通)

    题意 在一张有向图中,设 ri 为从点 i 出发能够到达的点的数量. 定义有向图的“改良值”为 ri 的最小值. 现给出一张无向图,要求给每条边定一个方向,使产生的有向图“改良值”最大. 输出 最大改 ...

  9. springMVC+request.session实现用户登录和访问权限控制

    用springmvc mybatis实现用户登录登出功能,使用session保持登录状态,并实现禁止未登录的用户访问.感谢谷歌资源,在这里做个学习记录加深自己的印象. 原文在我的https://my. ...

  10. POJ1833 &amp; POJ3187 &amp; POJ3785 next_permutation应用

    要是没有next_permutation这个函数,这些题认为还不算特别水,只是也不一定,那样可能就会有对应的模板了. 反正正是由于next_permutation这个函数.这些题包含之前的POJ122 ...