iterator与遍历

Posted on | In

概念

  • 迭代器（Iterator）是一个接口，为各种不同的数据结构提供统一的访问机制。任何数据只要部署了 Iterator 接口，就可以完成遍历操作。

  • 迭代器的作用有：
    为各种数据结构提供一个统一的、简便的访问接口；
    使数据结构成员能够按某种次序排列；
    ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费。

  • 迭代器可以看作是一个保存了指针（成员索引）的对象，这个对象有个next方法，这个函数会返回一个有value和done属性的对象，调用了next后，内部指针向下一个成员偏移。

  • 如果使用 TypeScript 的写法，遍历器接口（Iterable）、指针对象（Iterator）和next方法返回值的规格可以描述如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    interface Iterable{
    	[Symbol.iterator]():Iterator
    }

    interface Iterator{
    	next(value?: any): IterationResult
    }

    interface IterationResult{
    	value: any,
    	done: boolean
    }

for of 原理

就拿 for…of 语句来说，它首先调用被遍历对象的 Symbol.iterator 方法，该方法返回一个迭代器对象，迭代器对象可以是拥有 next 方法的任何对象。然后， 在 for…of 的每一次循环中，都将调用该迭代器对象上的 next 方法。
每一次调用 next 方法，都会返回数据结构的当前成员信息。具体来说就是返回一个包含 value 和 done 两个属性的对象。其中 value 是当前成员的值，done 是一个布尔值，表示遍历是否结束。

原生具备 Iterator 接口的数据结构

  1. 数组
  2. 字符串
  3. map
  4. set
  5. nodeList
  6. Arguments

调用 Iterator 接口的场合

  1. 解构赋值
  2. 扩展运算符
  3. yield*
  4. 由于数组遍历调用迭代器接口，所以任何接受数组作为参数的场合，其实都调用了 Iterator 接口：
    for…of
    Array.from()
    Map(), Set(), WeakMap(), WeakSet()
    Promise.all()
    Promise.race()

什么场合返回Iterator?

ES6 的数组、Set、Map 都部署了以下三个方法，调用后都返回遍历器对象。

  1. keys()
  2. values()
  3. entries()

for of 对比其他遍历方法

  1. for ：啰嗦
  2. for in ： （总之，它主要是为了遍历对象设计的，不适用于遍历数组）
    数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
    for…in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。（用hasOwnProperty判断是不是本身属性)
    某些情况下，for…in循环会以任意顺序遍历键名。
  3. forEach： 不能用break return跳出循环

总结 for of：

  1. 有着同for…in一样的简洁语法，但是没有for…in那些缺点。
  2. 不同于forEach方法，它可以与break、continue和return配合使用。
  3. 提供了遍历所有数据结构的统一操作接口。

for of 与对象

对于普通的对象，for…in循环可以遍历键名，for…of循环会报错。
for..in 会遍历到原型链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = Object.create({c:3},{a:{value:1,enumerable: true},b:{value:2,enumerable: true}})

for(let i in obj){
	console.log(i,obj[i])
}
// a 1
// b 2
// c 3


for(let i of Object.keys(obj)){
	console.log(i,obj[i])
}
// a 1
// b 2

对象实现for…of

  • 一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。
  • 当使用for…of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。
  • ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。调用这个属性（函数）会得到遍历器对象。（ps: Generator 函数会返回一个遍历器对象）

一个对象如果要具备可被for…of循环调用的 Iterator 接口，就必须在Symbol.iterator的属性上部署遍历器生成方法（原型链上的对象具有该方法也可）

为什么对象（Object）没有部署Iterator接口呢？
有两个原因：一是因为对象的哪个属性先遍历，哪个属性后遍历是不确定的，需要开发者手动指定。然而遍历遍历器是一种线性处理，对于非线性的数据结构，部署遍历器接口，就等于要部署一种线性转换。二是对对象部署Iterator接口并不是很必要，因为Map弥补了它的缺陷，又正好有Iteraotr接口。

实现思路

  • 调用Symbol.iterator，这是一个闭包函数（保存指针索引）
  • 返回iterator对象，这个对象有个next方法
  • 调用next 方法返回{value:x,done:x}
  • for…of 就是顺次打印出所有done:false的value

对map的遍历

1
2
3
4
5
6
7
8
9
10
11
12
var map = new Map()
map.set('a',1)
map.set('b',2)
map.set('c',3)

for(let i of map){
	console.log(i)
}

// ["a", 1]
// ["b", 2]
// ["c", 3]

在对象上实现Symbol.iterator

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// method 1
var  obj ={
	a:'apple',b:'banana',c:'cherry',
	[Symbol.iterator]:function(){
		var index =0;
		var data = Object.values(this)
		return {
			next(){
			  return  index<data.length?{value:data[index++], done:false}:{value: undefined,done:true}		  
			}
		}
	}
}


// method 2 
var obj = {
    a:'apple',b:'banana',c:'cherry',
    * [Symbol.iterator](){
    	let values = Object.values(this)
    	for(var i=0;i<values.length;i++){
    		yield values[i]
    	}
    }
};

// test
for(var i of obj){
	console.log(i)
}
// apple
// banana
// cherry