偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

JavaScript Lazy evaluation：可迭代對(duì)象與迭代器

作者：前端小智
開(kāi)發(fā) 前端
Lazy evaluation常被譯為“延遲計(jì)算”或“惰性計(jì)算”，指的是僅僅在真正需要執(zhí)行的時(shí)候才計(jì)算表達(dá)式的值。

[[353766]]

本文已經(jīng)過(guò)原作者 MelkorNemesis 授權(quán)翻譯。

Lazy evaluation

Lazy evaluation常被譯為“延遲計(jì)算”或“惰性計(jì)算”，指的是僅僅在真正需要執(zhí)行的時(shí)候才計(jì)算表達(dá)式的值。

與惰性求值相反的是及早求值(eager evaluation)及早求值，也被稱為貪婪求值(greedy evaluation)或嚴(yán)格求值，是多數(shù)傳統(tǒng)編程語(yǔ)言的求值策略。

充分利用惰性求值的特性帶來(lái)的好處主要體現(xiàn)在以下兩個(gè)方面：

  • 避免不必要的計(jì)算，帶來(lái)性能上的提升。
  • 節(jié)省空間，使得無(wú)限循環(huán)的數(shù)據(jù)結(jié)構(gòu)成為可能。

迭代器

ES6 中的迭代器使惰性求值和創(chuàng)建用戶定義的數(shù)據(jù)序列成為可能。迭代是一種遍歷數(shù)據(jù)的機(jī)制。迭代器是用于遍歷數(shù)據(jù)結(jié)構(gòu)元素(稱為Iterable)的指針，用于產(chǎn)生值序列的指針。

迭代器是一個(gè)可以被迭代的對(duì)象。它抽象了數(shù)據(jù)容器，使其行為類(lèi)似于可迭代對(duì)象。

迭代器在實(shí)例化時(shí)不計(jì)算每個(gè)項(xiàng)目的值，僅在請(qǐng)求時(shí)才生成下一個(gè)值。這非常有用，特別是對(duì)于大型數(shù)據(jù)集或無(wú)限個(gè)元素的序列。

可迭代對(duì)象

可迭代對(duì)象是希望其元素可被公眾訪問(wèn)的數(shù)據(jù)結(jié)構(gòu)。JS 中的很多對(duì)象都是可迭代的，它們可能不是很好的察覺(jué)，但是如果仔細(xì)檢查，就會(huì)發(fā)現(xiàn)迭代的特征：

  • new Map([iterable])
  • new WeakMap([iterable])
  • new Set([iterable])
  • new WeakSet([iterable])
  • Promise.all([iterable])
  • Promise.race([iterable])
  • Array.from([iterable])

還有需要一個(gè)可迭代的對(duì)象，否則，它將拋出一個(gè)類(lèi)型錯(cuò)誤，例如：

  • for ... of
  • ... (展開(kāi)操作符)const [a, b, ..] = iterable (解構(gòu)賦值)
  • yield* (生成器)

JavaScript中已有許多內(nèi)置的可迭代項(xiàng)：

String,Array,TypedArray,Map,Set。

迭代協(xié)議

迭代器和可迭對(duì)象遵循迭代協(xié)議。

協(xié)議是一組接口，并規(guī)定了如何使用它們。

迭代器遵循迭代器協(xié)議，可迭代遵循可迭代協(xié)議。

可迭代的協(xié)議

要使對(duì)象變得可迭代，它必須實(shí)現(xiàn)一個(gè)通過(guò)Symbol.iterator的迭代器方法，這個(gè)方法是迭代器的工廠。

使用 TypeScript，可迭代協(xié)議如下所示：

  1. interface Iterable { 
  2.   [Symbol.iterator]() : Iterator; 
  3. } 

Symbol.iterator]()是無(wú)參數(shù)函數(shù)。在可迭代對(duì)象上調(diào)用它，這意味著我們可以通過(guò)this來(lái)訪問(wèn)可迭代對(duì)象，它可以是常規(guī)函數(shù)或生成器函數(shù)。

迭代器協(xié)議

迭代器協(xié)議定義了產(chǎn)生值序列的標(biāo)準(zhǔn)方法。

為了使對(duì)象成為迭代器，它必須實(shí)現(xiàn)next()方法。迭代器可以實(shí)現(xiàn)return()方法，我們將在本文后面討論這個(gè)問(wèn)題。

使用 TypeScript，迭代器協(xié)議如下所示：

  1. interface Iterator { 
  2.     next() : IteratorResult; 
  3.     return?(value?: any): IteratorResult; 
  4. } 

IteratorResult 的定義如下：

  1. interface IteratorResult { 
  2.     value?: any; 
  3.     done: boolean; 
  4. } 
  • done通知消費(fèi)者迭代器是否已經(jīng)被使用，false表示仍有值需要生成，true表示迭代器已經(jīng)結(jié)束。
  • value 可以是任何 JS 值，它是向消費(fèi)者展示的值。

當(dāng)done為true時(shí)，可以省略value。

組合

迭代器和可以可迭代對(duì)象可以用下面這張圖來(lái)表示：

事例

基礎(chǔ)知識(shí)介紹完了，接著，我們來(lái)配合一些事例來(lái)加深我們的映像。

范圍迭代器

我們先從一個(gè)非?；镜牡鏖_(kāi)始，createRangeIterator迭代器。

我們手動(dòng)調(diào)用it.next()以獲得下一個(gè)IteratorResult。最后一次調(diào)用返回{done：true}，這意味著迭代器現(xiàn)在已被使用，不再產(chǎn)生任何值。

  1. function createRangeIterator(from, to) { 
  2.   let i = from; 
  3.  
  4.   return { 
  5.     next() { 
  6.       if (i <= to) { 
  7.         return { value: i++, done: false }; 
  8.       } else { 
  9.         return { done: true }; 
  10.       } 
  11.     } 
  12.   } 
  13. } 
  14.  
  15. const it = createRangeIterator(1, 3); 
  16.  
  17. console.log(it.next()); 
  18. console.log(it.next()); 
  19. console.log(it.next()); 
  20. console.log(it.next()); 

可迭代范圍迭代器

在本文的前面，我已經(jīng)提到 JS 中的某些語(yǔ)句需要一個(gè)可迭代的對(duì)象。因此，我們前面的示例在與for ... of循環(huán)一起使用時(shí)將不起作用。

但是創(chuàng)建符合迭代器和可迭代協(xié)議的對(duì)象非常容易。

  1. function createRangeIterator (from, to) { 
  2.   let i = from 
  3.  
  4.   return { 
  5.     [Symbol.iterator] () { 
  6.       return this 
  7.     }, 
  8.     next() { 
  9.       if (i <= to) { 
  10.         return { value: i++, done: false } 
  11.       } else { 
  12.         return { done: true } 
  13.       } 
  14.     } 
  15.   } 
  16. } 
  17.  
  18. const it = createRangeIterator(1, 3) 
  19.  
  20. for (const i of it) { 
  21.   console.log(i) 
  22. } 

無(wú)限序列迭代器

迭代器可以表示無(wú)限制大小的序列，因?yàn)樗鼈儍H在需要時(shí)才計(jì)算值。

注意不要在無(wú)限迭代器上使用擴(kuò)展運(yùn)算符(...)，JS 將嘗試消費(fèi)迭代器，由于迭代器是無(wú)限的，因此它將永遠(yuǎn)不會(huì)結(jié)束。所以你的應(yīng)用程序?qū)⒈罎ⅲ驗(yàn)閮?nèi)存已被耗盡 ??

同樣，for ... of 循環(huán)也是一樣的情況，所以要確保能退出循環(huán)：

  1. function createEvenNumbersIterator () { 
  2.   let value = 0 
  3.  
  4.   return { 
  5.     [Symbol.iterator] () { 
  6.       return this 
  7.     }, 
  8.     next () { 
  9.       value += 2 
  10.       return { value, done: false} 
  11.     } 
  12.   } 
  13. } 
  14.  
  15. const it = createEvenNumbersIterator() 
  16.  
  17. const [a, b, c] = it 
  18. console.log({a, b, c}) 
  19.  
  20. const [x, y, z] = it 
  21. console.log({ x, y, z }) 
  22.  
  23. for (const even of it) { 
  24.   console.log(even) 
  25.   if (even > 20) { 
  26.     break 
  27.   } 
  28. } 

關(guān)閉迭代器

前面我們提到過(guò)，迭代器可以有選擇地使用return()方法。當(dāng)?shù)髦钡阶詈蠖紱](méi)有迭代時(shí)使用此方法，并讓迭代器進(jìn)行清理。

for ... of循環(huán)可以通過(guò)以下方式更早地終止迭代：

  • break
  • continue
  • throw
  • return
  1. function createCloseableIterator () { 
  2.   let idx = 0 
  3.   const data = ['a', 'b', 'c', 'd', 'e'] 
  4.  
  5.   function cleanup() { 
  6.     console.log('Performing cleanup') 
  7.   } 
  8.   return { 
  9.     [Symbol.iterator]() { return this }, 
  10.     next () { 
  11.       if (idx <= data.length - 1) { 
  12.         return { value: data[idx++], done: false } 
  13.       } else { 
  14.         cleanup() 
  15.         return { done: true } 
  16.       } 
  17.     }, 
  18.     return () { 
  19.       cleanup() 
  20.       return { done: true } 
  21.     } 
  22.   } 
  23. } 
  24.  
  25. const it = createCloseableIterator() 
  26.  
  27. for (const value of it) { 
  28.   console.log(value) 
  29.   if (value === 'c') { 
  30.     break 
  31.   } 
  32. } 
  33.  
  34. console.log('\n----------\n') 
  35.  
  36. const _it = createCloseableIterator(); 
  37. for (const value of _it) { 
  38.   console.log(value); 
  39. } 

  • 如果知道迭代器已經(jīng)結(jié)束，則手動(dòng)調(diào)用cleanup()函數(shù)。
  • 如果突然完成，則return()起作用并為我們進(jìn)行清理。

額外的內(nèi)容

如果你已經(jīng)做到了這一點(diǎn)，我們來(lái)看看一些額外的內(nèi)容。

組合器

組合器是將現(xiàn)有可迭代對(duì)象組合在一起以創(chuàng)建新可迭代對(duì)象的函數(shù)。

因此，我們能夠創(chuàng)建許多實(shí)用函數(shù)。那map或者filter呢?看看下面的代碼，花一分鐘時(shí)間來(lái)理解它。

  1. function createEvenNumbersIterator() { 
  2.   let value = 0; 
  3.  
  4.   return { 
  5.     [Symbol.iterator]() { 
  6.       return this; 
  7.     }, 
  8.     next() { 
  9.       value += 2; 
  10.       return { value, done: false }; 
  11.     } 
  12.   } 
  13. } 
  14.  
  15. function map(fn, iterable) { 
  16.   const iter = iterable[Symbol.iterator](); 
  17.  
  18.   return { 
  19.     [Symbol.iterator]() { 
  20.       return this; 
  21.     }, 
  22.     next() { 
  23.       const n = iter.next(); 
  24.       if (!n.done) { 
  25.         return { value: fn(n.value), done: false }; 
  26.       } else { 
  27.         return { done: true }; 
  28.       } 
  29.     } 
  30.   } 
  31. } 
  32.  
  33. function filter(fn, iterable) { 
  34.   const iter = iterable[Symbol.iterator](); 
  35.  
  36.   return { 
  37.     [Symbol.iterator]() { 
  38.       return this; 
  39.     }, 
  40.     next() { 
  41.       const n = iter.next(); 
  42.       if (!n.done) { 
  43.         if (fn(n.value)) { 
  44.           return { value: n.value, done: false }; 
  45.         } else { 
  46.           return this.next(); 
  47.         } 
  48.       } else { 
  49.         return { done: true }; 
  50.       } 
  51.     } 
  52.   } 
  53. } 
  54.  
  55. function take(n, iterable) { 
  56.   const iter = iterable[Symbol.iterator](); 
  57.  
  58.   return { 
  59.     [Symbol.iterator]() { 
  60.       return this; 
  61.     }, 
  62.     next() { 
  63.       if (n > 0) { 
  64.         n--; 
  65.         return iter.next(); 
  66.       } else { 
  67.         return { done: true }; 
  68.       } 
  69.     } 
  70.   } 
  71. } 
  72.  
  73. function cycle(iterable) { 
  74.   const iter = iterable[Symbol.iterator](); 
  75.   const saved = []; 
  76.   let idx = 0; 
  77.    
  78.   return { 
  79.     [Symbol.iterator]() { 
  80.       return this; 
  81.     }, 
  82.     next() { 
  83.       const n = iter.next(); 
  84.       if (!n.done) { 
  85.         saved[idx++] = n.value; 
  86.         return { value: n.value, done: false }; 
  87.       } else { 
  88.         return { value: saved[idx++ % saved.length], done: false }; 
  89.       } 
  90.     } 
  91.   } 
  92. } 
  93.  
  94. function collect(iterable) { 
  95.   // consumes the iterator 
  96.   return Array.from(iterable); 
  97. } 
  98.  
  99. const evenNumbersIterator = createEvenNumbersIterator(); 
  100. const result = collect(                 // 7. and collect the result 
  101.   filter(                               // ⬆️ 6. keep only values higher than 1 
  102.     val => val > 1, map(                // ⬆️ 5. divide obtained values by 2 
  103.       val => val / 2, take(             // ⬆️ 4. take only six of them 
  104.         6, cycle(                       // ⬆️ 3. make an infinite cycling sequence of them 
  105.           take(                         // ⬆️ 2. take just three of them 
  106.             3, evenNumbersIterator      // ⬆️ 1. infinite sequence of even numbers 
  107.           ) 
  108.         ) 
  109.       ) 
  110.     ) 
  111.   ) 
  112. ); 
  113.  
  114. console.log(result); 

這是一大堆代碼，很快我們將看到如何使用生成器和函數(shù)式編程概念來(lái)重構(gòu)所有這些內(nèi)容。保持關(guān)注，并注意我的后續(xù)文章，我們?nèi)匀挥泻芏鄡?nèi)容要講。

作者：MelkorNemesis 譯者：前端小智 來(lái)源：medium

原文：https://medium.com/@MelrNemesis/javascript-lazy-evaluation-iterables-iterators-e0770a5de96f

本文轉(zhuǎn)載自微信公眾號(hào)「 大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系 大遷世界公眾號(hào)。

 

責(zé)任編輯：武曉燕 來(lái)源： 大遷世界
JavaScript對(duì)象迭代器
相關(guān)推薦

2021-11-28 08:03:41

Python迭代器對(duì)象

2022-10-26 08:25:06

Python編程迭代器

2022-01-15 10:01:15

Javascript 高階函數(shù)前端

2025-03-26 10:56:54

2021-09-03 10:00:00

JavaScript迭代對(duì)象

2024-11-14 13:15:22

JavaScript可迭代數(shù)組

2021-09-14 07:26:25

JavaScript迭代對(duì)象

2017-06-26 16:26:15

Python迭代對(duì)象迭代器

2024-03-25 08:57:49

模塊迭代對(duì)象迭代器

2016-03-28 10:39:05

Python迭代迭代器

2022-10-24 13:02:38

2024-02-27 00:10:06

語(yǔ)言Javascript

2013-08-19 16:44:15

.Net

2011-07-13 13:56:06

STL迭代器

2009-12-15 14:58:19

Ruby迭代器

2023-03-01 00:07:32

JavaScript迭代器生成器

2022-10-26 09:27:59

Python編程迭代器協(xié)議

2009-08-26 16:26:37

C#迭代器模式

2009-08-19 15:18:53

迭代器

2009-08-11 13:59:41

迭代器模式C# Iterator
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)