摘要：就稱為部署了遍歷器接口。是一個(gè)函數(shù)，調(diào)用它會(huì)生成一個(gè)遍歷器對(duì)象。它的屬性，也是一個(gè)遍歷器對(duì)象生成函數(shù)，執(zhí)行后返回它自己。返回遍歷器對(duì)象。下面是一個(gè)無限運(yùn)行的遍歷器對(duì)象的例子。

『ES6知識(shí)點(diǎn)總結(jié)』遍歷器iterator
本文內(nèi)容如下：

1 具有iterator接口的數(shù)據(jù)結(jié)構(gòu)
2 遍歷器過程
3 遍歷器作用：
4 模擬next()方法
5 使用while循環(huán)
6 TypeScript的寫法
7 Iterator接口與Generator函數(shù)
8 對(duì)象的遍歷器接口
8.1 對(duì)于類似數(shù)組的對(duì)象
9 調(diào)用Iterator接口的場(chǎng)合
9.1 解構(gòu)賦值
9.2 擴(kuò)展運(yùn)算符
9.3 yield*
9.4 其他場(chǎng)合
10 字符串的Iterator接口

【01】原生就具有Iterator接口，它們的遍歷器接口部署在Symbol.iterator屬性上：

Array，Object（類數(shù)組對(duì)象），Map，WeakMap，Set，WeakSet，字符串。

let arr = new Array();

let iterator =arr[Symbol.iterator]();

【02】其他數(shù)據(jù)結(jié)構(gòu)（主要是對(duì)象）的Iterator接口，都需要自己部署在Symbol.iterator屬性上面。（原型鏈上的對(duì)象具有該方法也可）。

【03】一個(gè)數(shù)據(jù)結(jié)構(gòu)只要具有Symbol.iterator屬性，就可以認(rèn)為是“可遍歷的”（iterable）。
就稱為部署了遍歷器接口。就可以遍歷所有成員?？赏ㄟ^for of 遍歷。

【04】遍歷器對(duì)象本身也有Symbol.iterator方法，執(zhí)行后返回自身。

gen是一個(gè)Generator函數(shù)，調(diào)用它會(huì)生成一個(gè)遍歷器對(duì)象g。它的Symbol.iterator屬性，也是一個(gè)遍歷器對(duì)象生成函數(shù)，執(zhí)行后返回它自己。

function* gen(){ // some code
}
var g = gen();

g[Symbol.iterator]() === g // true

【01】zyx456：說白了，等于這些數(shù)據(jù)結(jié)構(gòu)有一個(gè)方法（PS，這個(gè)方法稱為遍歷器函數(shù)）。

方法名是[Symbol.iterator]，方法中返回一個(gè)對(duì)象（PS，這個(gè)對(duì)象稱為遍歷器對(duì)象），該對(duì)象有一個(gè)next()方法。這個(gè)next()會(huì)遍歷數(shù)據(jù)結(jié)構(gòu)的成員。返回{value:XX||undefined , done:true||false}

let obj = {

? [Symbo.iterator] (){

return {next(){}}

}

}

調(diào)用遍歷器函數(shù)，就會(huì)返回一個(gè)遍歷器對(duì)象。

每次調(diào)用iterator.next()，就使用該數(shù)據(jù)結(jié)構(gòu)的一個(gè)成員，成員的值就是返回對(duì)象中value的值。done為false，最后會(huì)返回一個(gè)有value和done兩個(gè)屬性的對(duì)象。

從頭到尾依次使用數(shù)據(jù)結(jié)構(gòu)的成員。直到使用的成員都訪問完了。

當(dāng)數(shù)據(jù)結(jié)構(gòu)的成員已全部訪問了，此時(shí)，再調(diào)用iterator.next()。返回的對(duì)象中，value的值為undefined，done為true。

done屬性是一個(gè)布爾值，表示遍歷是否結(jié)束。

let arr = [1,2,3];

let iterator = arr[Symbol.iterator]();

iterator.next();//{value:"",done:false};

let arr = ["a", "b", "c"];
let iter = arr[Symbol.iterator]();//返回遍歷器對(duì)象。

iter.next() // { value: "a", done: false }
iter.next() // { value: "b", done: false }
iter.next() // { value: "c", done: false }
iter.next() // { value: undefined, done: true }

【03】遍歷器與它所遍歷的那個(gè)數(shù)據(jù)結(jié)構(gòu)是分開的。

一是為各種數(shù)據(jù)結(jié)構(gòu)提供一個(gè)統(tǒng)一的訪問接口；

二是讓數(shù)據(jù)結(jié)構(gòu)的成員可以按某種次序排列；

三是供for...of使用。

使用一個(gè)函數(shù)，函數(shù)參數(shù)是數(shù)組，返回一個(gè)對(duì)象，對(duì)象具有next()方法。

在next()中，使用一個(gè)變量，遍歷數(shù)組的下標(biāo)。通過和數(shù)組的長(zhǎng)度對(duì)比，來判斷返回不同的對(duì)象。

返回對(duì)象都有value和done屬性。

function Convert(arr){
    let index = 0;
    return {
        next (){
            if(index
zyx456：next返回的就是指針對(duì)象了。此時(shí)，it是對(duì)象，它的變量index是保存在函數(shù)中的。
對(duì)于遍歷器對(duì)象來說，done: false和value: undefined屬性都是可以省略的，因此上面的Covert函數(shù)可以簡(jiǎn)寫成下面的形式。
function Covert(array) {    var nextIndex = 0;
    return {
        next: function() {
            return nextIndex < array.length ? { value: array[nextIndex++] } : { done: true }; }
    }
}
【】下面是一個(gè)無限運(yùn)行的遍歷器對(duì)象的例子。
zyx456：僅了解。實(shí)用性不大。
遍歷器生成函數(shù)idMaker，返回一個(gè)遍歷器對(duì)象（即指針對(duì)象）。但是并沒有對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)，或者說，遍歷器對(duì)象自己描述了一個(gè)數(shù)據(jù)結(jié)構(gòu)出來。
function idMaker() {
    let index = 0;
    return {
        next: function() {
            return { value: index++, done: false }; }
    }
}var it = idMaker();

it.next().value // "0"
it.next().value // "1"
it.next().value // "2"
    // ...
使用while循環(huán)
有了遍歷器接口，數(shù)據(jù)結(jié)構(gòu)就可以用for...of循環(huán)遍歷，也可以使用while循環(huán)遍歷。
var $iterator = ITERABLE[Symbol.iterator]();
var $result = $iterator.next();
while (!$result.done) {
    var x = $result.value; // ...
    $result = $iterator.next();
}

TypeScript的寫法
遍歷器接口（Iterable）、指針對(duì)象（Iterator）和next方法返回值的規(guī)格可以描述如下。
interface Iterable {
    [Symbol.iterator](): Iterator, }

interface Iterator { next(value ? : any): IterationResult, }

interface IterationResult {
    value: any,
        done: boolean,
}
Iterator接口與Generator函數(shù)
var myIterable = {};

myIterable[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
};
[...myIterable] // [1, 2, 3]

// 或者采用下面的簡(jiǎn)潔寫法
let obj = { * [Symbol.iterator]() {
        yield "hello";
        yield "world";
    }
};
for (let x of obj) {
    console.log(x);
}
// hello
// world
對(duì)象的遍歷器接口
【】對(duì)象部署遍歷器接口并不是很必要，可以使用Map。
對(duì)于類似數(shù)組的對(duì)象
（存在數(shù)值鍵名和length屬性），部署Iterator接口，有一個(gè)簡(jiǎn)便方法，就是Symbol.iterator方法直接引用數(shù)組的Iterator接口。
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
// 或者
NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];
[...document.querySelectorAll("div")] // 可以執(zhí)行了
下面是類似數(shù)組的對(duì)象調(diào)用數(shù)組的Symbol.iterator方法的例子。
let iterable = {
    0: "a",
    1: "b",
    2: "c",
    length: 3,
    [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
    console.log(item); // "a", "b", "c"
}
調(diào)用Iterator接口的場(chǎng)合
有一些場(chǎng)合會(huì)默認(rèn)調(diào)用Iterator接口（即Symbol.iterator方法）。
解構(gòu)賦值
對(duì)數(shù)組和Set結(jié)構(gòu)進(jìn)行解構(gòu)賦值時(shí)，會(huì)默認(rèn)調(diào)用Symbol.iterator方法。
let set = new Set().add("a").add("b").add("c");
let [x, y] = set;
// x="a"; y="b"
let [first, ...rest] = set;
// first="a"; rest=["b","c"];
擴(kuò)展運(yùn)算符
擴(kuò)展運(yùn)算符（...）會(huì)內(nèi)部調(diào)用默認(rèn)的iterator接口。
可以將任何部署了Iterator接口的數(shù)據(jù)結(jié)構(gòu)，轉(zhuǎn)為數(shù)組。
// 例一
var str = "hello";
[...str] //  ["h","e","l","l","o"]

// 例二
let arr = ["b", "c"];
["a", ...arr, "d"]
// ["a", "b", "c", "d"]
let arr = [...iterable];
yield*
yield*后面跟的是一個(gè)可遍歷的結(jié)構(gòu)，它會(huì)調(diào)用該結(jié)構(gòu)的遍歷器接口。
let generator = function* () {
  yield 1;
  yield* [2,3,4];
  yield 5;};var iterator = generator();

iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }
其他場(chǎng)合
由于數(shù)組的遍歷會(huì)調(diào)用遍歷器接口，所以任何接受數(shù)組作為參數(shù)的場(chǎng)合，其實(shí)都調(diào)用了遍歷器接口。
下面是一些例子。

for...of
Array.from()
Map(), Set(), WeakMap(), WeakSet()（比如new Map([["a",1],["b",2]])）
Promise.all([])
Promise.race([])

字符串的Iterator接口
字符串是一個(gè)類似數(shù)組的對(duì)象，原生具有Iterator接口。
var someString = "hi";
typeof someString[Symbol.iterator]    // "function"
var iterator = someString[Symbol.iterator]();
iterator.toString(); // => "[object String Iterator]"
iterator.next() // { value: "h", done: false }
iterator.next() // { value: "i", done: false }
iterator.next() // { value: undefined, done: true }
let some = "book";
for (let i of some){
    console.log(i)
}