在用vue.js開發過程中為了使代碼不那么復雜化,我們常常需要記住一些js中高階函數的用法,這里推薦3中高階函數的用法:filter,map,reduce
這里用一個小栗子來記錄一下:
const nums = [12, 23, 22, 18, 100, 67, 48, 88]
需求1:對數組進行遍歷篩選小於50的數字,如果不用高階函數的話,我們可能需要非常冗長的代碼來完成這樣的需求
如上,這樣寫還不能對新數組進行排序,非常的復雜冗長,所以引入了我們的高階函數filter(后面的長代碼就不一一列舉了!!實在太難寫了基本上都是換湯不換葯的類型)
filter:回調函數的返回值為true時將回調函數參數的值放入新數組
而如果用高階函數使用的話就僅需用一行代碼來完成這個需求
這里對filter函數的參數進行解釋:從filter函數的定義(這里就不列舉filter的定義了)來說,他的參數必須是一個函數,函數內需要有形參n,然后在函數內部return表達式
2.對數組的每個參數進行*2
這里用高階函數中的map函數。
map:對數組對象中的值進行操作,將操作后的數放入新數組
話不多說,直接上代碼。
map函數的用法參考filter
3.對數組中的所有參數進行相加。
reduce函數:對數組中所以內容進行匯總
這里對reduce函數進行解釋:
同意reduce方法需要傳入的參數也為一個函數,但函數內部需要兩個形參,此處用preValue和n來表示,然后再返回兩個參數相加得到的值(參數的具體意義突然搞忘了,所以此處不敢妄加解釋)。
二.三個方法間的混合使用
用箭頭函數再次簡寫可以寫為:
請朋友們自行理解...