如果有人问你：for in 和 for of 的区别，你会怎么回答？- 测测你对JavaScript的了解有多深

for in 和 for of 的区别是什么？这其实是一道很有层次的问题，你的回答将暴露出你对JavaScript的理解深度

• 第一层

  • 回答：for in 用于遍历数组索引（下标），for of用于遍历数组的值。

  • 评语：你对JavaScript的了解仅仅入门，但是这些了解用于简单的网页js编写已经足够了。

• 第二层

  • 回答：for in 用于遍历对象的键（keys），for of用于遍历数组的值（value）但是不能遍历对象。

  • 评语：你开始对JavaScript有了更深层次的了解，这是好事，但是你可能会对这一层的东西产生疑问，不妨试着再深入了解。

• 第三层

  • 回答：for in 用于遍历对象和对象原型（__proto__）的可枚举（enumerable）属性的键（keys），for of用于迭代可迭代对象的迭代器（@@iterator）的返回值（value)。

  • 评语：你对JavaScript的了解已经深入骨髓，甚至可以尝试自己伪造一个与Array行为方法类似的伪数组，而上一层的人可能完全无法区分这是真数组还是伪数组。

补充

for in

该方法的行为由该对象和该对象的原型的所有可迭代属性决定。
node内置对象的原型属性一般都是不可枚举的，而DOM对象（常用的有:Element、HTMLCollection）的原型属性都是可枚举的。所以你在使用for in遍历HTMLCollection元素组的时候通常会出现诡异的BUG，通常我们使用 for i 循环来遍历元素组。

HTMLCollection:使用诸如document.getElementsTagName()方法获取的元素组成的集合

for of

该方法的行为由该对象的迭代生成器决定。
迭代器是用于迭代的对象，迭代器返回一个拥有两个属性的对象{value:…done:…}，迭代器通常是一次性的，迭代完成后每次尝试调用时会返回{done：true}
迭代生成器是一个函数，它按一定的算法代理并维护迭代器，我们可以修改迭代生成器来自定义 for of 的行为。
数组（Array）和HTML元素组（HTMLCollection）内置了一个迭代生成器（可迭代对象），并且行为类似遍历数组。而其他对象（object或自定义的对象）默认没有迭代器（不可迭代对象），所以不能使用 for of 或其他迭代方法（map()）
创建一个可迭代对象：

var obj = {
     
	['0']: 'A',
	['1']: 'B',
	length: 2
}

此时使用 for of 来迭代obj（或者使用[…obj]来快速查看迭代的结果）将会报错（略。建议自己在控制台尝试）
尝试给一个对象添加一条属性:

obj[Symbol.iterator] = function*() {
     
	for(let i = 0; i < this.length; i++) {
     
		yield this[i]
	}
}

注！ Symbol.iterator 是不带引号的，它不是字符串
我们再用 for of 来迭代它（或者使用[…obj]来快速查看迭代的结果）
看看它迭代了哪些属性（略。建议自己在控制台尝试）

相关文档

继承与原型链
属性的可枚举性和所有权
迭代和生成器

总结

看不懂没关系，以后有人问你 for in 和 for of 的区别你就按第三层的回答告诉TA（手动滑稽）装X就完事了。