JavaScript騷操做之遍歷、枚舉與迭代（上篇）

時間 2019-11-06

原文原文鏈接

標準操做 for循環

相信大部分搬磚工做者都寫過相似的代碼：node

var arr = ['element1', 'element2', 'element3'];

    for (var i = 0, len = arr.length; i < len; i++) {
        console.log(arr[i]);
    }

    // element1
    // element2
    // element3
複製代碼

這是一段標準的for循環代碼，經過變量i去追蹤數組arr的索引，達到訪問數組中每一位元素的目的。
es6

但不得不說，這是很是原始的一種方法，存在着幾個顯著缺點：數組

沒法只關注元素自己，須要花費精力去維護變量i以及邊界len；瀏覽器
當存在着多重嵌套時，將須要跟蹤維護多個變量i，代碼會很是複雜；函數
須要花費精力去處理越界問題，一些編譯型語言在遇到數組索引越界時會報錯，而JavaScript引擎將不會告訴你任何錯誤信息，錯誤定位成本會比較高。ui

數組自帶方法forEach

固然咱們可使用數組自帶的forEach方法進行數組的遍歷：編碼

var arr = ['element1', 'element2', 'element3'];

    arr.forEach(function(value, index, arr) {
        console.log(value);
    });

    // element1
    // element2
    // element3
複製代碼

一切看起來都是那樣的完美，即不須要花費精力去追蹤索引，又無需擔憂越界問題，簡直美滋滋。But，若是遍歷到某個特定條件想退出咋整？spa

var arr = ['element1', 'element2', 'element3'];

    arr.forEach(function(value, index, arr) {
        if (index === 1) {
            break;
        } else {
            console.log(value);
        }
    });

    // Uncaught SyntaxError: Illegal break statement
複製代碼

比較遺憾的是以上的代碼未能按照咱們的預期運行（break、continue等語句跨越了函數邊界），因此這個看似完美的辦法實際上只能一條道走到黑，像吃了炫邁同樣根本停不下來。當數組很大，沒辦法經過提早終止遍從來節省資源。code

for in循環

飯要一口一口的吃（飯桶請忽略），咱們能夠先解決花費時間防止數組越界的問題，例如可使用for in循環：對象

var arr = ['element1', 'element2', 'element3'];

    for (var i in arr) {
        console.log(arr[i]);
    }

    // element1
    // element2
    // element3
複製代碼

for in語句是一種精準的迭代語句，能夠枚舉對象的全部可枚舉屬性(可使用Object.getOwnPropertyDescriptor(targetObj, attrName)方法來查看對象的某個屬性是否可枚舉)。It means that，能夠用它來遍歷對象：

var obj = {
        a: 1,
        b: 1,
        c: 1
    };

    for (let attr in obj) {
        console.log(attr, obj[attr]);
    }

    // a 1
    // b 1
    // c 1
複製代碼

除了遍歷對象、數組以外，for in循環還可兼職遍歷字符串：

var str = 'I am a handsome boy!';

    for (var i in str) {
        console.log(str[i]);
    }

    // 太帥(chang)了，結果就不打印了
複製代碼

固然，也支持break、continue的操做，例子我就不寫了。

這玩意看起來很是的牛*，簡直就是萬能的。But，通常看上去什麼都會的人，實際上什麼都作不精（我就不同了，我不只看上去什麼都不會，還作很差），這個玩意也是同樣的，看看例子：

var father = {
        fatherAttr: 1
    };

    // 以father爲原型建立對象實例instance
    var instance = Object.create(father);

    instance.a = 1;
    instance.b = 1;
    instance.c = 1;

    for (var attr in instance) {
        console.log(attr, instance[attr]);
    }

    // a 1
    // b 1
    // c 1
    // fatherAttr 1

    // 獲取instance實例的自有屬性名
    console.log(Object.getOwnPropertyNames(instance));

    // ["a", "b", "c"]
複製代碼

上面這個例子中，首先以father對象爲原型建立了一個對象實例instance，而後爲這個實例instance添加了a、b、c三個屬性，接着使用for in循環遍歷這個對象。經過查看instance的自有屬性能夠發現，fatherAttr並非instance的屬性，而是其原型father的屬性，for in循環會將對象的原型屬性也一併列舉出來。故使用此方法去遍歷對象屬性的時候，須要加多一層判斷：

for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) {
            // 是對象的自有屬性，能夠盡情的玩耍了
        }
    }
複製代碼

for in循環枚舉原型屬性這個弊端，在操做數組上也是有一樣的問題，可是通常狀況下，使用它遍歷數組仍是比較保險的；畢竟數組的原型是JavaScript內建對象Array，Array對象的默認屬性都是不可枚舉的；但若是你連Array對象都敢修改的話，這個小小的bug對你來講也不是事了。

不得不說，for in循環仍是比較廣泛使用的遍歷對象的方法，這主要得益於其兼容性。固然，遍歷對象還有其餘的方法，稍遲再講。咱們繼續審判for in循環：

var str = 'a𠮷c';

    for (let index in str) {
        console.log(str[index]);
    }

    // a
    // 沒法用言語描述的字符
    // 沒法用言語描述的字符
    // c
複製代碼

ES5及以前處理字符串時，是以16位編碼單位爲基礎的；16位編碼顯然沒法給世界上全部的字符編碼，因此某些字符就須要使用32位進行編碼了，例如’𠮷‘字。

因此上面的例子出現打印四個字符的結果就不難理解了。按照道理來講，這不該該是for in循環的鍋，可是有些時候就是不想講道理。

雖然es6處理字符串強制使用UTF-16字符串來解決上述的問題（下面會有相關的例子），但for in循環依舊會存在上述的問題，若是你的程序須要兼容不支持es6的瀏覽器，能夠戳這裏

for of循環

經過for in循環能夠解決傳統for循環須要維護邊界的問題，但也引入了一些新問題，跟搬磚工做者的平常操做「解決3個bug，引入8個新bug」場景極度類似。

因此換個es6定義的for of循環操做試試：

let str = 'a 𠮷 c';

    for (let char of str) {
        if (char === ' ') {
            continue;
        } else {
            console.log(char);
        }
    }

    // a
    // 𠮷
    // c
複製代碼

從上面的例子來看，效果簡直是perfect：索引去掉了，邊界去掉了，想繼續就繼續，想退出就退出，還能順便解決一下字符串的編碼問題。

for of循環是一種依賴對象迭代器（迭代器的相關內容放在下一篇）的遍歷方法，每一次執行都會執行迭代器的next方法，返回正確的值。經過for of循環，無需花費精力去追蹤複雜的條件，下降了出錯的機率。

根據先褒後貶的套路，接下來看看其一些限制性：

運行環境爲ES6及以上版本，因此兼容性沒有for in循環以及傳統的操做好，若是須要考慮兼容上世紀的瀏覽器，就不能使用這個東西
只能用於遍歷可迭代對象，即存在生成器方法（用於產生迭代器）的對象，若是用於遍歷不可迭代對象，分分鐘報錯沒商量。能夠經過檢測對象的Symbol.iterator方法（相關內容將放在下一篇）是否爲函數來判斷對象是否可迭代。

let arr = ['a', 'b', 'c'];

    // 判斷其Symbol.iterator屬性是否爲函數
    if ((typeof arr[Symbol.iterator]).toUpperCase() === 'FUNCTION') {
        for (let element of arr) {
            console.log(element);
        }
    } else {
        console.log('此對象不可迭代');
    }

    // a
    // b
    // c
複製代碼

實際上，大多數JavaScript的內置對象都支持迭代，例如：Array、Set、Map、String等，當使用for of循環遍歷上述對象時，會使用其默認的生成器生成的迭代器：

let map = new Map([['a', 1], ['b', 1], ['c', 1], ['d', 1]]);

    // 正經操做
    for (let item of map) {
        console.log(item);
    }

    // ["a", 1]
    // ["b", 1]
    // ["c", 1]
    // ["d", 1]

    // 使用解構，方便讀取值
    for (let [key, value] of map) {
        console.log(key, value);
    }

    // a 1
    // b 1
    // c 1
    // d 1
複製代碼

上面的例子使用了for of遍歷了Map類型實例map，迭代對象爲Map類型的默認生成器生成的迭代器。固然，像Array、Set、Map類型還提供了一些特殊的生成器，可讓搬磚工做者更方便的去處理其想關注的內容：

entries() 返回一個迭代器，其返回值爲鍵值對數組（Map集合的默認迭代器；對於Set集合，返回值數組的元素相同，即value）
keys() 返回一個迭代器，其返回值爲集合的鍵名（對於Set集合，此迭代器跟values迭代器返回值相同;對於數組，此迭代器返回值爲索引）
values() 返回一個迭代器，其返回值爲集合的值（Array、Set集合的默認迭代器）

let arr = ['a', 'b', 'c', 'd']
    let set = new Set(arr);

    for (let item of set.entries()) {
        console.log(item);
    }
    for (let item of arr.entries()) {
        console.log(item);
    }

    // ["a", "a"]
    // ["b", "b"]
    // ["c", "c"]
    // ["d", "d"]
    // [0, "a"]
    // [1, "b"]
    // [2, "c"]
    // [3, "d"]

    for (let item of set.keys()) {
        console.log(item);
    }
    for (let item of arr.keys()) {
        console.log(item);
    }

    // a
    // b
    // c
    // d
    // 0
    // 1
    // 2
    // 3

    for (let item of set.values()) {
        console.log(item);
    }
    for (let item of arr.values()) {
        console.log(item);
    }

    // a
    // b
    // c
    // d
    // a
    // b
    // c
    // d
複製代碼

除了JavaScript的內置對象，一些DOM標準的類型如NodeList也可使用for of循環進行遍歷：

let containers = document.querySelectorAll('.container');

    for (let node of containers) {
        // 搞事情專用註釋
    }
複製代碼

很遺憾的是，for of循環竟然不支持自定義對象的遍歷（心中一萬匹***奔騰而過......），因此若是不想使用for in循環遍歷對象，只能轉個彎了。

遍歷對象的轉彎操做

Object.keys()獲取鍵名數組

使用Object.keys()能夠獲取到對象實例的全部可枚舉屬性，其返回值爲一個數組，數組元素爲對象的鍵名：

let father = {
        fatherAttr: 1
    };

    // 以father爲原型建立對象實例instance
    let instance = Object.create(father);

    instance.a = 1;
    instance.b = 1;
    instance.c = 1;

    Object.defineProperty(instance, 'd', {
        writable: true,
        value: 1,
        enumerable: false,
        configurable: true
    });

    for (let key of Object.keys(instance)) {
        console.log(key);
    }

    // a
    // b
    // c
複製代碼

從上面的例子中能夠看出，Object.keys()方法並不會獲取對象的原型屬性以及自身不可枚舉屬性，這個是比較符合咱們的需求的；而且，這個玩意是ES5的特性，兼容性仍是比較好的，是筆者比較喜歡使用的方法。

固然，若是做死，往這個方法傳入非對象參數(如字符串)，其在ES5環境和ES6環境的表現是不同的：

console.log(Object.keys('I am a handsome boy!'));

    // ES5 直接報錯，但說不定是瀏覽器嫉妒個人帥氣纔會報錯的

    // ES6 估計見多了大風大浪，沒啥感受了
    // ["0", "1", "2", "3", "4", "5", ...]
複製代碼

另外，須要注意的一點，ES標準沒有規定這個枚舉順序，也就是說此方法的返回值的順序是不肯定的（包括下面的各類方法），若是對順序有要求，能夠儘可能使用map或者set集合進行操做。

Object.getOwnPropertyNames()獲取鍵名數組

此方法跟keys方法表現同樣，所不一樣的是，其返回的數組包含了對象的不可枚舉屬性：

let father = {
        fatherAttr: 1
    };

    let instance = Object.create(father);

    instance.a = 1;
    instance.b = 1;
    instance.c = 1;

    Object.defineProperty(instance, 'd', {
        writable: true,
        value: 1,
        enumerable: false,
        configurable: true
    });

    for (let key of Object.getOwnPropertyNames(instance)) {
        console.log(key);
    }

    // a
    // b
    // c
    // d
複製代碼

若是你仍是想做死，試試傳入一個字符串會發生什麼事，能夠本身去試試，而後評論區留下實驗結果。

Object.entries()獲取鍵值對數組

這個方法返回什麼東西就無需多言了吧，看例子：

let father = {
        fatherAttr: 1
    };

    let instance = Object.create(father);

    instance.a = 1;
    instance.b = 1;
    instance.c = 1;

    Object.defineProperty(instance, 'd', {
        writable: true,
        value: 1,
        enumerable: false,
        configurable: true
    });

    for (let key of Object.entries(instance)) {
        console.log(key);
    }

    // ["a", 1]
    // ["b", 1]
    // ["c", 1]
複製代碼

因此當使用一個對象初始化一個Map實例時，可使用這個方法：

let obj = { a: 1, b: 1, c: 1 },
        map = new Map(Object.entries(obj));
    
    console.log(map.get('a'));
    console.log(map.get('b'));
    console.log(map.get('c'));

    // 1
    // 1
    // 1
複製代碼

Object.values()獲取對象的屬性值數組

嗯，寫例子好累，不寫了，各位看官本身搞吧。

Object.getOwnPropertySymbols()獲取Symbol屬性名

上面提到的幾個方法都沒法獲取到對象實例的Symbol類型的屬性名，若是須要遍歷這個玩意，須要使用Object.getOwnPropertySymbols()方法：

let father = {
        fatherAttr: 1
    };

    let instance = Object.create(father);

    instance.a = 1;
    instance.b = 1;
    instance.c = 1;

    instance[Symbol('I am a handsome boy!')] = 1;

    for (let key of Object.keys(instance)) {
        console.log(key);
    }

    // a
    // b
    // c

    for (let key of Object.getOwnPropertySymbols(instance)) {
        console.log(key);
    }

    // Symbol(I am a handsome boy!)
複製代碼

上面列舉了一些遍歷的方法，通常能夠知足平常的工做須要。可是上面都是ES內置的方法，不能定製化。在這個個性張揚的時代，若是你想搞點特殊，能夠自定義一個迭代器；經過一些封裝，甚至可使用for of循環枚舉對象。相關內容將在下一篇博文。

以上，若有錯漏，歡迎指正。

@Author：PaperCrane

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。