for...in 和 for...of
简单来说就是它们两者都可以用于遍历，不过for in遍历的是数组的索引（index），而for of遍历的是数组元素值（value）
// for in
var obj = {a:1, b:2, c:3}
for (let key in obj) {
console.log(key)
}
// a b c
//for of
const array1 = ['a', 'b', 'c']
for (const val of array1) {
console.log(val)
}
// a b c
通过上面这个demo可以看到，for in可以用来遍历对象，for of来遍历数组
for in
mdn： for...in语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。
for in更适合遍历对象，当然也可以遍历数组，但是会存在问题 例如:
var arr = [1,2,3]
// 1. 索引为字符串数字，不能直接进行几何运算
for (let index in arr) {
let res = index + 1
console.log(res)
}
//expect result: 01 11 21
// 2. 遍历顺序有可能不是按照实际数组的内部顺序
使用for in会遍历数组所有的可枚举属性，包括原型，如果不想遍历原型方法和属性的话，可以在循环内部判断一下，使用hasOwnProperty()方法可以判断某属性是不是该对象的实例属性
var arr = [1,2,3]
Array.prototype.a = 123
for (let index in arr) {
let res = arr[index]
console.log(res)
}
//1 2 3 123
for(let index in arr) {
if(arr.hasOwnProperty(index)){
let res = arr[index]
console.log(res)
}
}
// 1 2 3
注意
- for ... in 不应该用于迭代一个关注索引顺序的数组
- for ... in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用Array.prototype.forEach()和for ... of
- for ... in 更多的是为了调试Object，查看key-value
for of
MDN： for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句
var arr = [1,2,3]
arr.a = 123
Array.prototype.a = 123
for (let value of arr) {
console.log(value)
}
//1 2 3
注意
- 它是ES6新增的语法
- 它不能遍历对象，因为对象没有迭代器
- for of遍历的是数组元素值，而且for of遍历的只是数组内的元素，不包括原型属性和索引
参考文档
for in 和 for of 的区别 - 掘金 (juejin.cn)
for...of - JavaScript | MDN (mozilla.org)
