ES6的 for of 循环详解

ES6的 for of 循环详解

其实使用ES6中的 for of 循环还是有一定的要求，就是循环的对象必须有Symbol.iterator这个属性，而且属性值一定要是一个函数。

• 循环的对象一定要有Symbol.iterator这个属性。
• Symbol.iterator这个属性的值是一个函数
• 函数的返回值，一定要符合迭代器。

示例1

let arr = [100, 200, 300, 40, 2]
console.log(arr[Symbol.iterator]) // ƒ values() { [native code] }
// 就是说 arr数组，是有这个Symbol.iterator这个属性的。而且属性值也是一个函数
for (const item of arr) {
	console.log(item) // 100 200 300 40 2
}

如果我们修改Symbol.iterator属性,而且为没有的对象添加这个属性

let arr = [10,20,30,4,5];
arr[Symbol.iterator] = function () {
	// 1.这里一定要返回一个对象，不然会报错的
	// 2.对象中一定要有next方法
	// 3.next方法调用，返回的是一个对象 { value: '', done: true/false }
	let i = 0
	console.log('Symbol.iterator被执行了');
	return {
		next() {
			if ( i > 50) {
				return { value:50, done: true }
			} else {
				i += 5
				return { value: i, done: false }
			}
		}
	}
}
for (const item of arr) {
	console.log(item); // 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55
}
// 这里的循环不再是数组的元素

• 这里的循环不再是数组的元素
• 而是我们 i += 5 每一次递增的 i。
• 而且这里的 console.log(‘Symbol.iterator被执行了’)被执行了。

3. 我们也可以给不能使用 for of的对象添加 Symbol.iterator使其能使用 for of

let obj = {}
for (const item of obj) {
	console.log(item); // 这里会报错
}

上面的代码会报错

let obj = {}
obj[Symbol.iterator] = function (){
	let i = 10
	return {
		next(){
			i += 10
			if (i > 100) {
				return { value:i, done: true}
			} else {
				return { value: i, done: false}
			}
		}
	}
}
for (const item of obj) {
	console.log(item); // 20, 30, 40, 50, 60, 70, 80, 90 .....
}

4.总结

• for of 循环的对象一定要有 Symbol.iterator属性
• 而且属性值一定要是一个函数，而且返回值是一个迭代器。
• 我们是可以修改Symbol.iterator属性值的