前言🍧🍧

最近在复习备战期末考试，已经有一顿时间没有更新文章了，今天在复习的空档期来水（更新）一期文章。今天主要讲的就是新手在初次学习JavaScript的时候可能会混淆的两个东西：for of和 for in

大致了解⭐️⭐️

对于初学者，我们或许只知道无论是for of 还是for in他们都有一个功能那就是遍历，至于具体的细节或许我们不是很清楚，那么接下来我们就来详细的区分一下for of 和for in他们之间的不同点和相同点。

首先介绍一下for of 👟👟

for of 是在es6中新加入的东西，如果说for of 给我们最直观的体现就是使用for of 去遍历数组的话，直接打印输出的是value值，这一点和for in打印输出的是索引值index是不同的，这是对于我们这些初学者最直观的感受。

其次for of 最本质的区别就是他不能用来直接遍历普通的对象，而只能遍历部署了iterator(迭代器)接口的类数组对象.

那么什么是iterator呢?

迭代器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）

下面的例子正好说明for of 是不能遍历普通的对象的：

let obj2 = { x: 1,y: 2, z: 3,};
for (const value of obj2) {
  console.log(value);
}
//遍历时出错
//Uncaught TypeError: obj2 is not iterable

这是因为普通对象不是 可迭代对象,这里面提到的可迭代对象是一种实现了迭代器协议的对象，其中的迭代器协议要求对象部署了这个iterator,而这个方法是挂载在原型下Symbol(Symbol.iterator)方法，因此我们在使用for of 去处理比如说是数组的时候,其实就是调用了数组原型下的这个方法,每当调用这个方法之后,方法内部就会返回next方法,这就相当于是''指针'', 下次在调用的时候''指针''就后移动

对此，可能很多同学还是感觉蒙蒙的，这里举一个例子来说明：

let obj = {
  data: [1, 2, 3],
  // 这里给对象实现了一个迭代器方法
  [Symbol.iterator]() {
    let index = 0;
    const data = this.data;
    return {
      next() {
        if (index < data.length) {
          return {  value: data[index++], done: false, };
        } else {
          return { done: true };
        }
      },
    };
  },
};
for (const value of obj) {
  console.log(value);
}//1 2 3

在经过这样的处理之后，我们就给对象实现了迭代器的方法。这样我们就可以使用for of 来对这个obj对象的遍历，大家看完这段代码肯定是一头雾水，这主要是对Symbol.iterator和next方法的不了解，我就来简单的介绍一下这两个方法。

• Symbol.iterator这个是什么呢？其实这个属性是一个函数，他的返回值是一个迭代器对象，我们在对象中定义这个属性之后，当我们使用for of 的时候，语言机制会去寻找一种方法，这个方法就是next方法，当我们在对象中使用这个属性的时候，其实就是覆盖了默认的迭代器，这样我们就可以实现自己的逻辑代码。
• 其次我们要注意返回的迭代器对象：我们要知道，迭代器对象是要带有next方法的对象，而且这个next方法的返回值还必须是一个包含value和done的对象。其中value是当前值,而done表示是否全部遍历完成.
• 那么迭代器一般是如何使用的呢?其实无论是数组,对象,集合或者是其他的数据结构,迭代器中都是提供了next方法,每次去调用这个next方法都会返回这个数据集合的下一个值,联想一下C语言中的''指针''移动,这也就解释了为什么这里面要有一个next方法了.
• 所以这部分代码也就变的比较的好理解了，我们实现了了一个Symbol.iterator方法，然后在里面定义了索引index并获取到了data数组，接着我们就return一个迭代器对象，里面包含next方法，然后进行判断如果当前索引小于数组长度，那么就返回一个对象里面包含此时的value值和done，并且done为false，表明此时迭代并没有完成，否则就是最终返回一个done为true，表明此时迭代事件已经完成。

经过上面的处理大家也看到这样做是非常麻烦的,如果我们不想要通过这种方式去获取每一个值呢?那么我们只能来使用一些巧妙的手段来处理一下:我们要避免直接的去遍历对象,而是要通过某种方法来进行一个过渡的处理.

所以如果我们要使用for of来去迭代对象，那么我们只能通过一些手段来处理加工一下才可以

let sum = 0;
let obj3 = {x: 1,y: 2, z: 3,};
for (const value of Object.values(obj3)) {
  sum += value;
}
console.log(Object.values(obj3));//[1,2,3]
console.log(sum);//6

在这里面我们使用了Object.values方法来获取对象中的值，经过处理之后返回一个数组，里面是包含对象中值的数组.而像数组，Map。Set，字符串，这都是内置了迭代器的类型，因此可以使用for of来进行迭代处理。当然这里面我们还可以使用类似Object.entries()和Object.keys()等方法来处理,这里就不再展开.

接着说一下for in🚴‍♀🚴‍♀

在介绍完for of之后我们紧接着说一下for in，for in最直接的体现就是它可以直接的遍历处理对象类型的数据，不需要像for of那样在给他增加一个迭代器属性，下面我就来介绍一下：

let obj4 = {
  hobby: "唱,跳,rap",
  name: "kun",
  sex: "男",
};
for (const key in obj4) {
  console.log("属性名" + key, "属性值" + obj4[key]);
}

采用这种方式就不会出现报错，可以正常的打印输出值。因此如果我们在实际场景中使用的时候一般处理对象肯定是要使用for in来处理，但是像是如果遇到字符串，map等等这些本身带有迭代器的类型我们就可以交给for of 来处理，具体场景具体说明。

同时这也应证了上面所说的使用for in 中打印的是key值，因此我们要想获取属性值要通过obj4[key]。

同样使用for in我们也可以处理类似像map，set，string等类型的数据。但是和for of 最显著的区别还是我们可以直接处理对象.

总结👨‍🎓👨‍🎓

这里面我们解释了为什么for of 不能用来处理普通的对象,以及如何去处理,并且介绍了每种方法适合用来解决的问题,因此我们在使用的时候要根据具体的场景来具体的分析处理.