for…in 和 for…of区别用法

for…in 和 for…of区别用法

用于数组

let arr = ['h', 'e', 'l', 'l', 'o']
	for (const key in arr) {
		console.log(key)  //0 1 2 3 4
	}
	for (const key of arr) {
		console.log(key)  //h e l l o
	}

可以看到:

for…in 循环数组输出的是下标

for…of 循环数组输出的是数组中的每一项

用于对象

let obj = {name: 'yy', age: 18}
	for (const key in obj) {
		console.log(key)		//name  age
		console.log(obj[key])	//yy   18
	}
	for (const key of obj) {
		console.log(key)
		//报错: demo02.html:22 Uncaught TypeError: obj is not iterable atdemo02.html:22:22
	}

可以看到:

for…in循环可以遍历对象

for…of遍历普通对象会报错 但是他可以遍历可迭代对象(含有[Symbol.iterator] 函数属性,也就是含有iterator接口 )

总结:

for…in 循环主要是为了遍历对象而生，不适用于遍历数组；for…of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象。