摘要:我們要進行一個奇數的篩選,所以我們這么寫然后我們改為版本這會導致我們的篩選功能失效,因為的返回值匹配不是完全相等的匹配,只要是返回值能轉換為,就會被認定為通過篩選。
這里指的遍歷方法包括:map、reduce、reduceRight、forEach、filter、some、every
因為最近要進行了一些數據匯總,node版本已經是8.11.1了,所以直接寫了個async/await的腳本。
但是在對數組進行一些遍歷操作時,發現有些遍歷方法對Promise的反饋并不是我們想要的結果。
當然,有些嚴格來講并不能算是遍歷,比如說some,every這些的。
但確實,這些都會根據我們數組的元素來進行多次的調用傳入的回調。
這些方法都是比較常見的,但是當你的回調函數是一個Promise時,一切都變了。
前言async/await為Promise的語法糖
文中會直接使用async/await替換Promise
let result = await func() // => 等價于 func().then(result => { // code here }) // ====== async function func () { return 1 } // => 等價與 function func () { return new Promise(resolve => resolve(1)) }map
map可以說是對Promise最友好的一個函數了。
我們都知道,map接收兩個參數:
對每項元素執行的回調,回調結果的返回值將作為該數組中相應下標的元素
一個可選的回調函數this指向的參數
[1, 2, 3].map(item => item ** 2) // 對數組元素進行求平方 // > [1, 4, 9]
上邊是一個普通的map執行,但是當我們的一些計算操作變為異步的:
[1, 2, 3].map(async item => item ** 2) // 對數組元素進行求平方 // > [Promise, Promise, Promise]
這時候,我們獲取到的返回值其實就是一個由Promise函數組成的數組了。
所以為什么上邊說map函數為最友好的,因為我們知道,Promise有一個函數為Promise.all
會將一個由Promise組成的數組依次執行,并返回一個Promise對象,該對象的結果為數組產生的結果集。
await Promise.all([1, 2, 3].map(async item => item ** 2)) // > [1, 4, 9]
首先使用Promise.all對數組進行包裝,然后用await獲取結果。
reduce/reduceRightreduce的函數簽名想必大家也很熟悉了,接收兩個參數:
對每一項元素執行的回調函數,返回值將被累加到下次函數調用中,回調函數的簽名:
accumulator累加的值
currentValue當前正在處理的元素
currentIndex當前正在處理的元素下標
array調用reduce的數組
可選的初始化的值,將作為accumulator的初始值
[1, 2, 3].reduce((accumulator, item) => accumulator + item, 0) // 進行加和 // > 6
這個代碼也是沒毛病的,同樣如果我們加和的操作也是個異步的:
[1, 2, 3].reduce(async (accumulator, item) => accumulator + item, 0) // 進行加和 // > Promise?{: "[object Promise]3"}
這個結果返回的就會很詭異了,我們在回看上邊的reduce的函數簽名
對每一項元素執行的回調函數,返回值將被累加到下次函數調用中
然后我們再來看代碼,async (accumulator, item) => accumulator += item
這個在最開始也提到了,是Pormise的語法糖,為了看得更清晰,我們可以這樣寫:
(accumulator, item) => new Promise(resolve => resolve(accumulator += item) )
也就是說,我們reduce的回調函數返回值其實就是一個Promise對象
然后我們對Promise對象進行+=操作,得到那樣怪異的返回值也就很合情合理了。
當然,reduce的調整也是很輕松的:
await [1, 2, 3].reduce(async (accumulator, item) => await accumulator + item, 0) // > 6
我們對accumulator調用await,然后再與當前item進行加和,在最后我們的reduce返回值也一定是一個Promise,所以我們在最外邊也添加await的字樣
也就是說我們每次reduce都會返回一個新的Promise對象,在對象內部都會獲取上次Promise的結果。
我們調用reduce實際上得到的是類似這樣的一個Promise對象:
new Promise(resolve => { let item = 3 new Promise(resolve => { let item = 2 new Promise(resolve => { let item = 1 Promise.resolve(0).then(result => resolve(item + result)) }).then(result => resolve(item + result)) }).then(result => resolve(item + result)) })reduceRight
這個就沒什么好說的了。。跟reduce只是執行順序相反而已
forEachforEach,這個應該是用得最多的遍歷方法了,對應的函數簽名:
callback,對每一個元素進行調用的函數
currentValue,當前元素
index,當前元素下標
array,調用forEach的數組引用
thisArg,一個可選的回調函數this指向
我們有如下的操作:
// 獲取數組元素求平方后的值 [1, 2, 3].forEach(item => { console.log(item ** 2) }) // > 1 // > 4 // > 9
普通版本我們是可以直接這么輸出的,但是如果遇到了Promise
// 獲取數組元素求平方后的值 [1, 2, 3].forEach(async item => { console.log(item ** 2) }) // > nothing
forEach并不關心回調函數的返回值,所以forEach只是執行了三個會返回Promise的函數
所以如果我們想要得到想要的效果,只能夠自己進行增強對象屬性了:
Array.prototype.forEachSync = async function (callback, thisArg) { for (let [index, item] of Object.entries(this)) { await callback(item, index, this) } } await [1, 2, 3].forEachSync(async item => { console.log(item ** 2) }) // > 1 // > 4 // > 9
await會忽略非Promise值,await 0、await undefined與普通代碼無異
filterfilter作為一個篩選數組用的函數,同樣具有遍歷的功能:
函數簽名同forEach,但是callback返回值為true的元素將被放到filter函數返回值中去。
我們要進行一個奇數的篩選,所以我們這么寫:
[1, 2, 3].filter(item => item % 2 !== 0) // > [1, 3]
然后我們改為Promise版本:
[1, 2, 3].filter(async item => item % 2 !== 0) // > [1, 2, 3]
這會導致我們的篩選功能失效,因為filter的返回值匹配不是完全相等的匹配,只要是返回值能轉換為true,就會被認定為通過篩選。
Promise對象必然是true的,所以篩選失效。
所以我們的處理方式與上邊的forEach類似,同樣需要自己進行對象增強
但我們這里直接選擇一個取巧的方式:
Array.prototype.filterSync = async function (callback, thisArg) { let filterResult = await Promise.all(this.map(callback)) // > [true, false, true] return this.filter((_, index) => filterResult[index]) } await [1, 2, 3].filterSync(item => item % 2 !== 0)
我們可以直接在內部調用map方法,因為我們知道map會將所有的返回值返回為一個新的數組。
這也就意味著,我們map可以拿到我們對所有item進行篩選的結果,true或者false。
接下來對原數組每一項進行返回對應下標的結果即可。
some作為一個用來檢測數組是否滿足一些條件的函數存在,同樣是可以用作遍歷的
函數簽名同forEach,有區別的是當任一callback返回值匹配為true則會直接返回true,如果所有的callback匹配均為false,則返回false
我們要判斷數組中是否有元素等于2:
[1, 2, 3].some(item => item === 2) // > true
然后我們將它改為Promise
[1, 2, 3].some(async item => item === 2) // > true
這個函數依然會返回true,但是卻不是我們想要的,因為這個是async返回的Promise對象被認定為true。
所以,我們要進行如下處理:
Array.prototype.someSync = async function (callback, thisArg) { for (let [index, item] of Object.entries(this)) { if (await callback(item, index, this)) return true } return false } await [1, 2, 3].someSync(async item => item === 2) // > true
因為some在匹配到第一個true之后就會終止遍歷,所以我們在這里邊使用forEach的話是在性能上的一種浪費。
同樣是利用了await會忽略普通表達式的優勢,在內部使用for-of來實現我們的需求
以及我們最后的一個every
函數簽名同樣與forEach一樣,
但是callback的處理還是有一些區別的:
其實換一種角度考慮,every就是一個反向的some
some會在獲取到第一個true時終止
而every會在獲取到第一個false時終止,如果所有元素均為true,則返回true
我們要判定數組中元素是否全部大于3
[1, 2, 3].every(item => item > 3) // > false
很顯然,一個都沒有匹配到的,而且回調函數在執行到第一次時就已經終止了,不會繼續執行下去。
我們改為Promise版本:
[1, 2, 3].every(async => item > 3) // > true
這個必然是true,因為我們判斷的是Promise對象
所以我們拿上邊的someSync實現稍微修改一下:
Array.prototype.everySync = async function (callback, thisArg) { for (let [index, item] of Object.entries(this)) { if (!await callback(item, index, this)) return false } return true } await [1, 2, 3].everySync(async item => item === 2) // > false
當匹配到任意一個false時,直接返回false,終止遍歷。
后記關于數組的這幾個遍歷方法。
因為map和reduce的特性,所以是在使用async時改動最小的函數。
reduce的結果很像一個洋蔥模型
但對于其他的遍歷函數來說,目前來看就需要自己來實現了。
四個*Sync函數的實現:https://github.com/Jiasm/notebook/tree/master/array-sync
參考資料Array - JavaScript | MDN
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94611.html
摘要:我的書簽我的書簽謹慎導入,小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧,讓你少寫不必要的,代碼更優雅一勞永 我的書簽 我的書簽(謹慎導入,小心覆蓋) 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...
摘要:我的書簽我的書簽謹慎導入,小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧,讓你少寫不必要的,代碼更優雅一勞永 我的書簽 我的書簽(謹慎導入,小心覆蓋) 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...
摘要:今天主要講解的是本文力求簡單講清每個知識點,希望大家看完能有所收獲一和回顧線程安全的和我們知道是用于替代的,是線程安全的容器。使用迭代器遍歷時不需要顯示加鎖,看看與方法的實現可能就有點眉目了。 前言 只有光頭才能變強 showImg(https://segmentfault.com/img/remote/1460000016931828?w=1120&h=640); 前一陣子寫過一篇C...
摘要:今天我們來自己手寫一個符合規范的庫。是異步編程的一種解決方案,比傳統的解決方案回調函數和事件更合理和更強大。我們可以看到,其實就是一個構造函數。所以說我們的數組里存的是一個一個的的回調函數,也就是一個一個。 今天我們來自己手寫一個符合PromiseA+規范的Promise庫。大家是不是很激動呢?? showImg(https://segmentfault.com/img/bV6t4Z?...
閱讀 3095·2021-10-15 09:41
閱讀 3167·2021-09-22 16:05
閱讀 2405·2021-09-22 15:19
閱讀 2873·2021-09-02 15:11
閱讀 2446·2019-08-30 15:52
閱讀 832·2019-08-30 11:06
閱讀 1001·2019-08-29 16:44
閱讀 1240·2019-08-23 18:18