自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

聊聊 Javascript 常見的高階函數(shù)

開發(fā) 前端
高階函數(shù),英文叫 Higher Order function。一個(gè)函數(shù)可以接收另外一個(gè)函數(shù)作為參數(shù),這種函數(shù)就叫做高階函數(shù)。

[[422538]]

高階函數(shù),英文叫 Higher Order function。一個(gè)函數(shù)可以接收另外一個(gè)函數(shù)作為參數(shù),這種函數(shù)就叫做高階函數(shù)。

示例:

  1. function add(x, y, f) { 
  2.  return f(x) + f(y); 
  3.  
  4. //用代碼驗(yàn)證一下: 
  5. add(-5, 6, Math.abs); // 11 

一、常見的高階函數(shù)

ES6中數(shù)組新增了幾種方法,其中 map、reduce、filter 幾個(gè)都是高階函數(shù),除此,普通的sort也是高階函數(shù)。分別介紹下新增的三個(gè)方法。

1.1、filter

filter 是過濾數(shù)組,返回滿足條件的數(shù)據(jù),組成一個(gè)新的數(shù)組返回,不滿足條件的被丟棄。

實(shí)例1:取出數(shù)組中小于 100 的數(shù)據(jù),放到一個(gè)新數(shù)組中

  1. let grad = [ 102, 188, 55, 66, 200, 800 ] 
  2. let arr2 = grad.filter( function(item){ 
  3.  return item <= 100 
  4. }) 
  5. console.log("arr2",arr2)// 55, 66 

 上述實(shí)例中,filter傳入的參數(shù)是一個(gè)函數(shù),傳入的函數(shù)依次作用于每個(gè)元素,然后根據(jù)返回值是 true 或 false 決定保留還是丟棄元素。因?yàn)橹挥? 55 66 兩個(gè)滿足條件,所以新的數(shù)組中只有這兩個(gè)元素。

1.2、map

map 是映射的意思。

原數(shù)組被映射成一個(gè)新的數(shù)組,返回值是一個(gè)新數(shù)組,不改變?cè)瓉淼臄?shù)組。新的數(shù)組與原數(shù)組的長(zhǎng)度是不會(huì)改變的。

實(shí)例2:給數(shù)據(jù)每個(gè)元素放大 2 倍。

  1. let arr2 = [ 55, 66 ] 
  2. let arr3 = arr2.map( item => { 
  3.  return item*2 
  4. }) 
  5. //返回結(jié)果 [ 110, 132 ] 

 上述實(shí)例,map接收的參數(shù)是一個(gè)函數(shù),該函數(shù)依次作用于每個(gè)元素,對(duì)元素放大了2倍,也可以對(duì)其進(jìn)行任意的復(fù)雜操作。

1.3、reduce

reduce 是對(duì)數(shù)組進(jìn)行匯總的,往往進(jìn)去一個(gè)數(shù)組,出來是一個(gè)數(shù)據(jù)。經(jīng)常用于求和和計(jì)算平均值。

實(shí)例3:對(duì)上個(gè)實(shí)例返回的結(jié)果進(jìn)行求和。

  1. let sum = arr3.reduce((tmp,item)=>{ 
  2.  return tmp+item 
  3. }) 
  4. //返回結(jié)果 242 

 重點(diǎn)來了,如果我們想把上邊三個(gè)實(shí)例合并到一起執(zhí)行,最終我們可以寫得有多簡(jiǎn)單呢?

  1. // 復(fù)雜寫法 
  2. let grad = [102,188,55,66,200,800] 
  3. let arr2 = grad.filter(function(item){ 
  4.  return item <= 100 
  5. }) 
  6. let arr3 = arr2.map(item=>{ 
  7.  return item*2 
  8. }) 
  9. let sum = arr3.reduce((tmp,item)=>{ 
  10.  return tmp+item 
  11. }) 
  12.  
  13. //簡(jiǎn)單寫法 
  14. let sum2 = grad 
  15.            .filter( item => {return item <= 100}) 
  16.           .map(item=>{return item*2}) 
  17.           .reduce((tmp,item)=>{return tmp+item}) 

 

責(zé)任編輯:姜華 來源: 今日頭條
相關(guān)推薦

2021-05-28 08:52:45

Hive分析函數(shù)

2022-08-24 14:14:58

JavaScript函數(shù)

2021-10-09 07:10:30

JavaScriptBigIn函數(shù)

2021-01-22 07:48:07

JavaScript 高階函數(shù)閉包

2023-11-28 09:19:12

2022-01-04 06:50:12

數(shù)據(jù)摘要方法

2022-02-09 11:02:16

JavaScript前端框架

2021-01-07 07:53:10

JavaScript內(nèi)存管理

2021-10-17 22:40:51

JavaScript開發(fā) 框架

2015-04-08 10:27:43

JavaScript字符串操作函數(shù)

2024-06-26 13:11:40

2022-03-17 08:34:47

TypeScript項(xiàng)目類型

2024-07-18 15:08:27

2022-03-30 09:01:37

CSS屬性函數(shù)

2022-02-07 21:49:19

串行通信UART

2022-01-04 12:19:12

自動(dòng)駕駛系統(tǒng)開發(fā)

2019-07-23 15:04:54

JavaScript調(diào)用棧事件循環(huán)

2021-06-02 09:01:19

JavaScript 前端異步編程

2020-11-09 07:25:20

函數(shù) JavaScript數(shù)據(jù)

2017-01-22 21:13:48

Android移動(dòng)開發(fā)高階函數(shù)
點(diǎn)贊
收藏

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