JavaScript中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 不能用来处理普通的对象,以及如何去处理,并且介绍了每种方法适合用来解决的问题,因此我们在使用的时候要根据具体的场景来具体的分析处理.

到此这篇关于JavaScript中for of和for in的区别详解的文章就介绍到这了,更多相关JavaScript for of和for in区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论