Iterator遍历器

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

作用:

  • 为各种数据结构,提供一个统一的、简便的访问接口
  • 使得数据结构的成员能够按某种次序排列
  • ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费

Iterator的遍历过程:

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

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

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

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

在ES6中,有三类数据结构原生具备Iterator接口:数组、某些类似数组的对象、Set和Map结构。

可以覆盖原生的Symbol.iterator方法,达到修改遍历器行为的目的。

for...of

for...of循环可以使用的范围包括数组、Set和Map结构、某些类似数组的对象(比如arguments对象、DOM NodeList对象)、后文的Generator对象,以及字符串。


{
let arr=['hello','world'];
let map=arr[Symbol.iterator]();
//done表示是否还有下一步了,false有 true 没有
console.log(map.next()); //{value: "hello", done: false}
console.log(map.next()); //{value: "world", done: false}
console.log(map.next()); //{value: undefined, done: true}
} {
let obj={
start:[1,3,2],
end:[7,9,8],
//声明
[Symbol.iterator](){
//函数体
let self=this;
let index=0; //当前遍历索引
let arr=self.start.concat(self.end); //合并数组
let len=arr.length;//记住数组长度
return {
//iterator部署的时候一定要有next这个方法
next(){
//遍历过程
if(index<len){
return {
value:arr[index++],
done:false
}
}else{
return {
value:arr[index++],
done:true //遍历结束
}
}
}
}
}
}
//验证接口是否部署成功
for(let key of obj){
console.log('key1',key); //1 3 2 7 9 8
}
} {
let arr=['hello','world'];
for(let value of arr){
console.log('value',value); //hello ,world
}
}

es6 语法 (iterator和for...of循环)的更多相关文章

  1. ES6 之 Set数据结构和Map数据结构 Iterator和for...of循环

    ECMAScript 6 入门 Set数据结构 基本用法 ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. va ...

  2. ES6的新特性(14)——Iterator 和 for...of 循环

    Iterator 和 for...of 循环 Iterator(遍历器)的概念 JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Ma ...

  3. es6 -- Iterator 和 for...of 循环

    1:Iterator(遍历器)的概念 JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set.这样就有了四种数据集合,用户还 ...

  4. ES6语法 Promise Iterator

    类和对象 基本定义: class Parent{ constructor(name='lmx'){ //name= 默认值 this.name=name } } let v_parent = new ...

  5. es6笔记(6) Iterator 和 for...of循环

    概要 js中的数组.对象,加上ES6中增加的Map.Set四种数据集合. Iterator提供了一种机制,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍 ...

  6. ES6(Iterator 和 for...of 循环)

    Iterator 和 for...of 循环 1.什么是 Iterator 接口 Iterator 接口功能:用一种相同办法的接口让不同的数据结构得到统一的读取命令的方式 2.Iterator的基本用 ...

  7. ES6语法知识

    let/const(常用) let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域) 这里外部的 ...

  8. 14.Iterator 和 for...of 循环

    Iterator 和 for...of 循环 Iterator 和 for...of 循环 Iterator(遍历器)的概念 JavaScript 原有的表示"集合"的数据结构,主 ...

  9. Iterator 和 for...of 循环

    Iterator(遍历器)的概念 § ⇧ JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set.这样就有了四种数据集合,用 ...

  10. Iterator和for...of循环

    Iterator和for...of循环 Iterator(遍历器)的概念 数据结构的默认Iterator接口 调用Iterator接口的场合 字符串的Iterator接口 Iterator接口与Gen ...

随机推荐

  1. 移动端video标签默认置顶的解决方案

    概述 在移动端上面,比如说微信上面打开一个页面,如果有video标签的话,常常会出现video标签默认置顶的情况,一般的解决方案是在不需要看见它的时候给它加一个display:none进行隐藏.今天在 ...

  2. CCS3怎么实现border边框渐变效果

    下图注册按钮的边框有渐变效果,如果让你来实现,你会怎么做呢 个人觉得,省事的做法,直接让UI给背景图片就可以了,如下图 不过这种做法感觉不太灵活,如果要修改border的渐变颜色,就需要UI重新做图. ...

  3. eclipse如何使用log4j详解,你get了吗???

    1.下载log4j    jar包 log4j下载地址 http://logging.apache.org/log4j/2.x/download.html 2.log4j   jar包引入项目 接下来 ...

  4. db2 报错 sqlcode=-420 自动类型转换的问题

    今天在测试遇到一个问题,前台点击页面查询数据时报错: , SQLSTATE, SQLERRMC=DECFLOAT, DRIVER=4.18.60 根据sqlcode查询错误原因为:-420 22018 ...

  5. 树莓派MQTT客户端搭建

    树莓派安装和实现MQTT协议 下载Mosquitto 更新软件源:sudo apt-get  update 下载g++编译器:sudo apt-get install g++ 安装:sudo apt- ...

  6. Docker面试题

    1.如何列出可运行的容器?docker ps 2.启动nginx容器(随机端口映射),并挂载本地文件目录到容器html的命令是?docker run -d -P --name nginx2 -v /h ...

  7. GODOT 3.0 开发进度汇报 #7

    由于原文采取了记流水账的方式,觉得没有必要照直翻译了,就只选取了其中的主要信息. GDNative C++ 语言绑定 进行了重写以便Godot更好的生成和处理脚本. D 语言绑定 也正在积极开发中. ...

  8. Ocelot简易教程(五)之集成IdentityServer认证以及授权

    Ocelot简易教程目录 Ocelot简易教程(一)之Ocelot是什么 Ocelot简易教程(二)之快速开始1 Ocelot简易教程(二)之快速开始2 Ocelot简易教程(三)之主要特性及路由详解 ...

  9. 面试必备技能-HiveSQL优化

    Hive SQL基本上适用大数据领域离线数据处理的大部分场景.Hive SQL的优化也是我们必须掌握的技能,而且,面试一定会问.那么,我希望面试者能答出其中的80%优化点,在这个问题上才算过关. Hi ...

  10. [NewLife.XCode]数据层缓存(网站性能翻10倍)

    NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netcore,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和 ...