iterator(遍历器)的概念

JavaScript原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6又添加了Map和Set。这样就有了四种数据集合,用户还可以组合使用它们,定义自己的数据结构,比如数组的成员是Map,Map的成员是对象。这样就需要一种统一的接口机制,来处理所有不同的数据结构。

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

Iterator的作用有三个:

一是为各种数据结构,提供一个统一的、简便的访问接口;

二是使得数据结构的成员能够按某种次序排列;

三是ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费

Iterator的遍历过程

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

第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。 不断调用指针对象的next方法,直到它指向数据结构的结束位置。

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

下面模拟一个遍历器对象

const arr = [1,2,3];

function iterator(arr) {
let index = 0;
return {
next: function () {
return index < arr.length ? {value: arr[index++],done: false} : {value: undefined, done: true};
}
}
} const it = iterator(arr);
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

原生具备iterator接口的数据(可用for of遍历)

Array

let arr = [2,3,4,6]
for(let i of arr) {
console.log(i)
}

arguments(遍历其他伪数组都可以)

function fun() {
for (let i of arguments) {
console.log(i)
}
}
fun(1,2,3,45,6)

set容器

let s = new Set([1,2,3,4])
for (let i of s) {
console.log(i)
}

map容器

const  m = new Map([
['a',1],
['b',2]
]);
for (let i of m) {
console.log(i)
}

String

let str = 'abcafdsaf'
for(let i of str) {
console.log(i)
}

ES5-ES6-ES7_iterator和for of的更多相关文章

  1. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  2. 简述ES5 ES6

    很久前的某一天,一位大神问我,你知道ES6相对于ES5有什么改进吗? 我一脸懵逼的反问,那个啥,啥是ES5.ES6啊. 不得不承认与大神之间的差距,回来深思了这个问题,结合以前的知识,算是有了点眉目. ...

  3. React/React Native的 ES5 ES6 写法对照

      ES5 ES6 模块 var React = require("react-native); var { Image, Text, View } = React;   import Re ...

  4. Atitit js es5 es6新特性 attilax总结

    Atitit js es5 es6新特性 attilax总结 1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 ...

  5. 【转】React Native中ES5 ES6写法对照

    很多React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是 ...

  6. 【ES5 ES6】使用学习

    [ES5 ES6]使用学习 转载: ============================================================= 1.Promise 2.下划线转驼峰,驼 ...

  7. JavaScript Learning Paths(ES5/ES6/ES-Next)

    JavaScript Learning Paths(ES5/ES6/ES-Next) JavaScript Expert refs https://developer.mozilla.org/en-U ...

  8. React Native 的ES5 ES6写法对照表

    模块 引用 在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样: //ES5 var React = require("react" ...

  9. ES5/ES6的区别研究(ECMAScript)

    我所理解的概念应该是语法的区别和特性的区别 这里是ECMAScript的解析http://baike.baidu.com/item/ECMAScript 参考: (ES6)http://es6.rua ...

  10. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

随机推荐

  1. 行为型---中介者模式(Mediator Pattern)

    中介者模式的定义 中介者模式,定义了一个中介对象来封装一系列对象之间的交互关系.中介者使各个对象之间不需要显式地相互引用,从而使耦合性降低,而且可以独立地改变它们之间的交互行为.   中介者模式的结构 ...

  2. Core知识整理

    概述 Commond-Line ASP.NET结构文件 Startup 配置文件 中间件和依赖注入 依赖注入原理 框架自带的依赖注入(IServiceCollection) 依赖注入生命周期 依赖注入 ...

  3. vsCode 列选择、列选中、选中列、选中多列(转载)

    VSCode列选择快捷键 来源 https://blog.csdn.net/Luyanc/article/details/80502069 VSCode列选择快捷键:Alt+Shift+左键 来一张效 ...

  4. 利用OpenCV给图像添加中文标注

    利用OpenCV给图像添加中文标注 : 参考:http://blog.sina.com.cn/s/blog_6bbd2dd101012dbh.html  和https://blog.csdn.net/ ...

  5. [android] 显示意图激活另外一个activity

    可以使用跳转的方式类似javaweb来实现界面转换 显示意图就是必须要指定开启组件的具体信息,包名,组件名,组件的class 新建一个类TwoActivity ,继承Activity类,重写onCre ...

  6. Java 学习笔记 判断一个数组是否有序

    思路 升序:每次比较数组中的两个数的时候,最大的数一定是前一个 降序: 每次比较数组中的两个数的时候,最小的数一定是前一个 Flag1和flag2都是假的时候,返回flase,否则,返回flase 代 ...

  7. JavaWeb学习日记----DTD

    DTD:文档类型定义,可以定义合法的XML文档构建模块.使用一系列的合法标签元素来定义文档的结构. 现有一个XML文档内容如下: <?xml version="1.0"?&g ...

  8. Vue Document

    目录 VUE笔记 环境搭建 Vue学习笔记 1.Vue指令 VUE笔记 环境搭建 node -v npm -v npm i -g cnpm --registry=https://registry.np ...

  9. BZOJ1101: [POI2007]Zap(莫比乌斯反演)

    1101: [POI2007]Zap Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2951  Solved: 1293[Submit][Status ...

  10. 洛谷P4726 【模板】多项式指数函数(多项式exp)

    题意 题目链接 Sol 多项式exp,直接套泰勒展开的公式 \(F(x) = e^{A(x)}\) 求个导\(F'(x) = A(x)\) 我们要求的就是\(G(f(x)) = lnF(x) - A( ...