詳解如何優(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è)計

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

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

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