9.Iterator和for...of

9.1.Iterator是什么?

Iterator又叫做迭代器,它是一种接口,为各种不同的数据结构提供统一的访问机制。这里说的接口可以形象的理解为USB接口,有了这个接口可以做不同的事情,在编程中所说的接口最终都是要通过一段代码块来实现这个接口功能的。而Iterator接口提供的统一访问机制主要表现为遍历操作,任何数据类型只要具有Iterator接口,就可以完成遍历操作(遍历操作指依次处理该数据结构的所有成员),总结起来就是说我们需要一种统一的机制来依次处理某种数据结构的所有成员,这种处理机制就是Iterator所做的事情

下面我们来实现这种机制,它需要具备依次处理数据结构的所有成员,那意味着我们执行一次方法就可以处理一个成员

function Iterator(arr) {
var index = 0;
return {
next: function () {
if(index < arr.length){
return {value: arr[index++]}
}else {
return {done: false}
}
}
}
}
var it = Iterator([1,2,3]);
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next()); function Iterator(arr) {
var index = 0;
return {
next: function () {
if(index < arr.length){
return {value: arr[index++]}
}else {
return {done: false}
}
}
}
}
var it = Iterator([1,2,3]);
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

一种数据结构只要部署了Iterator接口,我们就称这种数据结构是可以迭代的,在ES6中,只要是一个数据结构具有了Symbol.iterator属性,那么就认为是可迭代的,其实,Symbol.iterator就是一个函数,实现的功能和我们上面手写的功能差不多。

在ES6中,有些数据结构原生就具备了Iterator接口,例如:Array、Map、Set、String等

let arr = [1,2,3,4];
let it = arr[Symbol.iterator]()
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())

Iterator的应用场景举例:

1.在解构赋值的时候默认调用Iterator接口

let arr = [1, 2, 3];
let [x, y, z] = arr;
console.log(x, y, z)

2.扩展运算符使用等时候也默认调用Iterator接口

let st = 'nodeing'
console.log([...st])

9.2.for...of方法

在ES6中,引入了for...of循环,作为遍历所有数据结构的统一方法,在for...of循环内部也是调用数据结构的Symbol.iterator方法

let st = 'nodeing';

for (let a of st){
console.log(a)
}

注意:对象是不可迭代的

//对象是不可迭代的
let obj = {
name: 'xiaoqiang',
age: 18
};
// obj is not iterable
for (let a of obj){
console.log(a)
}

视频教程地址:http://edu.nodeing.com/course/50

es6+最佳入门实践(9)的更多相关文章

  1. es6+最佳入门实践(14)

    14.模版字符串 模版字符串(template string)是增强版的字符串,定义一个模版字符串需要用到反引号 let s = `这是一个模版字符串` console.log(s) 14.1.模版字 ...

  2. es6+最佳入门实践(12)

    12.class基础用法和继承 12.1.class基础语法 在es5中,面向对象我们通常写成这样 function Person(name,age) { this.name = name; this ...

  3. es6+最佳入门实践(10)

    10.Generator 10.1.Generator是什么? Generator函数是ES6提供的一种异步编程解决方案.在它的内部封装了多个状态,因此,又可以理解为一种状态机,执行Generator ...

  4. es6+最佳入门实践(8)

    8.Promise 8.1.什么是异步? 要理解异步,首先,从同步代码开始说 alert(1) alert(2) 像上面的代码,执行顺序是从上到下,先后弹出1和2,这种代码叫做同步代码 alert(0 ...

  5. es6+最佳入门实践(7)

    7.set和map数据结构 7.1.什么是set? Set就是集合,集合是由一组无序且唯一的项组成,在es6中新增了set这种数据结构,有点类似于数组,但是它的元素是唯一的,没有重复 let st = ...

  6. es6+最佳入门实践(6)

    6.Symbol用法 6.1.什么是Symbol? Symbol是es6中一种新增加的数据类型,它表示独一无二的值.es5中我们把数据类型分为基本数据类型(字符串.数字.布尔.undefined.nu ...

  7. es6+最佳入门实践(5)

    5.对象扩展 5.1.对象简写 在es5中,有这样一种写法 var name = "xiaoqiang"; var age = 12; var obj = { name : nam ...

  8. es6+最佳入门实践(4)

    4.函数扩展 4.1.参数默认值 默认参数就是当用户没有传值的时候函数内部默认使用的值,在es5中我们通过逻辑运算符||来实现 function Fn(a, b) { b = b || "n ...

  9. es6+最佳入门实践(3)

    3.数组扩展 3.1.扩展运算符 扩展运算符用三个点(...)表示,从字面上理解,它的功能就是把数组扩展开来,具体形式如下: let arr = [1, 2, 3]; console.log(...a ...

随机推荐

  1. docker学习(一) 安装

    一.什么是docker 参见https://baike.baidu.com/item/Docker/13344470?fr=aladdin 个人的理解是,通俗来说,就是相当于一个方便携带且个体独立的虚 ...

  2. LI 标签中让文章标题左对齐,日期右对齐的方法

    希望实现标题在左对齐,日期在右对齐,当直接给日期的span加上float:right时,IE8和FF都OK,但IE6/7则会换行,下面给出一个简单有效的解决办法. <!DOCTYPE html  ...

  3. (转) Sqoop使用实例讲解

    原博客地址:http://blog.csdn.net/evankaka 摘要:本文主要讲了笔者在使用sqoop过程中的一些实例 一.概述与基本原理 Apache Sqoop(SQL-to-Hadoop ...

  4. How to Upload multiple files to documentLibrary in one time

         In a Sharepoint 2013 website,we can upload one file to the documentlibrary by click "Uploa ...

  5. 【紫书】(UVa1347)Tour

    继续考虑dp题目. 题意分析 其实这里只是更加仔细的做一个lrj的复读机(Orz 他分析了一个很重要的结果:如果是一个人从左到右再回来,并且每个点恰经过一次,那么等价于两个人从左到右每个点经过一次地遍 ...

  6. 虚拟现实-VR-UE4-LEAP-Motion手势识别

    点击打开链接今天到手一个新东西,LEAP手势识别仪. 关于LEAP Leap是一家面向PC以及Mac的体感控制器制造公司. 具体信息百度百科http://baike.baidu.com/link?ur ...

  7. 【Linux运维】Centos7上借助ansible搭建LVS+Keepalived

    安装ansible 安装ansible: [root@localhost ~]# /etc/hosts 192.168.19.129 web129.yanglt.com web129 192.168. ...

  8. LeetCode 29——两数相除

    1. 题目 2. 解答 2.1. 方法一 题目要求不能使用乘法.除法和除余运算,但我们可以将除法转移到对数域. \[ \frac{a}{b} = e^{\frac{lna}{lnb}} = e^{ln ...

  9. cmd端口占用查看和关闭端口

    cmd——回车,输入netstat -ano——回车,可以查看已占用的端口,记下端口的PID,然后打开任务管理器,点查看,选择列,勾选PID确定,找到对应的PID,结束进程,如果结束不了或者结束后还不 ...

  10. 转---详细的Android开发环境搭建教程

    五步搞定Android开发环境部署——非常详细的Android开发环境搭建教程 引言   在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立A ...