# 高階函數的概念
高階函數英文叫Higher-order function。那么什么是高階函數?
JavaScript的函數其實都指向某個變量。既然變量可以指向函數,函數的參數能接收變量,那么一個函數就可以接收另一個函數作為參數,這種函數就稱之為高階函數。
一個最簡單的高階函數:
~~~
function add(x, y, f) {
return f(x) + f(y);
}
~~~
當我們調用`add(-5, 6, Math.abs)`時,參數`x`,`y`和`f`分別接收`-5`,`6`和函數`Math.abs`,根據函數定義,我們可以推導計算過程為:
~~~
x = -5;
y = 6;
f = Math.abs;
f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11;
return 11;
~~~
用代碼驗證一下:
~~~
add(-5, 6, Math.abs); // 11
~~~
> 編寫高階函數,就是讓函數的參數能夠接收別的函數。
# 映射函數map
**定義:對數組中的每個元素進行處理,得到新的數組;**
**特點:不改變原數組;**
舉例說明,比如我們有一個函數,
```[math]
f(x)=x^2
```
要把這個函數作用在一個數組`[1, 2, 3, 4, 5, 6, 7, 8, 9]`上,就可以用map實現如下:
由于map()方法定義在JavaScript的Array中,我們調用Array的map()方法,傳入我們自己的函數,就得到了一個新的Array作為結果:
```js
function pow(x) {
return (x*x)
}
var arr = [1,2,3,4,5,6,7,8,9];
arr.map(pow);//[1, 4, 9, 16, 25, 36, 49, 64, 81]
```
map()傳入的參數是pow,即函數對象本身。
map()作為高階函數,事實上它把運算規則抽象了,因此,我們不但可以計算簡單的f(x)=x2,還可以計算任意復雜的函數,比如,把Array的所有數字轉為字符串:
```js
var arr = [1,2,3,4,5,6,7,8,9];
arr.map(String);//['1', '2', '3', '4', '5', '6', '7', '8', '9']
```
# reduce
Array的reduce()把一個函數作用在這個Array的\[x1, x2, x3...\]上,這個函數必須接收兩個參數,reduce()把結果繼續和序列的下一個元素做累積計算,其效果就是:
```
[x1, x2, x3, x4].reduce( f(x,y) ) //相當于 f(f(f(x1, x2), x3), x4)
```
比方說對一個Array求和,就可以用reduce實現:
```js
var arr = [1,3,5,7,9];
arr.reduce(function(x, y) {
return x + y;
});// 25
```
## 實踐
利用reduce()求積:
```js
function product(arr) {
return arr.reduce(function (x,y) {
return parseInt(x)*parseInt(y);
});
}
// 測試:
if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) {
alert('測試通過!');
}else {
alert('測試失敗!');
}
```
> 試一試先用map將整個數組轉換為Int然后在做乘法
# filter
```js
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
let data = ages.filter(checkAdult);
return data;
}
```
- 內容介紹
- EcmaScript基礎
- 快速入門
- 常量與變量
- 字符串
- 函數的基本概念
- 條件判斷
- 數組
- 循環
- while循環
- for循環
- 函數基礎
- 對象
- 對象的方法
- 函數
- 變量作用域
- 箭頭函數
- 閉包
- 高階函數
- map/reduce
- filter
- sort
- Promise
- 基本對象
- Arguments 對象
- 剩余參數
- Map和Set
- Json基礎
- RegExp
- Date
- async
- callback
- promise基礎
- promise-api
- promise鏈
- async-await
- 項目實踐
- 標簽系統
- 遠程API請求
- 面向對象編程
- 創建對象
- 原型繼承
- 項目實踐
- Classes
- 構造函數
- extends
- static
- 項目實踐
- 模塊
- import
- export
- 項目實踐
- 第三方擴展庫
- immutable
- Vue快速入門
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入門
- 模板語法
- 計算屬性和偵聽器
- Class 與 Style 綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 組件注冊
- Prop
- 自定義事件
- 插槽
- 混入
- 過濾器
- 項目實踐
- 標簽編輯
- 移動客戶端開發
- uni-app基礎
- 快速入門程序
- 單頁程序
- 底部Tab導航
- Vue語法基礎
- 模版語法
- 計算屬性與偵聽器
- Class與Style綁定
- 樣式與布局
- Box模型
- Flex布局
- 內置指令
- 基本指令
- v-model與表單
- 條件渲染指令
- 列表渲染指令v-for
- 事件與自定義屬性
- 生命周期
- 項目實踐
- 學生實驗
- 貝店商品列表
- 加載更多數據
- 詳情頁面
- 自定義組件
- 內置組件
- 表單組件
- 技術專題
- 狀態管理vuex
- Flyio
- Mockjs
- SCSS
- 條件編譯
- 常用功能實現
- 上拉加載更多數據
- 數據加載綜合案例
- Teaset UI組件庫
- Teaset設計
- Teaset使用基礎
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代碼模版
- 項目實踐
- 標簽組件
- 失物招領客戶端原型
- 發布頁面
- 檢索頁面
- 詳情頁面
- 服務端開發技術
- 服務端開發環境配置
- Koajs快速入門
- 快速入門
- 常用Koa中間件介紹
- 文件上傳
- RestfulApi
- 一個復雜的RESTful例子
- 使用Mockjs生成模擬數據
- Thinkjs快速入門
- MVC模式
- Thinkjs介紹
- 快速入門
- RESTful服務
- RBAC案例
- 關聯模型
- 應用開發框架
- 服務端開發
- PC端管理界面開發
- 移動端開發
- 項目實踐
- 失物招領項目
- 移動客戶端UI設計
- 服務端設計
- 數據庫設計
- Event(事件)
- 客戶端設計
- 事件列表頁面
- 發布頁面
- 事件詳情頁面
- API設計
- image
- event
- 微信公眾號開發
- ui設計規范