中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript迭代器知識點有哪些

發布時間:2022-06-16 10:14:57 來源:億速云 閱讀:293 作者:zzz 欄目:web開發

本文小編為大家詳細介紹“JavaScript迭代器知識點有哪些”,內容詳細,步驟清晰,細節處理妥當,希望這篇“JavaScript迭代器知識點有哪些”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。

JavaScript迭代器知識點有哪些

迭代就是指可以從一個數據集中按照一定的順序,不斷取出數據的過程。

那么迭代和遍歷有啥子區別呢?

  • 迭代強調依次取數據的過程,不保證把所有的數據都取完

  • 遍歷強調的是要把所有的數據依次全部取出

在JavaScript中,迭代器是能調用 next方法實現迭代的一個對象,該方法返回一個具有兩個屬性的對象。

  • value:可迭代對象的下一個值

  • done:表示是否已經取出所有的數據了。 false表示還有數據, true表示后面已經沒有數據了。

迭代器簡單使用

通過可迭代對象中的迭代器工廠函數 Symbol.iterator來生成迭代器。

const arr = []console.log(arr)

JavaScript迭代器知識點有哪些

const arr = [1, 2, 3]

const iter1 = arr[Symbol.iterator]()   // 通過迭代器工廠函數` Symbol.iterator`來生成迭代器。
console.log(iter1)

console.log(iter1.next())
console.log(iter1.next())
console.log(iter1.next())
console.log(iter1.next())

console.log('%c%s', 'color:red;font-size:24px;', '================')

const mymap = new Map()
mymap.set('name', 'clz')
mymap.set('age', 21)

const iter2 = mymap[Symbol.iterator]()   // 通過迭代器工廠函數` Symbol.iterator`來生成迭代器。
console.log(iter2)

console.log(iter2.next())
console.log(iter2.next())
console.log(iter2.next())

JavaScript迭代器知識點有哪些

可以發現,迭代器是取完最后一個值之后,即迭代器下一個值 value undefined時,完成。

但是,上面的說法并不是很準確,并不是迭代器下一個值 value undefined時,就完成的。還需要判斷是不是真的沒有值,還是是可迭代對象里就有一個值為 undefined。如果是可迭代對象里有一個值為 undefined的情況,那么此時還是不會變成完成狀態。

const arr = [1, 2, 3, undefined]

const iter1 = arr[Symbol.iterator]()   // 通過迭代器工廠函數` Symbol.iterator`來生成迭代器。
console.log(iter1)

console.log(iter1.next())
console.log(iter1.next())
console.log(iter1.next())
console.log(iter1.next())
console.log(iter1.next())

JavaScript迭代器知識點有哪些

不同迭代器之間互不干擾

可以多次調用迭代器工廠函數來生成多個迭代器,每個迭代器都表示對可迭代對象的一次性有序遍歷。不同迭代器之間互不干擾,只會獨立地遍歷可迭代對象

const arr = [1, 2, 3]

const iter1 = arr[Symbol.iterator]()   // 通過迭代器工廠函數` Symbol.iterator`來生成迭代器。
const iter2 = arr[Symbol.iterator]()

console.log('迭代器1:', iter1.next())
console.log('迭代器2:', iter2.next())
console.log('迭代器1:', iter1.next())
console.log('迭代器2:', iter2.next())

JavaScript迭代器知識點有哪些

迭代器對象可作為可迭代對象

const arr = [1, 2, 3]
const iter = arr[Symbol.iterator]()

for (const i of iter) {
    console.log(i)    // 依次輸出1、2、3
}

迭代器"與時俱進"

如果可迭代對象在迭代期間被修改了,迭代器得到的結果也會是修改后的。

const arr = [1, 2, 3]
console.log(arr)

const iter = arr[Symbol.iterator]()
console.log(iter.next())

arr[1] = 999

console.log(iter.next())
console.log(iter.next())

JavaScript迭代器知識點有哪些

完成但并不完成

當我們迭代到 done: true之后,再調用next是不是會報錯,或者不返回任何內容呢?

然而,并不是,迭代器會處于一種完成但并不完成的狀態, done: true表示已經完成了,但是后續還能一直調用 next,雖然得到的結果一直都會是 { value: undefined, done: true }。這就是為什么說完成但并不完成

const arr = [1, 2, 3]

const iter = arr[Symbol.iterator]()

console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())

JavaScript迭代器知識點有哪些

自定義迭代器

從上面的例子中,我們就可以知道是通過通過迭代器工廠函數 Symbol.iterator來生成迭代器,所以我們需要實現一個迭代器迭代器工廠函數,然后迭代器可以調用 next方法,所以還需要實現一個 next方法,至于迭代器工廠函數,實際上直接返回實例 this

計數器例子:

class Counter {
  constructor(limit) {
    this.count = 1
    this.limit = limit  }
  next() {
    if (this.count <= this.limit) {
      return {
        done: false,
        value: this.count++
      }
    } else {
      return { done: true, value: undefined }
    }
  }
  [Symbol.iterator]() {
    return this
  }}
const counter = new Counter(3)
const iter = counter[Symbol.iterator]()

console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())

JavaScript迭代器知識點有哪些

乍一看,沒啥問題,但是如果我們使用 for-of來遍歷就能發現問題。

const counter = new Counter(3)for (let i of counter) {
  console.log(i)}console.log('另一輪迭代:')for (let i of counter) {
  console.log(i)}

JavaScript迭代器知識點有哪些

使用 for-of循環也變成一次性的了。這是因為 count是該實例的變量,所以兩次迭代都是使用的那一個變量,但是該變量第一次循環完之后,就已經超過限制了,所以再次使用 for-of循環就得不到任何的結果了。

可以把 count變量放在閉包里,然后通過閉包返回迭代器,這樣子每創建一個迭代器都會對應一個新的計數器。

class Counter {
    constructor(limit) {
        this.limit = limit    }
    
    [Symbol.iterator]() {

        let count = 1
        const limit = this.limit        return {
            // 迭代器工廠函數必須要要返回一個帶有next方法的對象,因為迭代實際就是通過調用next方法來實現的
            next() {
                if (count <= limit) {
                    return {
                        done: false,
                        value: count++
                    }
                } else {
                    return { done: true, value: undefined }
                }
            }
        }
    }}

測試

const counter = new Counter(3)for (let i of counter) {
    console.log(i)}console.log('另一輪迭代:')for (let i of counter) {
    console.log(i)}

JavaScript迭代器知識點有哪些

提前終止迭代器

就和使用 for-of循環一樣,迭代器會很聰明地去調用 next方法,當迭代器提前終止時,它也會去調用 return方法。

[Symbol.iterator]() {

    let count = 1
    const limit = this.limit    return {
        // 迭代器工廠函數必須要要返回一個帶有next方法的對象,因為迭代實際就是通過調用next方法來實現的
        next() {
            if (count <= limit) {
                return {
                    done: false,
                    value: count++
                }
            } else {
                return { done: true, value: undefined }
            }

        },

        return() {
            console.log('提前終止迭代器')
            return { done: true }
        }
    }}

測試

const counter = new Counter(5)for (let i of counter) {
    if (i === 3) {
        break;
    }
    console.log(i)}

JavaScript迭代器知識點有哪些

如果迭代器沒有關閉,就可以繼續從上次離開的地方繼續迭代。數組地迭代器就是不能關閉的。

const arr = [1, 2, 3, 4, 5]const iter = arr[Symbol.iterator]()iter.return = function () {
    console.log('提前退出迭代器')

    return {
        done: true
    }}for (const i of iter) {
    console.log(i)
    if (i === 2) {
        break
    }}for (const i of iter) {
    console.log(i)}

JavaScript迭代器知識點有哪些

讀到這里,這篇“JavaScript迭代器知識點有哪些”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

西平县| 静宁县| 基隆市| 家居| 礼泉县| 安龙县| 武夷山市| 洮南市| 西乌珠穆沁旗| 翁牛特旗| 乌鲁木齐市| 荣成市| 深泽县| 齐河县| 阿克陶县| 阿城市| 邹城市| 石阡县| 哈巴河县| 泗阳县| 克什克腾旗| 蓬莱市| 黎川县| 永新县| 佛山市| 文登市| 稷山县| 玉屏| 蕉岭县| 普陀区| 萨嘎县| 修武县| 锡林郭勒盟| 禄劝| 自治县| 长兴县| 和田市| 利津县| 壤塘县| 成安县| 青州市|