# 高阶函数的概念
高阶函数英文叫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设计规范