for...in和for...of有什么区别？

for...in 和 for...of 都是 JavaScript 中的循环语句，用于遍历数据结构中的元素。

二者对数据结构元素的遍历的不同点可以在三个方面，下面我们直接使用代码进行阐述：

1、遍历数组

遍历数组时，for...in 打印的是数组的索引值，从0开始。for...of 打印的就是数组每一项的值

const arr = ['a', 'b', 'c', 'd', 'e']
for(let n in arr) {
    console.log(n); // 索引
}
for(let n of arr) {
    console.log(n); // 值
}

2、遍历对象

遍历对象时，for...in 打印的是对象的 key键。for...of 不能遍历对象，for...of 循环不能直接用于遍历对象，原因是对象不是可迭代的（iterable），使用 for...of 遍历对象会报错。

const obj = { n:1, m:2, k:3 }
for(let n in obj) {
    console.log(n); // key键 n,m,k
}
/* for(let n of obj) {
    console.log(n); // 报错 forOf不能循环 对象没有iterator接口——也就是对象不可迭代iterator
} */

尝试 for...of 遍历对象：

3、遍历对象数组

其实遍历对象数组，就是对前面两种形式的运用，for...in 用于遍历拿到索引或者key键，for...of 拿到数组的项

const arrObj = [
    {name:'张三', age:18},
    {name:'李四', age:19},
]
// 使用 for of 遍历数组成员
for(let nObj of arrObj) {
    for(let n in nObj) {
        console.log( nObj[n] );
    }
}

总结

for...in 常用于遍历对象，for...of 常用于遍历数组