欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

因為在JavaScript中字面量對象是不支持迭代的

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

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

實現(xiàn)方法

第一種使用比較簡單的遍歷來實現(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ù)來實現(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
}

生成器詳細API 請參考 mdn

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

以下純個人理解，如果有歧義就當我放屁～ 哈哈哈

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

注意??：我還想表達以下幾個觀點：

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

總結(jié)

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

相關(guān)文章

最新評論