數組的遍歷你都會用了，那Promise版本的呢

来源:https://www.cnblogs.com/jiasm/archive/2018/04/26/8948513.html
-Advertisement-
Play Games

這裡指的遍歷方法包括：map、reduce、reduceRight、forEach、filter、some、every因為最近要進行了一些數據彙總，node版本已經是8.11.1了，所以直接寫了個async/await的腳本。但是在對數組進行一些遍歷操作時，發現有些遍歷方法對Promise的反饋並不 ...


這裡指的遍歷方法包括：map、reduce、reduceRight、forEach、filter、some、every
因為最近要進行了一些數據彙總，node版本已經是8.11.1了，所以直接寫了個async/await的腳本。
但是在對數組進行一些遍歷操作時，發現有些遍歷方法對Promise的反饋並不是我們想要的結果。

當然，有些嚴格來講並不能算是遍歷，比如說some，every這些的。
但確實，這些都會根據我們數組的元素來進行多次的調用傳入的回調。

這些方法都是比較常見的，但是當你的回調函數是一個Promise時，一切都變了。

前言

async/await為Promise的語法糖
文中會直接使用async/await替換Promise

 1 let result = await func()
 2 // => 等價於
 3 func().then(result => {
 4   // code here
 5 })
 6 
 7 // ======
 8 
 9 async function func () {
10   return 1  
11 }
12 // => 等價與
13 function func () {
14   return new Promise(resolve => resolve(1))
15 }

 

map

map可以說是對Promise最友好的一個函數了。
我們都知道，map接收兩個參數：

  1. 對每項元素執行的回調，回調結果的返回值將作為該數組中相應下標的元素
  2. 一個可選的回調函數this指向的參數
1 [1, 2, 3].map(item => item ** 2) // 對數組元素進行求平方
2 // > [1, 4, 9]

 

上邊是一個普通的map執行，但是當我們的一些計算操作變為非同步的：

1 [1, 2, 3].map(async item => item ** 2) // 對數組元素進行求平方
2 // > [Promise, Promise, Promise]

 

這時候，我們獲取到的返回值其實就是一個由Promise函數組成的數組了。

所以為什麼上邊說map函數為最友好的，因為我們知道，Promise有一個函數為Promise.all
會將一個由Promise組成的數組依次執行，並返回一個Promise對象，該對象的結果為數組產生的結果集。

1 await Promise.all([1, 2, 3].map(async item => item ** 2))
2 // > [1, 4, 9]

 

首先使用Promise.all對數組進行包裝，然後用await獲取結果。

reduce/reduceRight

reduce的函數簽名想必大家也很熟悉了，接收兩個參數：

  1. 對每一項元素執行的回調函數，返回值將被累加到下次函數調用中，回調函數的簽名：
    1. accumulator累加的值
    2. currentValue當前正在處理的元素
    3. currentIndex當前正在處理的元素下標
    4. array調用reduce的數組
  2. 可選的初始化的值，將作為accumulator的初始值
1 [1, 2, 3].reduce((accumulator, item) => accumulator + item, 0) // 進行加和
2 // > 6

 

這個代碼也是沒毛病的，同樣如果我們加和的操作也是個非同步的：

1 [1, 2, 3].reduce(async (accumulator, item) => accumulator + item, 0) // 進行加和
2 // > Promise {<resolved>: "[object Promise]3"}

 

這個結果返回的就會很詭異了，我們在回看上邊的reduce的函數簽名

對每一項元素執行的回調函數，返回值將被累加到下次函數調用中

然後我們再來看代碼，async (accumulator, item) => accumulator += item
這個在最開始也提到了，是Pormise的語法糖，為了看得更清晰，我們可以這樣寫：

1 (accumulator, item) => new Promise(resolve =>
2   resolve(accumulator += item)
3 )

 

也就是說，我們reduce的回調函數返回值其實就是一個Promise對象
然後我們對Promise對象進行+=操作，得到那樣怪異的返回值也就很合情合理了。

當然，reduce的調整也是很輕鬆的：

1 await [1, 2, 3].reduce(async (accumulator, item) => await accumulator + item, 0)
2 // > 6

 

我們對accumulator調用await，然後再與當前item進行加和，在最後我們的reduce返回值也一定是一個Promise，所以我們在最外邊也添加await的字樣
也就是說我們每次reduce都會返回一個新的Promise對象，在對象內部都會獲取上次Promise的結果。
我們調用reduce實際上得到的是類似這樣的一個Promise對象：

 1 new Promise(resolve => {
 2   let item = 3
 3   new Promise(resolve => {
 4       let item = 2
 5       new Promise(resolve => {
 6         let item = 1
 7         Promise.resolve(0).then(result => resolve(item + result))
 8       }).then(result => resolve(item + result))
 9   }).then(result => resolve(item + result))
10 })

 

reduceRight

這個就沒什麼好說的了。。跟reduce只是執行順序相反而已

forEach

forEach，這個應該是用得最多的遍歷方法了，對應的函數簽名：

  1. callback，對每一個元素進行調用的函數
    1. currentValue，當前元素
    2. index，當前元素下標
    3. array，調用forEach的數組引用
  2. thisArg，一個可選的回調函數this指向

我們有如下的操作：

1 // 獲取數組元素求平方後的值
2 [1, 2, 3].forEach(item => {
3   console.log(item ** 2)
4 })
5 // > 1
6 // > 4
7 // > 9

 

普通版本我們是可以直接這麼輸出的，但是如果遇到了Promise

1 // 獲取數組元素求平方後的值
2 [1, 2, 3].forEach(async item => {
3   console.log(item ** 2)
4 })
5 // > nothing

 

forEach並不關心回調函數的返回值，所以forEach只是執行了三個會返回Promise的函數
所以如果我們想要得到想要的效果，只能夠自己進行增強對象屬性了：

 1 Array.prototype.forEachSync = async function (callback, thisArg) {
 2   for (let [index, item] of Object.entries(this)) {
 3     await callback(item, index, this)
 4   }
 5 }
 6 
 7 await [1, 2, 3].forEachSync(async item => {
 8   console.log(item ** 2)
 9 })
10 
11 // > 1
12 // > 4
13 // > 9

 

await會忽略非Promise值，await 0、await undefined與普通代碼無異

filter

filter作為一個篩選數組用的函數，同樣具有遍歷的功能：
函數簽名同forEach，但是callback返回值為true的元素將被放到filter函數返回值中去。

我們要進行一個奇數的篩選，所以我們這麼寫：

1 [1, 2, 3].filter(item => item % 2 !== 0)
2 // > [1, 3]

 

然後我們改為Promise版本：

1 [1, 2, 3].filter(async item => item % 2 !== 0)
2 // > [1, 2, 3]

 

這會導致我們的篩選功能失效，因為filter的返回值匹配不是完全相等的匹配，只要是返回值能轉換為true，就會被認定為通過篩選。
Promise對象必然是true的，所以篩選失效。
所以我們的處理方式與上邊的forEach類似，同樣需要自己進行對象增強
但我們這裡直接選擇一個取巧的方式：

1 Array.prototype.filterSync = async function (callback, thisArg) {
2   let filterResult = await Promise.all(this.map(callback))
3   // > [true, false, true]
4 
5   return this.filter((_, index) => filterResult[index])
6 }
7 
8 await [1, 2, 3].filterSync(item => item % 2 !== 0)

 

我們可以直接在內部調用map方法，因為我們知道map會將所有的返回值返回為一個新的數組。
這也就意味著，我們map可以拿到我們對所有item進行篩選的結果，true或者false。
接下來對原數組每一項進行返回對應下標的結果即可。

some

some作為一個用來檢測數組是否滿足一些條件的函數存在，同樣是可以用作遍歷的
函數簽名同forEach，有區別的是當任一callback返回值匹配為true則會直接返回true，如果所有的callback匹配均為false，則返回false

我們要判斷數組中是否有元素等於2：

1 [1, 2, 3].some(item => item === 2)
2 // > true

 

然後我們將它改為Promise

1 [1, 2, 3].some(async item => item === 2)
2 // > true

 

這個函數依然會返回true，但是卻不是我們想要的，因為這個是async返回的Promise對象被認定為true。

所以，我們要進行如下處理：

1 Array.prototype.someSync = async function (callback, thisArg) {
2   for (let [index, item] of Object.entries(this)) {
3     if (await callback(item, index, this)) return true
4   }
5 
6   return false
7 }
8 await [1, 2, 3].someSync(async item => item === 2)
9 // > true

 

因為some在匹配到第一個true之後就會終止遍歷，所以我們在這裡邊使用forEach的話是在性能上的一種浪費。
同樣是利用了await會忽略普通表達式的優勢，在內部使用for-of來實現我們的需求

every

以及我們最後的一個every
函數簽名同樣與forEach一樣，
但是callback的處理還是有一些區別的：
其實換一種角度考慮，every就是一個反向的some
some會在獲取到第一個true時終止
而every會在獲取到第一個false時終止，如果所有元素均為true，則返回true

我們要判定數組中元素是否全部大於3

1 [1, 2, 3].every(item => item > 3)
2 // > false

 

很顯然，一個都沒有匹配到的，而且回調函數在執行到第一次時就已經終止了，不會繼續執行下去。
我們改為Promise版本：

1 [1, 2, 3].every(async => item > 3)
2 // > true

 

這個必然是true，因為我們判斷的是Promise對象
所以我們拿上邊的someSync實現稍微修改一下：

1 Array.prototype.everySync = async function (callback, thisArg) {
2   for (let [index, item] of Object.entries(this)) {
3     if (!await callback(item, index, this)) return false
4   }
5 
6   return true
7 }
8 await [1, 2, 3].everySync(async item => item === 2)
9 // > false

 

當匹配到任意一個false時，直接返回false，終止遍歷。

後記

關於數組的這幾個遍歷方法。
因為map和reduce的特性，所以是在使用async時改動最小的函數。
reduce的結果很像一個洋蔥模型
但對於其他的遍歷函數來說，目前來看就需要自己來實現了。

四個*Sync函數的實現：https://github.com/Jiasm/notebook/tree/master/array-sync

參考資料

Array - JavaScript | MDN


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Oracle觸發器簡單入門記錄
    寫在前面： 最近，老項目新增了日報優化的需求，麗姐讓我用觸發器去實現當數據插入或者更新的時候，實現對日報表數據更新操作。嗯嗯嗯呢，之前學習資料庫的時候，有碰到過觸發器，但都是一跳而過，也沒怎麼去真正的實踐，這次就權當再次去學習吧~~ 1.觸發器實例： 上面的觸發器例子，只是一個框架，並不能執行，這裡 ...
  • andriod導入v4包導致的錯誤
    最近升級android studio到版本3.0.1後，想要使用FragmentActivity這個類，導入v4包，發現R文件報錯了，也就是找不到的意思。 如圖：導包 此時選中v4包導進去。 確定之後它一下子就跑到這裡來，這是Values文件。查看了一下，還真沒有R文件的相關內容。 再看下build ...
  • UITableViewCell的父視圖
    最近版本測試階段，發現一個奇怪的問題，以前在A測試機上出現的崩潰bug，解決後今天在B測試機上又出現了，在B上解決完之後，返回到設備A上發現又不行了。最後調試發現是測試設備系統版本不同導致的，A設備是iOS10的，而B設備是iOS11的，需求是，當點擊自定義的UITableViewCell時，需要它 ...
  • iOS----------常見經典錯誤
    最近使用cocoapods集成友盟 發現幾個經典錯誤 1.clang: error: linker command failed with exit code 1 (use -v to see invocation) 這個 應該是配置路徑 有問題。 我的解決方案是：找到other link 刪除所有 ...
  • android studio gradle 更新方法。
    Android studio更新 第一步：在你所在項目文件夾下：你項目根目錄gradlewrapper gradle-wrapper.properties (只要在打開項目的時候選OK，這個文件就會出現) 修改gradle-wrapper.properties最後一行的地址我的是： 1 distri ...
  • MySql 常用命令總結
    註意事項： sql 使用單引號來環繞文本值（大部分資料庫系統也接受雙引號）。如果是數值，請不要使用引號。 一、資料庫 1、創建資料庫 創建一個名字為lesson的資料庫 2、刪除資料庫 二：表 1、創建表 CREATE TABLE .`it` ( INT NOT NULL, VARCHAR(45) ...
  • 教我徒弟Android開發入門（四）
    本期知識點： 兩大常用佈局的簡單介紹 在我們的APP使用第三方庫 Android Studio常用快捷鍵 兩大常用佈局的簡單介紹 在我們的APP使用第三方庫 Android Studio常用快捷鍵 一、兩大常用佈局 1.LinearLayout線性佈局 線性佈局，可以垂直顯示或者水平顯示，設置Lin ...
  • android高德地圖網路路徑實現自定義marker並點擊彈出自定義視窗
    android中使用地圖的地方隨處可見，今天記錄一下網路路徑生成自定義marker，點擊標記彈出自定義的視窗(在這裡使用的是高德地圖) 在這裡我們使用Grilde去載入網路圖片，因為這個簡直太方便了！ 在android studio下，在app/build.gradle文件當中添加如下依賴： com ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類