ES2015 Iterable（可迭代的）接口

一、为什么ES2015提供Iterable（可迭代的）接口

ES中能够表示有结构的数据类型越来越多，以前有数组、对象等等，ES2015中新增了Map和Set对象…

为了给各种各样的数据结构提供统一遍历方式，ES2015提供了Iterable（可迭代的）接口

接口的概念：可以理解为一种规格标准

例如在ES中，任意一种数据类型都有toString()方法，这是因为他们都实现了统一的规格标准，即他们都实现了统一的接口

实现Iterable接口就是for…of的前提

二、了解for…of 的内部原理

在控制台打印数组、Set、Map这三个可以直接用for…in 遍历的对象

可以发现他们的原型对象当中都有一个以Symbol开头的属性，叫做iterator：

通过观察我们大概可以猜到

Iterable接口约定的就是对象当中必须要去挂载一个叫做iterator的方法

iterator方法是干什么的呢?

我们定义一个数组arr，手动调用一下它的iterator方法

它返回的是数组的迭代器对象，展开发现，对象里面有一个next方法

我们先定义一个变量来接收返回的迭代器对象，然后手动调用一下它的next方法

从上可以发现，在这个迭代器当中，内部维护了一个数据指针，每调用一次next()，这个指针都会往后移一位。done属性的作用是标识里面的数据是否被遍历完了。

为什么for … of 能作为遍历所有数据结构的统一方式？

因为它内部就是去调用被遍历对象的iterable方法得到一个迭代器，从而去遍历内部所有的数据。

只要对象也实现了iterable 接口，那我们就可以实现使用for…of 遍历对象

三、实现可迭代接口 Iterable

在ECMAScript中实现可迭代接口：在对象中挂一个iterator方法，在这个方法中返回一个迭代器对象

// 实现可迭代接口 Iterable
const obj = {
  [Symbol.iterator]:function(){
    return {
      next(){
        return{
          value:'zce',
          done:true
        }
      }
    }
  }
}

这时候我们再使用for of 去遍历 obj ，它就不会再报错了。

我们可以发现，它一共有3层对象，我们先梳理一下他们之间的关系

3.1、最外层自定义的对象：

{
[Symbol.iterator]:function(){
    return {
      next(){
        return{
          value:'zce',
          done:true
        }
      }
    }
  }
}

它实现了可迭代接口(英文名称为Iterable)

这个接口约定：内部必须要有一个用于返回迭代器的iterator方法

3.2、其次是，iterator方法返回的这个对象：

{
  next(){
    return{
      value:'zce',
      done:true
    }
  }
}

它实现了迭代器接口（英文为Iterator）
这个接口约定：内部必须要有一个用于迭代的next方法

3.3、最后就是在next方法中返回的对象：

{
  value:'zce',
  done:true
}

这个对象实现的叫做迭代结果接口(英文为iterationResult)

这个接口约定：内部必须要有一个value属性，用来表示当前被迭代
到的数据，还必须有个done属性，布尔值，用来表示迭代是否结束

四、测试可迭代接口

const obj = {
	store: ['foo', 'bar', 'baz'],
	[Symbol.iterator]: function () {
		let index = 0;
		const _this = this;
		return {
			next() {
				const result = {
					value: _this.store[index],
					done: index >= _this.store.length
				};
				index++;
				return result;
			}
		};
	}
};

for (const item of obj) {
	console.log(item);
}