vue,js中高階函數的使用


在用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來表示,然后再返回兩個參數相加得到的值(參數的具體意義突然搞忘了,所以此處不敢妄加解釋)。

二.三個方法間的混合使用

用箭頭函數再次簡寫可以寫為:

請朋友們自行理解...


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM