【JS基础知识1】for...in、for...of你也经常傻傻分不清吗

大家好，我是小梅

作为在前端领域不断探索的一员，最近处于待业状态。现在开始在此记录准备面试的基础知识点。如果你也遇到了相同的问题，希望本文对你有帮助。

一、由于本人实在很难区分这两个api，因此我采取联想的方式来记忆。（仅适合本人，仅供参考）首先区分单词of与in

of: 属于、由...组成、...的一部分。

in: 在……里面、在什么方面。

因此，本人就联想记忆。of：某件东西的组成部分，联想部分：一个糖罐由很多五颜六色的糖果组成，我要一个一个地数清楚糖果，那么我可以怎么做。没错！循环去数。因此，记忆for...of就是循环的作用，每次循环可以得到被循环对象里面的值。

举例说明：for...of循环一个数组，每次循环得到数组里的值。

const arr = ['hello', 'web']
for (let i of arr) {
  console.log(i)
}
// 输出 hello
// 输出 web

只记忆 for...of的功能，剩下的就是for...in的功能。

因此for...in的功能就是迭代普通对象的所有可枚举的key值。

举例说明：

const obj = {
  a: 'do',
  b: 'work',
}
for (let i in obj) {
  console.log(i)
}
// 输出 a
// 输出 b

因此，for...of不能用于循环普通的对象比如上述的obj。因为普通对象是由键值对构成的，是不可迭代的。for...of的使用必须是可迭代的对象，比如数组、Map、Set、String等。

哎，由于for...in可以用于循环对象的key值。数组是特殊的对象，因此for...in可以用于循环数组。输出的就是数组的下标值。

const arr = ['hello', 'web']
arr.testKey = '可枚举的属性'

for (let i in arr) {
  console.log(i)
}
// 输出 0
// 输出 1
// 输出 可枚举的属性

以上就是一个简单的记忆与区分，附上MDN上关于这两个api的解释

for...of - JavaScript | MDN

for...in - JavaScript | MDN

---

❤️欢迎素质三连[点赞 + 收藏 + 评论]

祝大家早安、午安、晚安。