亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2022年05月26日 09:23:01   作者：速凍魚  
迭代是訪問集合元素的一種方法,可以被迭代的對象稱為可迭代對象,下面這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅迭代JavaScript字面對象的相關(guān)資料,需要的朋友可以參考下

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

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

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

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

實(shí)現(xià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)

/**
 * 將{}對象轉(zhuǎn)換為可迭代對象
 */
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 請參考 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ú)立的迭代器對象就能相互隔離～

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

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

總結(jié)

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

相關(guān)文章

最新評論