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ù)來(lái)實(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í)候就可以利用閉包訪問(wèn)到屬于自己的外層詞法環(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è)比方來(lái)講，你(對(duì)象)身上的錢(屬性或者對(duì)象上的函數(shù))只是你作為了它暫時(shí)的載體，并不意味著這個(gè)錢就屬于你身體的一部分

總結(jié)

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

您可能感興趣的文章: