詳解如何優(yōu)雅迭代JavaScript字面對(duì)象

更新時(shí)間：2022年05月26日 09:23:01 作者：速凍魚

迭代是訪問集合元素的一種方法,可以被迭代的對(duì)象稱為可迭代對(duì)象,下面這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅迭代JavaScript字面對(duì)象的相關(guān)資料,需要的朋友可以參考下

為什么要實(shí)現(xiàn)自定義迭代器

因?yàn)樵贘avaScript中字面量對(duì)象是不支持迭代的

如何實(shí)現(xiàn)JavaScript字面量對(duì)象迭代

只要正確實(shí)現(xiàn)字面對(duì)象的Symbol.iterator這個(gè)屬性所對(duì)應(yīng)的迭代器函數(shù)即可
注意??該迭代器函數(shù)只是一個(gè)函數(shù)，而不是真正的迭代器
迭代器是一個(gè)對(duì)象，需要提供next函數(shù)來提供給類似for of forEach這種迭代函數(shù)使用

實(shí)現(xiàn)方法

第一種使用比較簡(jiǎn)單的遍歷來實(shí)現(xiàn)

let obj = {uname: "zhangsan"};
obj[Symbol.iterator] = function () {
  const keys = Object.keys(this);
  let index = 0;
  return {
    next() {
      return {
        value: obj[keys[index++]],
        done: index > keys.length
      }
    }
  };
};

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

console.log(iterator.next());
//{value: 'zhangsan', done: false}

obj.uname='sudongyu'

iterator = obj[Symbol.iterator]();

console.log(iterator.next());
//{value: 'sudongyu', done: false}

第二種使用生成器函數(shù)來實(shí)現(xiàn)

/**
 * 將{}對(duì)象轉(zhuǎn)換為可迭代對(duì)象
 */
function object2iterator(obj){
    obj[Symbol.iterator]=function* () {
        let properties = Object.keys(this);
        for (let i of properties) {
            yield [i, this[i]];
        }
    }
    return obj
}

生成器詳細(xì)API 請(qǐng)參考 mdn

解析為什么生成器函數(shù)要這樣設(shè)計(jì)

以下純個(gè)人理解，如果有歧義就當(dāng)我放屁～哈哈哈

迭代器函數(shù)是一個(gè)函數(shù)，這樣每次調(diào)用都會(huì)為將要return的迭代器中的next函數(shù)創(chuàng)建一個(gè)全新的詞法作用域
這樣每次在創(chuàng)建新的迭代器時(shí)，執(zhí)行iterator.next()的時(shí)候就可以利用閉包訪問到屬于自己的外層詞法環(huán)境中的變量，在方法一中也就是能夠從index為0開始迭代
這樣每個(gè)獨(dú)立的迭代器對(duì)象就能相互隔離～

注意??：我還想表達(dá)以下幾個(gè)觀點(diǎn)：

JavaScript中的對(duì)象只是數(shù)據(jù)的載體，集合
所以我們不能把對(duì)象中的函數(shù)或者屬性作為對(duì)象的一部分
對(duì)象的屬性和函數(shù)它們只是一個(gè)間接的關(guān)系，雖然有點(diǎn)難理解，但是我還是想表達(dá)一下這個(gè)觀點(diǎn)
打個(gè)比方來講，你(對(duì)象)身上的錢(屬性或者對(duì)象上的函數(shù))只是你作為了它暫時(shí)的載體，并不意味著這個(gè)錢就屬于你身體的一部分

總結(jié)

到此這篇關(guān)于如何優(yōu)雅迭代JavaScript字面對(duì)象的文章就介紹到這了,更多相關(guān)迭代JS字面對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: