Iterator接口(遍历器)和for/of循环
在javascript中表示“集合”的数据结构,主要有Array,Object,Map,Set。
Iterator(遍历器)接口是为各种不同的数据结构提供了统一的访问机制。任何数据结构具有Iterator接口,就可以完成遍历操作(依次排序进行遍历)。
Iterator遍历的过程:
创建一个指针对象,指向数据结构的初始位置——调用指针对象的next方法,指向数据结构成员——不断调用next方法,直到指向数据结构的结束位置。
var it = makeIterator(['a','b']); function makeIterator(array){
var nextIndex = 0;
return{
next:function(){
return nextIndex < array.length ?
{value:array[nextIndex++],done:false} :
{value:undefined,done:true}
}
}
} it.next()
默认的Iterator接口
Iterator借口的目的在于:为所有数据结构,提供统一的访问机制。即用for/of循环,当使用for/of进行遍历的时候,该循环会自动去寻找Iterator接口。
默认的Iterator接口部署在数据结构的Symbol.iterator属性,一个数据结构只要有Symbol.Iterator属性,就是“可遍历的”,Symbol.iterator属性本身是一个函数,执行这个函数,返回 一个遍历器。
ES6中原生具备Iterator接口的数据结构如下:
Array Map Set String TypedArray 函数的arguments对象 NodeList对象
let arr = [1,2,3,4,5]
let iter = arr[Symbol.iterator]();
iter.next()
一个对象具备Iterator接口,必须在Symbol.iterator的属性上部署遍历器生成方法(原型链上的对象具有该方法也可)
只要某个数据结构部署了Iterator接口,就可以使用拓展运算符将其转化为数组。
let arr = [...iterator]; var str = 'hello';
[...str] //["h", "e", "l", "l", "o"]
yield* 后面跟的是一个可遍历的结构,它会调用该结构的遍历器接口。
let generator = function* (){
yield 1;
yield* [2,3,4];
yield 5;
}
var it = generator();
it.next(); //{value: 1, done: false}
it.next() //{value: 2, done: false}
it.next() //{value: 3, done: false}
it.next() //{value: 4, done: false}
it.next() //{value: 5, done: false}
it.next() //{value: undefined, done: true}
数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,其实都调用了Iterator接口,如下:
for/of Array.from() Map() Set() WeakMap() WeakSet() Promise.all() Promise.rece()
1,字符串的Iterator接口
var str = 'hi';
typeof str[Symbol.iterator] //'function' var a = str[Symbol.iterator]();
a.next() //{value: "h", done: false}
a.next() //{value: "i", done: false} [...str] //["h", "i"]
以前字符串转化为数组:str.split(""),ES6中可以使用Iterator进行遍历加入数组中,相当简洁。
这里写一个能用for/of进行遍历对象的方法键值的方法:
function* entries(obj) {
for (let key of Object.keys(obj)) {
yield [key, obj[key]];
}
} for (let [key, value] of entries(obj)) {
console.log(key, '->', value);
}
// a -> 1
// b -> 2
// c -> 3
其他遍历方法的比较:
forEach内部写break命令不奏效,会报错,return语句是可以写的。
for/in是用来遍历对象的键名,数组的索引,主要适用于遍历对象。
for/of主要是用来遍历数组的值,可以搭配break,continue,return等,提供了遍历所有数据结构的统一操作接口。
Iterator接口(遍历器)和for/of循环的更多相关文章
- Iterator(遍历器) 和 for...of 循环
是generator的前置知识 generator :https://www.cnblogs.com/wangtong111/p/11322961.html 遍历器(Iterator)就是这样一种机制 ...
- ES6学习笔记(十三)Iterator遍历器和for...of循环
1.概念 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有 ...
- 疑问:Iterator 遍历器和数据集合各种遍历方法的区别
https://es6.ruanyifeng.com/#docs/iterator Iterator(遍历器)的概念 Iterator 接口主要供for...of消费 Iterator 的遍历过程是: ...
- 遍历器Iterator--指针对象
一. 什么是遍历器 1. 遍历器对象(Iterator) 遍历器对象本质上是一个指针对象,该对象有一个next方法,调用next方法返回一个 含有value和done属性的对象{value: val/ ...
- 【前端】【javascript】es6中的遍历器接口Iterator
好久没发文章啦-.-为了证明我还活着,我决定从笔记里面抓一篇还算不乱比较像文章的发出来... 这些笔记是我在学es6的时候断断续续记录的,最近会一份一份整理陆陆续续发出来,顺便也自己再看一遍.我学习e ...
- Iterator遍历器 调用Symbol.Iterator属性,遍历器对象。
Iterator实现原理 创建一个指针对象,指向当前数据结构的起始位置.也就是说,遍历器对象本质上,就是一个指针对象. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员. 第二次调 ...
- iterator [ɪtə'reɪtə] 遍历器
lterator 遍历器 遍历器是一种接口,它为不同的数据结构提供了统一的访问机制. 如果一个数据结构具有遍历器接口,那么就可以依次处理该数据结构的成员. 当前 javascript 用来表示集合的数 ...
- Iterator 遍历器
1.遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). 2.Iterator ...
- ES6的 Iterator 遍历器到底是什么?
这节课要讲的是ES6中的Iterator. for...of为啥不遍历Object对象 第十三节我们讲了简单又实用的for...of,我们可以使用它来遍历数组,字符串,Set和Map结构,但是有没有发 ...
随机推荐
- 一、安装Docker CE
卸载旧版本 较旧版本的Docker被称为docker或docker-engine.如果已安装这些,需要卸载以及相关的依赖项. $ sudo yum remove docker \ docker-cli ...
- log4j2.xml 配置
动态生成日志, 日志路径: log4j2.xml 配置如下: <?xml version="1.0" encoding="UTF-8"?> < ...
- Spring-security整理
出于某些原因,需要学习一下spring的安全框架.(研究半天,如果单单说用户认证和授权这块儿,我感觉还是shiro好用.) spring security介绍可以参考一下以下文档: (满满的羡慕啊)我 ...
- http接口与webservice接口的区别
常见的API接口有两类:http接口和webservice接口. http接口走http协议,通过路径来区分调用方法,请求报文一般是key-value形式的,返回报文一般是json串,常用的是get和 ...
- 新特DEV1光速发布背后:原来“开公司”也能风驰电掣
去年12月16日,总融资额达到200亿元的蔚来汽车正式推出电动SUV车型ES8:去年12月22日,威马汽车宣布最新一轮融资,累计获得120亿元的融资额:今年1月29日,小鹏汽车宣布启动总额为22亿元人 ...
- orcale 11g安装,创建表空间,用户,授权用户
一.卸载旧oracle 用Oracle自带的卸载程序不能从根本上卸载Oracle,从而为下次的安装留下隐患,那么怎么才能完全卸载Oracle呢?那就是直接注册表清除,步骤如下: 1. 开始->设 ...
- 提升项目一:花卉管理系统(Servlet+JSP完成)
这个是写的第一个项目:使用Servlet+JSP完成,加上对底层构架的理解,才可以对后面要接触使用的ssh框架的深刻理解 2017-02-11: 完成对进货业务的操作, 下一步完成对销货业务的操作
- JS数组与字符串相互转化
<script type="text/javascript"> var obj="new1abcdefg".replace(/(.)(?=[^$]) ...
- 几个简单又实用的PHP函数
简单方便使用: /** * 将多维数组转为一维数组 * @param array $arr * @return array */ function ArrMd2Ud($arr) { #将数值第一元素作 ...
- 吴裕雄--天生自然 R语言开发学习:广义线性模型
#----------------------------------------------# # R in Action (2nd ed): Chapter 13 # # Generalized ...