前言

for in 在实际的使用中应该是很少看到它的身影，即使对象的遍历也很多少使用它；
for of 循环使用起来很是方便，要比 forEach 好用很多；
- 但是在使用 for of 的时候，无法获得数组 / 字符串的元素对应的索引值；

一、`for in`

代码展示：

js 复制代码

const obj = {
    name: '红怡',
    age: 18,
    gender: '女'
}
for (const item in obj) {
    console.log(item)
}

如果你只要考虑对象本身的属性，而不是它的原型，那么使用 getOwnPropertyNames() 或执行 hasOwnProperty()来确定某属性是否是对象本身的属性（也能使用propertyIsEnumerable）。

for in 是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用 Array.prototype.forEach() 和 for of，那么for in到底有什么用？
它最常用的地方应该是用于调式，可以更方便的去检查对象属性（通过输出到控制台和其他方式）。尽管对于处理存储数据，数组更实用些，但是你在处理有 key-value数据，需要去检查其中的任何键是否为某值的情况时，还是推荐用 for in。

MDN ➡ for of用法
语法：
js 复制代码
```
for (const/let variable of iterable) {
    // statements
}
```
- iterable：
  - 被迭代枚举器属性的对象；
- variable：
  - 在每次迭代中，将不同属性的值分配给变量；
- 如果不想修改语句中的变量，也可以使用 const 代替 let;
❗ 注意：
- for of 语句在 可迭代对象 （包括：Array、Map、Set、String、TypeArray、arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句；

代码展示：

js 复制代码

const arr = [1, 2, 3];
for (const item of arr) {
    console.log(item);
}

无论是 for in 还是 for of 语句都是迭代一些东西。他们之间的主要区别在于他们的迭代方式不同；
- for in 语句以任意顺序迭代对象的 可枚举属性；
- for of 语句遍历 可迭代对象 定义要迭代的数据；
简单来说，使用 for in 进行遍历的时候，它不仅会遍历自身的属性和方法，也会遍历原型上的属性和方法；

当我们使用 for of 循环遍历数组的时候，有时候会使用到数组的index，但是 for of 又得不到 index，所以最后不得不去使用 forEach去遍历数组；
解决办法 ：
- 将循环的数组进行改造，使其拥有索引和值的同时又能被forof循环；
- 在 Array 构造函数上有一个数组的方法 entries()，该方法返回一个 数组的迭代对象 ，该对象包含数组的索引和值，迭代对象中的 key === 索引值 value === 索引对应的元素，此时就可以正常访问索引和值了；

代码展示：

基本展示：

js 复制代码

const arr = [1, 2, 3];

console.log(arr.entries());
console.log(arr);

for (const item of arr.entries()) {
    console.log(item)
}

使用解构进行简化：

js 复制代码

const arr = [1, 2, 3];
for (const [index, value] of arr.entries()) {
    console.log(index, value)
}