JavaScript Iterator和for...of循环(二)

for…of循环

基本原理

• 一个数据结构只要部署了Symbol.iterator属性,就被视为具有iterator接口,就可以用for…of循环遍历它的成员.也就是说for…of循环内部调用的是数据结构的Symbol.iterator方法

使用范围

• for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如 arguments 对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串

与for…in的区别

• JavaScripty原有的for…in循环,只能获得对象的键名,不能直接获取键值.ES6提供for…of循环,允许遍历获得键值

	var arr = ['a', 'b', 'c', 'd'];
	for (let a in arr) {
		console.log(a); // 0 1 2 3
	}
	for (let a of arr) {
		console.log(a); // a b c d
	}
	//如果要通过 for...of 循环，获取数组的索引，可以借助数组实例的 entries 方法和 keys 方法.在数组的扩展中

具体例子

• for…of循环调用遍历器接口,数组的遍历器接口只返回具有数组索引的属性

	let arr = [3, 5, 7];
	arr.foo = 'hello';
	for (let i in arr) {
		console.log(i); // "0", "1", "2", "foo"
	}
	for (let i of arr) {
		console.log(i); // "3", "5", "7"
	}

• Set和Map结构:
  • 遍历的顺序是按照各个成员被添加进数据结构的顺序
  • Set 结构遍历时，返回的是一个值，而 Map 结构遍历时，返回的是一个数组，该数组的两个成员分别为当前 Map 成员的键名和键值

	let map = new Map().set('a', 1).set('b', 2);
	for (let pair of map) {
		console.log(pair);
	}
	// ['a', 1]
	// ['b', 2]
	for (let [key, value] of map) {
		console.log(key + ' : ' + value);
	}
	// a : 1
	// b : 2

• 对于字符串来说,for…of循环还有一个特点,就是会正确识别32位UTF-16字符
• 并不是所有类似数组的对象都具有Iterator接口,一个简便的解决办法就是使用Array.from将其转为数组

	let arrayLike = { length: 2, 0: 'a', 1: 'b' };
	// 报错
	for (let x of arrayLike) {
		console.log(x);
	}
	// 正确
	for (let x of Array.from(arrayLike)) {
		console.log(x);
	}

• 对于普通的对象,for…of结构不能直接使用,会报错,必须部署了Iterator接口后才能使用.这种情况下for…in循环依然可以遍历键名
• forEach循环不能中途退出,break和return都不能奏效

for…in循环的缺点

• 数组的键名是数字,但是 for…in 循环是以字符串作为键名的.
• for…in 循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键
• 某些情况下， for…in 循环会以任意顺序遍历键名
• 总之,for…in 循环主要是为遍历对象而设计的，不适用于遍历数组

for…of循环相比上面的优点

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