ES6之for...of和for...in

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

Iterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。

Iterator 的遍历过程是这样的，先创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。指针对象的next方法，用来移动指针。开始时，指针指向数组的开始位置。然后，每次调用next方法，指针就会指向数组的下一个成员。next方法返回一个对象，表示当前数据成员的信息。这个对象具有value和done两个属性，value属性返回当前位置的成员，done属性是一个布尔值，表示遍历是否结束，即是否还有必要再一次调用next方法。总之，调用指针对象的next方法，就可以遍历事先给定的数据结构。

Iterator 接口的目的，就是为所有数据结构，提供了一种统一的访问机制，当使用for...of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。

ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。

ES6 的有些数据结构原生具备 Iterator 接口（比如数组），即不用任何处理，就可以被for...of循环遍历。

原生具备 Iterator 接口的数据结构如下：

• Array
• Map
• Set
• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象

对象（Object）之所以没有默认部署 Iterator 接口，是因为对象的哪个属性先遍历，哪个属性后遍历是不确定的，需要开发者手动指定。一个对象如果要具备可被for...of循环调用的 Iterator 接口，就必须在Symbol.iterator的属性上部署遍历器生成方法。

字符串是一个类似数组的对象，也原生具有 Iterator 接口。并不是所有类似数组的对象都具有 Iterator 接口，一个简便的解决方法，就是使用Array.from方法将其转为数组。

本质上，遍历器是一种线性处理，对于任何非线性的数据结构，部署遍历器接口，就等于部署一种线性转换。 

下面步入正题

ES6引入了for...of循环，作为遍历所有数据结构的统一的方法。

一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。

使用for...of，Set 结构遍历时，返回的是一个值，而 Map 结构遍历时，返回的是一个数组，该数组的两个成员分别为当前 Map 成员的键名和键值。

对于字符串来说，for...of循环还有一个特点，就是会正确识别 32 位 UTF-16 字符。

对于普通的对象，for...of结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用。但是，这样情况下，for...in循环依然可以用来遍历键名。

如果想要用for...of来循环对象，一种解决方法是，使用Object.keys方法将对象的键名生成一个数组，然后遍历这个数组。

for (var key of Object.keys(obj)) {
  console.log(key + ': ' + obj[key]);
}

JavaScript 原有的for...in循环，只能获得对象的键名，不能直接获取键值。ES6 提供for...of循环，允许遍历获得键值。for...in循环读取键名，for...of循环读取键值。如果要通过for...of循环，获取数组的索引，可以借助数组实例的entries方法和keys方法（所以之前看到的很多博客上说for...of遍历拿不到数组的索引是不正确的）。同样，如果想要通过for...in循环获得对象的键值也是有办法的，如下面的代码。 

let es6 = {
    name:"Clarence_W",
    age:25,
    job:"coder"
}

for(let item in es6) {
    console.log(item,es6[item]);
}

//name Clarence_W
//age 25
//job coder

 说说for...in的几个缺点：

1、如果用for...in循环数组的话，返回的是索引值，并且索引值是字符串类型的数字；

2、for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。

3、在一些情况下，遍历顺序有可能不是按照实际数组的内部顺序；

所以综上几个缺点，for...in可以遍历数组，但是最好不要用它遍历数组，它更适合遍历对象。

吧啦吧啦整了这么多好像都是在说for...of有多好，对比起来确实比之前的循环有优势，比如说forEach不能跳出循环，for...of则可以与break、continue和return配合使用。

 

很多知识点都像for...of和for...in 一样，都知道for...of用来遍历数组，for...in用来遍历对象，但是两者能不能调换使用呢，调换使用会有什么问题呢，可能很多人就不知道了，个人觉得其中的原理还是要了解一些，即便看了一遍两遍没有理解没有记住，没有关系，自己动手去试一下，在结合理论，这样就会好很多。

前端的路还很长，路漫漫兮修远，吾将上下而求索。