摘要：迭代器在原有的數(shù)據(jù)結(jié)構(gòu)類型上新增了兩種類型，我們在使用的時候還可以通過自由組合的形式使用這些結(jié)構(gòu)類型達(dá)到自己想要的數(shù)據(jù)結(jié)構(gòu)，這就需要一種統(tǒng)一的接口機(jī)制供我們調(diào)用處理不同的數(shù)據(jù)結(jié)構(gòu)。

萬丈高樓平地起，欲練此功，必先打好基本功: )

在了解 ES6 新增的變量類型前，我們必須先知道 JavaScript 在ES6之前，有如下六種基本數(shù)據(jù)類型：Null、Undefined、Number、String、Boolean和Object。而 ES6 中，新增了第七種數(shù)據(jù)類型：Symbol。
上述七種數(shù)據(jù)類型作如下類型劃分：

基本類型： Undefined、Null、Boolean、String、Number，這五種類型的變量都是直接把實際值存儲在棧內(nèi)存當(dāng)中，操作或訪問的時候都是直接對實際值進(jìn)行的.

引用類型： Object。Object 類型的變量是把指向堆內(nèi)存的地址值存儲在棧內(nèi)存當(dāng)中的一類數(shù)據(jù)。（關(guān)于堆棧的知識將會在后面的文章中作介紹。）

有關(guān)基本類型和引用類型的說明，網(wǎng)上已經(jīng)有很多文章有說明介紹，為免篇幅過長，這里就不再重復(fù)敘述了。

這里我們著重說一下 Symbol 類型：


Symbol 是一個函數(shù)，調(diào)用該函數(shù)，返回的唯一值就是 Symbol 類型值；

let symbol = Symbol();
symbol;         //Symbol()
typeof symbol;  //symbol
let symbol1 = new Symbol();     //Uncaught TypeError: Symbol is not a constructor

let testStr = "this is a string",
    testObj = {obj: "this is a object"},
    testArr = ["this","is","a","array"],
    testFn = () => {
        console.log("this is a function");
    },
    testSym = Symbol("this is a symbol"),
    symbolStr = Symbol(testStr),            //Symbol(this is a string)
    symbolObj = Symbol(testObj),            //Symbol([object Object])
    symnolArr = Symbol(testArr),            //Symbol([object Object])
    symbolFn = Symbol(testFn),              //Symbol(() => {console.log("this is a function");})
    symbolSym = Symbol(testSym);            //Uncaught TypeError: Cannot convert a Symbol value to a string

let symbol1 = Symbol("test"),
    symbol2 = Symbol("test");
symbol1 == symbol2;         //false
symbol1 === symbol2;        //false

let symbol = Symbol("this is symbol"),
    str = "this is string",
    num = 2,
    symStr = symbol.toString();
    
let newStr = symbol + str;          //Uncaught TypeError: Cannot convert a Symbol value to a string
let newNum = Symbol + num;          //Uncaught TypeError: Cannot convert a Symbol value to a number
symStr;                             // Symbol(this is symbol)

let symbol = Symbol("this is symbol"),
    symbol1 = Symbol("this is symbol");
let obj = {
    [symbol]: "this is a",
    [symbol1]: "this is b"
};
obj;            //{Symbol(this is symbol): "this is a", Symbol(this is symbol): "this is b"}

let str = "test",
    str1 = "test",
    obj = {};
obj[str] = "測試非symbol類型命名的屬性";
obj;            //{test: "測試非symbol類型命名的屬性"}
obj[str1] = "再次測試非symbol類型命名的屬性";
obj;            //{test: "再次測試非symbol類型命名的屬性"}

let symbol = Symbol("this is symbol"),
    symbol1 = Symbol("this is symbol");
let symbolObj = {
    [symbol]: "this is a",
    [symbol1]: "this is b",
}
Object.getOwnPropertySymbols(symbolObj);    //[Symbol(this is symbol), Symbol("this is symbol")]

let symbol = Symbol("this is symbol"),
    symbol1 = Symbol("this is symbol");
let obj = {
    [symbol]: "this is a",
    [symbol1]: "this is b",
    d: "test"
};
for(key in obj){
    console.log(key);               // d
}
Object.keys(obj);                   // ["d"]
Object.getOwnPropertyNames(obj);    // ["d"]
JSON.stringify(obj);                //{d:"test"}

//仍可訪問到Symbol值定義的屬性鍵和屬性值
let symKeys = Object.getOwnPropertySymbols(obj);  
symKeys;                    //[Symbol(this is symbol), Symbol(this is symbol)]
symKeys[0];                 //Symbol(this is symbol)
obj[symKeys[0]];            //this is a

let symbol = Symbol("this is symbol"),
    symbol1 = Symbol.for("this is symbol"),
    symbol2 = Symbol.for("this is symbol");
symbol === symbol1      //false
symbol === symbol2      //false
symbol1 === symbol2     //true

通過 Symbol 創(chuàng)建的值有如下兩種情況：
被登記的與未被登記的。


什么是被登記的？在

let s1 = Symbol.for("foo");
console.log(Symbol.keyFor(s1)); // "foo"

var s2 = Symbol("foo");
console.log(Symbol.keyFor(s2) ); // undefined

這里還有一些 MDN 關(guān)于 Symbol 的屬性介紹，因為感覺在日常開發(fā)中使用的概率比較低，因此也不贅述一些自己的理解了，有興趣的朋友可以去看看https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol

關(guān)于 Symbol 的總結(jié)： 對于 Symbol 的使用，實用性最高的我覺得是 symbol 值用于屬性命名的情況，在一些開發(fā)情況下，對一個 Object 對象進(jìn)行遍歷的時候，希望某一些屬性不被 for in 或 Object.keys 遍歷出來，避免做 if 或 switch 情況處理，這時候使用 Symbol 定義屬性名是個不錯的選擇。

在原有 ES5 的屬性命名和賦值過程中，多人協(xié)作開發(fā)可能會導(dǎo)致一些屬性名重命名而導(dǎo)致值覆蓋，對“半私有屬性”屬性使用 Symbol 命名屬性名會是個很好的選擇。

ES6 在原有的數(shù)據(jù)結(jié)構(gòu)類型（ Array、Object ）上新增了兩種類型（ Map、Set ），我們在使用的時候還可以通過自由組合的形式使用這些結(jié)構(gòu)類型達(dá)到自己想要的數(shù)據(jù)結(jié)構(gòu)，這就需要一種統(tǒng)一的接口機(jī)制供我們調(diào)用處理不同的數(shù)據(jù)結(jié)構(gòu) —— Iterator。

ES6中，只要被遍歷“對象”存在 可迭代協(xié)議 ， 即System.iterator 屬性，該對象都是被認(rèn)為是“可遍歷的”。

在 ES6 中，有三類數(shù)據(jù)結(jié)構(gòu)原生具備 Iterator 接口：__數(shù)組、某些類似數(shù)組的對象（如 字符串、類似數(shù)組形式的對象）、Set 和 Map 結(jié)構(gòu)數(shù)據(jù)__。

迭代器協(xié)議 定義了一種標(biāo)準(zhǔn)的方式來產(chǎn)生一個有限或無限序列的值，每次遍歷都會首先調(diào)用被遍歷數(shù)據(jù)集合對象中的 [Symbol.iterator]() 方法，該方法返回一個 Symbol對象的iterator屬性 ，該屬性擁有執(zhí)行迭代對象的 next 方法，并返回一個對象，如下是一段模擬 next 方法的代碼

function Iterator(arr){
    let nextIndex = 0;
    return {
        next: function(){
            return nextIndex < arr.length ? {value: arr[nextIndex++], done: false} : {value: undefined, done: true};
        },
        [Symbol.iterator]: function() { return this }
    }
}
let example = Iterator(["a", "b"]);

example.next()      // {value: "a", done: false}
example.next()      // {value: "b", done: false}
example.next()      // {value: undefined, done: true}       //遍歷結(jié)束

返回的對象中必須包含如下兩個屬性

{
    done,       //迭代是否已經(jīng)執(zhí)行完畢  迭代完畢時返回true，否則返回false，返回false時會繼續(xù)執(zhí)行迭代
    value       //當(dāng)前成員的值     迭代完畢時返回undefined，否則返回當(dāng)前成員的值
}

擴(kuò)展運算符

擴(kuò)展運算符（…）會默認(rèn)調(diào)用 iterator 接口。

解構(gòu)賦值

對數(shù)組和Set結(jié)構(gòu)進(jìn)行解構(gòu)賦值時，會默認(rèn)調(diào)用 Symbol.iterator 方法。

yield*

yield*后面跟的是一個可遍歷的結(jié)構(gòu)，它會調(diào)用該結(jié)構(gòu)的 iterator 接口。

for...of

執(zhí)行 for...of循環(huán)時，會調(diào)用 iterator 接口對數(shù)據(jù)進(jìn)行處理。

Array.from()

在 Array.form() 時，會遍歷數(shù)據(jù)，調(diào)用 iterator 接口返回相應(yīng)數(shù)據(jù)

其它情況還有
Map() ， Set() ， WeakMap() ， WeakSet() （比如new Map([["a",1],["b",2]])） ， Promise.all() ， Promise.race() 。

順帶一提：

在ES6中，具有 System.iterator 屬性的對象均可通過 for...of 進(jìn)行遍歷

let arr = ["1","2","3"];
arr.pro = "test";
for (let i in arr) {
  console.log(arr[i]);          //1  2  3  test
}
for(let i of arr) {
    console.log(arr[i]);        //1  2  3
}

for...of 的相比于 forEach 、 for...in ，其好處在于： forEach 循環(huán)無法通過 break 、 continue 、 return 跳出循環(huán)，而 for...of 可以； for...in 循環(huán)設(shè)計的目的是用于遍歷包含鍵值對的對象，對數(shù)組并不是那么友好，而 for...of 遍歷輸出的值會在輸出數(shù)據(jù)后默認(rèn)遍歷結(jié)束。

關(guān)于 Iterator 的總結(jié)： Iterator作為一種統(tǒng)一的接口機(jī)制供我們調(diào)用處理不同的數(shù)據(jù)結(jié)構(gòu)，讓可以用相同的方式來遍歷集合，而不用去考慮集合的內(nèi)部實現(xiàn)，若數(shù)據(jù)的形式發(fā)生改變，只要數(shù)據(jù)內(nèi)部還存在 System.iterator 屬性，那遍歷的代碼就可以不用做修改直接使用。 同時，其服務(wù)于 for...of 循環(huán)， for...of 又有效地避免了以往對數(shù)據(jù)集僅能通過 forEach 、 for..in 遍歷時遇到的一部分問題。

以上。

文章觀點內(nèi)容如有錯誤歡迎指出交流，相互進(jìn)步