for...in 和 for...of 语句都可以用来遍历一个变量，下面分别使用 for...in 和 for...of 来遍历一个普通对象和数组，结合具体的示例代码来进行比较两者之间的异同点。
1、for...in 语句
【JS中的for...in和for...of循环语句有什么区别】（1）使用 for...in 来循环遍历一个普通对象
for...in 语句可以用来循环一个对象所有可枚举的属性，下面的代码是用来打印 obj 对象所有的属性字段和属性值：
let obj = {type: 1, keyword: "js"};
for (let key in obj) {
console.log(key, obj[key])
}输出结果如下：
type 1
keyword js（2）使用 for...in 来循环遍历一个数组
如果使用 for...in 语句来遍历一个数组，它遍历的结果是数组的下标，具体测试代码如下：
let obj = ['type', 'keyword']
for (let key in obj) {
console.log(key, obj[key])
}此时的 obj 是一个数组对象，输出结果如下：
0 type
1 keyword因此可以得出以下的结论：
- 如果使用 for...in 来遍历一个对象，返回的结果是对象的属性名称；
- 如果使用 for...in 来遍历一个数组，返回的结果是数组的下标；
（1）使用 for...in 来循环遍历一个普通对象
for...of 语句主要用来循环一个可迭代对象的属性，要成为可迭代对象， 一个对象必须实现 @@iterator 方法，这意味着对象（或者它原型链上的某个对象）必须有一个键为 @@iterator 的属性，可通过常量 Symbol.iterator 访问该属性。
对于普通的对象，其实并不是可迭代对象，如果直接使用 for...of 遍历的话，会报错的，下面来测试一下：
let obj = {type: 1, keyword: "js"};
for (let key of obj) {
console.log(key, obj[key])
}运行后，出现下面的错误，直接提示 obj 不是可迭代对象，如下：
文章图片
那么如何使用 for...of 来遍历对象属性呢，首先需要做的就是将 obj 对象转换成一个可迭代对象，这里可以借助 Object.keys() 方法，调整后的代码如下：
let obj = {type: 1, keyword: "js"};
for (let key of Object.keys(obj)) {
console.log(key, obj[key])
}输出结果如下：
type 1
keyword js（2）使用 for...in 来循环遍历一个数组
如果使用 for...in 语句来遍历一个数组，它遍历的结果是数组的元素值，具体测试代码如下：
let obj = ['type', 'keyword']
for (let key of obj) {
console.log(key)
}输出的结果如下：
type
keyword因此可以得出以下的结论：
- 不能使用 for...of 语句来直接遍历一个普通对象，只能用来遍历一个可迭代的对象
- 如果使用 for...of 来遍历一个数组，返回的结果是数组的元素值；
（1）相同点
- for...in 和 for...of 都可以用来遍历一个可迭代对象，比如Array、Map、Set、arguments 等；
- for...in 可以用来直接遍历一个普通对象，而 for...of 不能；
- 当使用 for...in 来遍历一个数组时，返回的结果是数组的下标；而当使用 for...of 来遍历一个数组时，返回的结果是数组的元素值；
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration
推荐阅读
- VUE|vue项目中 localStorage 的用法建议
- Vite|Vite使用.env文件
- javascript|客观评价 增长趋势比 vite 还猛的 TailwindCSS
- 前端|新提案，初识CSS的object-view-box属性
- 前端|注意避坑，Vue Router 4: 路由参数在 created/setup 时不可用
- 前端|停止像这样使用 “async/await“，改用原版
- 微信小程序|微信小程序学习之旅--第一个页面的制作
- Jquery|4.jquery（函数）
- 前端学习日志|JavaScript基础语法_JavaScript简单类型和复杂类型