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

JavaScript中的迭代器和可迭代對(duì)象與生成器

 更新時(shí)間：2022年09月16日 14:28:01   作者：一只小ice???????  
這篇文章主要介紹了JavaScript中的迭代器和可迭代對(duì)象與生成器，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

1. 什么是迭代器？

概念： 迭代器（iterator），是確使用戶可在容器對(duì)象（container，例如鏈表或數(shù)組）上遍訪的對(duì)象[1][2][3]，設(shè)計(jì)人員使用此接口無(wú)需關(guān)心容器對(duì)象的內(nèi)存分配的實(shí)現(xiàn)細(xì)節(jié)。
JS中的迭代器

  • 其本質(zhì)就是一個(gè)對(duì)象，符合迭代器協(xié)議（iterator protocol）
  • 迭代器協(xié)議

    其對(duì)象返回一個(gè)next函數(shù)

    調(diào)用next函數(shù)返回一個(gè)對(duì)象，其對(duì)象中包含兩個(gè)屬性
    • done(完成)，它的值為布爾類型，也就是true/false。
      • 如果這個(gè)迭代器沒(méi)有迭代完成即返回{done:false}
      • 當(dāng)這個(gè)迭代器完成了即返回{done:true}
    • value(值)，它可以返回js中的任何值，TS中表示可為:value:any類型

1.1 迭代器的基本實(shí)現(xiàn)

思考以下代碼:

let index = 0
const bears = ['ice', 'panda', 'grizzly']

let iterator = {
  next() {
    if (index < bears.length) {
      return { done: false, value: bears[index++] }
    }

    return { done: true, value: undefined }
  }
}
console.log(iterator.next()) //{ done: false, value: 'ice' }
console.log(iterator.next()) //{ done: false, value: 'panda' }
console.log(iterator.next()) //{ done: false, value: 'grizzly' }
console.log(iterator.next()) //{ done: true, value: undefined }
  • 是一個(gè)對(duì)象，實(shí)現(xiàn)了next方法，next方法返回了一個(gè)對(duì)象，有done屬性和value屬性，且key的值類型也為boolean或any，符合迭代器協(xié)議，是一個(gè)妥妥的迭代器沒(méi)跑了。
  • 弊端
    • 違背了高內(nèi)聚思想，明明index和iterator對(duì)象是屬于一個(gè)整體，我卻使用了全局變量，從V8引擎的GC，可達(dá)性(也就是標(biāo)記清除)來(lái)看，如果bears = null ，不手動(dòng)設(shè)置為null很有可能會(huì)造成內(nèi)存泄漏，并且內(nèi)聚性低。
    • 假如我要?jiǎng)?chuàng)建一百個(gè)迭代器對(duì)象呢？ 那我就自己定義一百遍嗎？肯定錯(cuò)誤的，我們要把它封裝起來(lái)，這樣內(nèi)聚性又高，又能進(jìn)行復(fù)用，一舉兩得，一石二鳥(niǎo)，真的是very beautiful,very 優(yōu)雅。

1.2 迭代器的封裝實(shí)現(xiàn)

思考一下代碼：

const bears = ['ice', 'panda', 'grizzly']

function createArrIterator(arr) {
  let index = 0

  let _iterator = {
    next() {
      if (index < arr.length) {
        return { done: false, value: arr[index++] }
      }

      return { done: true, value: undefined }
    }
  }
  return _iterator
}
let iter = createArrIterator(bears)

console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
  • 內(nèi)聚性非常高，盡最大可能進(jìn)行了復(fù)用，減少冗余代碼

2. 什么是可迭代對(duì)象

迭代器對(duì)象和可迭代對(duì)象是一個(gè)不同的東西，雖然它們存在關(guān)聯(lián)，而且面試的時(shí)候經(jīng)常面這些概念，廢話不多說(shuō)，我們直接進(jìn)入主題。

  • 首先就是一個(gè)對(duì)象，且符合可迭代對(duì)象協(xié)議(iterable protocol)
  • 可迭代對(duì)象協(xié)議

    實(shí)現(xiàn)了[Symbol.iterator]為key的方法，且這個(gè)方法返回了一個(gè)迭代器對(duì)象

  • 繞了一大圈終于把概念搞明白了，那可迭代對(duì)象有什么好處呢？ 有什么應(yīng)用場(chǎng)景呢？

    for of 的時(shí)候，其本質(zhì)就是調(diào)用的這個(gè)函數(shù)，也就是[Symbol.iterator]為key的方法

2.1 原生可迭代對(duì)象(JS內(nèi)置)

  • String
  • Array
  • Set
  • NodeList 類數(shù)組對(duì)象
  • Arguments 類數(shù)組對(duì)象
  • Map

2.1.1 部分for of 演示

let str = 'The Three Bears'

const bears = ['ice', 'panda', 'grizzly']

for( let text of str) {
  console.log(text) //字符串每個(gè)遍歷打印
}

for( let bear of bears) {
  console.log(bear)
}
 //ice panda grizzly

2.1.2 查看內(nèi)置的[Symbol.iterator]方法

  • 上面給大家舉例了很多可迭代對(duì)象，那它們必定是符合可迭代對(duì)象協(xié)議的，思考以下代碼
const bears = ['ice', 'panda', 'grizzly']
//數(shù)組的Symbol.iterator方法
const iter = bears[Symbol.iterator]()

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

const nickName = 'ice'
//字符串的Symbol.iterator方法
const strIter = nickName[Symbol.iterator]()

console.log(strIter.next())
console.log(strIter.next())
console.log(strIter.next())
console.log(strIter.next())

2.2 可迭代對(duì)象的實(shí)現(xiàn)

let info = {
  bears: ['ice', 'panda', 'grizzly'],
  [Symbol.iterator]: function() {
    let index = 0
    let _iterator = {
       //這里一定要箭頭函數(shù)，或者手動(dòng)保存上層作用域的this
       next: () => {
        if (index < this.bears.length) {
          return { done: false, value: this.bears[index++] }
        }
  
        return { done: true, value: undefined }
      }
    }

    return _iterator
  }
}

let iter = info[Symbol.iterator]()
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())

//符合可迭代對(duì)象協(xié)議 就可以利用 for of 遍歷
for (let bear of info) {
  console.log(bear)
}
//ice panda grizzly
  • 符合可迭代對(duì)象協(xié)議，是一個(gè)對(duì)象，有[Symbol.iterator]方法，并且這個(gè)方法返回了一個(gè)迭代器對(duì)象。
  • 當(dāng)我利用for of 遍歷，就會(huì)自動(dòng)的調(diào)用這個(gè)方法。

2.3 可迭代對(duì)象的應(yīng)用

  • for of
  • 展開(kāi)語(yǔ)法
  • 解構(gòu)語(yǔ)法
  • promise.all(iterable)
  • promise.race(iterable)
  • Array.from(iterable)
  • ...

2.4 自定義類迭代實(shí)現(xiàn)

class myInfo {
  constructor(name, age, friends) {
    this.name = name
    this.age = age
    this.friends = friends
  }

  [Symbol.iterator]() {
    let index = 0

    let _iterator = {
      next: () => {
        const friends = this.friends
        if (index < friends.length) {
          return {done: false, value: friends[index++]}
        }

        return {done: true, value: undefined}
      }
    }

    return _iterator
  }
}
const info = new myInfo('ice', 22, ['panda','grizzly'])

for (let bear of info) {
  console.log(bear)
}
//panda
//grizzly
  • 此案例只是簡(jiǎn)單的對(duì)friends進(jìn)行了迭代，你也可以迭代你想要的一切東西...
  • 記住此案例，后續(xù)我們會(huì)對(duì)這個(gè)案例進(jìn)行重構(gòu)，優(yōu)雅的會(huì)讓你不能用言語(yǔ)來(lái)形容。

3. 生成器函數(shù)

生成器是ES6新增的一種可以對(duì)函數(shù)控制的方案，能靈活的控制函數(shù)的暫停執(zhí)行，繼續(xù)執(zhí)行等。

生成器函數(shù)和普通函數(shù)的不同

  • 定義: 普通函數(shù)function定義，生成器函數(shù)function*，要在后面加*
  • 生成器函數(shù)可以通過(guò) yield 來(lái)控制函數(shù)的執(zhí)行
  • 生成器函數(shù)返回一個(gè)生成器(generator)，生成器是一個(gè)特殊的迭代器

3.1 生成器函數(shù)基本實(shí)現(xiàn)

function* bar() {
  console.log('fn run')
}

bar()
  • 我們會(huì)發(fā)現(xiàn)，這個(gè)函數(shù)竟然沒(méi)有執(zhí)行。我們前面說(shuō)過(guò)，它是一個(gè)生成器函數(shù)，它的返回值是一個(gè)生成器，同時(shí)也是一個(gè)特殊的迭代器，所以跟普通函數(shù)相比，好像暫停了，那如何讓他執(zhí)行呢？接下來(lái)我們進(jìn)一步探討。

3.2 生成器函數(shù)單次執(zhí)行

function* bar() {
  console.log('fn run')
}

const generator = bar()

console.log(generator.next())
//fn run
//{ value: undefined, done: true }
  • 返回了一個(gè)生成器，我們調(diào)用next方法就可以讓函數(shù)執(zhí)行，并且next方法是有返回值的，我們上面講迭代器的時(shí)候有探討過(guò)，而value沒(méi)有返回值那就是undefined。那上面說(shuō)的yield關(guān)鍵字在哪，到底是如何控制函數(shù)的呢？是如何用的呢？

3.3 生成器函數(shù)多次執(zhí)行

function* bar() {
  console.log('fn run start')
  yield 100
  console.log('fn run...')
  yield 200
  console.log('fn run end')
  return 300
}

const generator = bar()

//1. 執(zhí)行到第一個(gè)yield，暫停之后，并且把yield的返回值 傳入到value中
console.log(generator.next())
//2. 執(zhí)行到第一個(gè)yield，暫停之后，并且把yield的返回值 傳入到value中
console.log(generator.next())
//3. 執(zhí)行剩余代碼
console.log(generator.next())

//打印結(jié)果:
//fn run start
//{done:false, value: 100}
//fn run...
//{done:false, value: 200}
//fn run end
//{done:true, value: 300}
  • 現(xiàn)在我們恍然大悟，每當(dāng)調(diào)用next方法的時(shí)候，代碼就會(huì)開(kāi)始執(zhí)行，執(zhí)行到yield x，后就會(huì)暫停，等待下一次調(diào)用next繼續(xù)往下執(zhí)行，周而復(fù)始，沒(méi)有了yield關(guān)鍵字，進(jìn)行最后一次next調(diào)用返回done:true。

3.4 生成器函數(shù)的分段傳參

我有一個(gè)需求，既然生成器能控制函數(shù)分段執(zhí)行，我要你實(shí)現(xiàn)一個(gè)分段傳參。

思考以下代碼:

function* bar(nickName) {
  const str1 = yield nickName
  const str2 = yield str1 + nickName
  return str2 + str1 + nickName
}
const generator = bar('ice')
console.log(generator.next())
console.log(generator.next('panda '))
console.log(generator.next('grizzly '))
console.log(generator.next())

// { value: 'ice', done: false }
// { value: 'panda ice', done: false }
// { value: 'grizzly panda ice', done: true }
// { value: undefined, done: true }
  • 如果沒(méi)有接觸過(guò)這樣的代碼會(huì)比較奇怪
    • 當(dāng)我調(diào)用next函數(shù)的時(shí)候，yield的左側(cè)是可以接受參數(shù)的，也并不是所有的next方法的實(shí)參都能傳遞到生成器函數(shù)內(nèi)部
    • yield左側(cè)接收的，是第二次調(diào)用next傳入的實(shí)參，那第一次傳入的就沒(méi)有yield關(guān)鍵字接收，所有只有當(dāng)我調(diào)用bar函數(shù)的時(shí)候傳入。
    • 最后一次next調(diào)用，傳入的參數(shù)我也調(diào)用不了，因?yàn)闆](méi)有yield關(guān)鍵字可以接收了。
  • 很多開(kāi)發(fā)者會(huì)疑惑，這樣寫(xiě)有什么用呢？ 可讀性還差，但是在處理異步數(shù)據(jù)的時(shí)候就非常有用了，后續(xù)會(huì)在promise中文章中介紹。

3.5 生成器代替迭代器

前面我們講到，生成器是一個(gè)特殊的迭代器，那生成器必定是可以代替迭代器對(duì)象的，思考以下代碼。

let bears = ['ice','panda','grizzly']

function* createArrIterator(bears) {
  for (let bear of bears) {
    yield bear
  }
}
const generator = createArrIterator(bears)
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())

其實(shí)這里還有一種語(yǔ)法糖的寫(xiě)法yield*

  • yield* 依次迭代這個(gè)可迭代對(duì)象，相當(dāng)于遍歷拿出每一項(xiàng) yield item(偽代碼)

思考以下代碼:

let bears = ['ice','panda','grizzly']

function* createArrIterator(bears) {
  yield* bears
}
const generator = createArrIterator(bears)
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
  • 依次迭代這個(gè)可迭代對(duì)象，返回每個(gè)item值

4. 可迭代對(duì)象的終極封裝

class myInfo {
  constructor(name, age, friends) {
    this.name = name
    this.age = age
    this.friends = friends
  }
  *[Symbol.iterator]() {
    yield* this.friends
  }
}
const info = new myInfo('ice', 22, ['panda','grizzly'])
for (let bear of info) {
  console.log(bear)
}

//panda
//grizzly
  • 回顧以下可迭代對(duì)象協(xié)議
    • 是一個(gè)對(duì)象并且有[Symbol.iterator]方法
    • 這個(gè)方法返回一個(gè)迭代器對(duì)象 生成器函數(shù)返回一個(gè)生成器，是一個(gè)特殊的迭代器

5. 總結(jié)

5.1 迭代器對(duì)象

  • 本質(zhì)就是一個(gè)對(duì)象，要符合迭代器協(xié)議
  • 有自己對(duì)應(yīng)的next方法，next方法則返回一組數(shù)據(jù){done:boolean, value:any}

5.2 可迭代對(duì)象

  • 本質(zhì)就是對(duì)象，要符合可迭代對(duì)象協(xié)議
  • 有[Symbol.iterator]方法，并且調(diào)用這個(gè)方法返回一個(gè)迭代器

5.3 生成器函數(shù)

  • 可以控制函數(shù)的暫停執(zhí)行和繼續(xù)執(zhí)行
  • 通過(guò)function* bar() {} 這種形式定義
  • 不會(huì)立馬執(zhí)行，而是返回一個(gè)生成器，生成器是一個(gè)特殊的迭代器對(duì)象
  • yield 關(guān)鍵字可以控制函數(shù)分段執(zhí)行
  • 調(diào)用返回生成器的next方法進(jìn)行執(zhí)行

到此這篇關(guān)于JavaScript中的迭代器和可迭代對(duì)象與生成器的文章就介紹到這了,更多相關(guān)JavaScript迭代器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • js操作cookie保存瀏覽記錄的方法

    js操作cookie保存瀏覽記錄的方法

    這篇文章主要介紹了js操作cookie保存瀏覽記錄的方法,涉及JavaScript使用cookie記錄并保存用戶瀏覽網(wǎng)頁(yè)信息的實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2015-12-12
  • 多瀏覽器兼容的獲取元素和鼠標(biāo)的位置的js代碼

    多瀏覽器兼容的獲取元素和鼠標(biāo)的位置的js代碼

    獲取元素和鼠標(biāo)的位置（兼容IE6.0,IE7.0,IE8.0,FireFox2.0,FireFox3.5,Opera），該功能是我一同事鉆研出來(lái)的，目標(biāo)是為了實(shí)現(xiàn)與QQ自定義布局和拖放模塊類似的功能。
    2009-12-12
  • javascript offsetX與layerX區(qū)別

    javascript offsetX與layerX區(qū)別

    FF沒(méi)有offsetX屬性，有個(gè)layerX屬性，只要將事件源的位置設(shè)置成相對(duì)定位(position:relative)或絕對(duì)定位(position:absolute)，兩者結(jié)果就相等，表示事件源相對(duì)于父元素的X坐標(biāo)。
    2010-03-03
  • bootstrap表格分頁(yè)實(shí)例講解

    bootstrap表格分頁(yè)實(shí)例講解

    這篇文章主要為大家詳細(xì)介紹了bootstrap表格分頁(yè)實(shí)例講解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-12-12
  • 微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例

    微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例

    這篇文章主要為大家介紹了微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪<BR>
    2022-04-04
  • js實(shí)現(xiàn)文字滾動(dòng)效果

    js實(shí)現(xiàn)文字滾動(dòng)效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)文字滾動(dòng)效果，類似于新聞板塊中的公示公告，，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-03-03
  • ES5新增數(shù)組的實(shí)現(xiàn)方法

    ES5新增數(shù)組的實(shí)現(xiàn)方法

    這篇文章主要介紹了ES5新增數(shù)組的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • JavaScript詳解使用Promise處理回調(diào)地獄的兩種方法

    JavaScript詳解使用Promise處理回調(diào)地獄的兩種方法

    這篇文章主要介紹了JavaScript詳解使用Promise處理回調(diào)地獄的兩種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-11-11
  • Javascript中的this綁定介紹

    Javascript中的this綁定介紹

    在Javascript里，函數(shù)被調(diào)用的時(shí)候，除了接受聲明是定義的形式參數(shù)，每一個(gè)函數(shù)還接受兩個(gè)附加的參數(shù)：this和arguments。
    2011-09-09
  • elementUI?Table?表格編輯數(shù)據(jù)后停留當(dāng)前位置的示例代碼

    elementUI?Table?表格編輯數(shù)據(jù)后停留當(dāng)前位置的示例代碼

    這篇文章主要介紹了elementUI?Table?表格編輯數(shù)據(jù)后停留當(dāng)前位置,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-04-04

最新評(píng)論