for...in/for...of的区别

for…in…语句是一种严格的迭代语句，用于枚举对象中的非符号键属性（不能保证返回对象属性的顺序）
for…of…语句是一种严格的迭代语句，用于遍历可迭代对象的元素（会按照可迭代对象的next()方法产生值的顺序迭代元素）

适用的目标不一样

for…in 用于可枚举的数据，如对象，数组，字符串得到key
for…of用于可迭代的数据，如数组，字符串，map,set,arguments,

const obj1 = {x:1}
Object.getOwnPropertyDescriptors(obj1)	//输出属性的enumerable为true

//ES6中，具有Symbol.iterator属性，它对应的是一个函数，调用这个函数后可以得到一个对象，每次调用对象的next()方法能得到目标的每一项，只要符合这个特点就是可迭代的
const arr = [10,20]
arr[Symbol.iterator]  //如果有，则是可迭代,输出不为undefined

遍历的范围不一样

for…in 原型链上的可枚举的属性也能被遍历到
for…of 一般只遍历自身的

Array.prototype.foo = 4
const arr = [7]
for(let key in arr){
	console.log(arr[key]) // 7 4
}
for(let item iof arr){
	console.log(item)  //7
}

得到的结果不一样

for…in 的到的是key(并且不保证顺序)
for…of一般得到的是value

参考：https://www.bilibili.com/video/BV1NP411n7Wd/?p=5&spm_id_from=333.1007.top_right_bar_window_history.content.click