vue中常用的三种js高阶函数(filter/map/reduce)

介绍三个js中数组使用的高阶函数 filter、map、reduce

1、filter函数：
作用：对数组进行过滤
传入值：需要传入一个返回布尔值的函数作为过滤标准
返回值：返回一个过滤之后的数组
例子：

array2 = array1.filter(function(n){
  return n < 100;
})

基本就是对一个数组进行传入函数对数组内的每个值进行判断，如果这个值让函数的返回值为true，就把它加入到过滤后的数组中，否则不加入。
2、map函数：
作用：映射操作，具体说就是对数组内的每个值进行计算，再存储到新的数组中
传入值：一个函数
返回值：一个运算后的数组
例子：

array3 = array2.map(function(n){
  return n + 100;
})

3、reduce函数：
作用：对数组中的所有内容进行汇总
传入值(2个)：一个函数（函数内部有两个参数，前一个是自动获取的上一次遍历产生的计算结果、后一个是数组的某一个值）、还要传入一个计算结果的初始化值（一般为零）
返回值：可以是数字、字符串（不会再产生一个数组）
例子：

total = array3.reduce(function(prevValue, n){
  return prevValue + n;
}, 0)

三种高阶函数综合使用例子：

total = array1.filter(function(n){
  return n < 100;
}).map(function(n){
  return n + 100;
}).reduce(function(prevValue, n){
  return prevValue + n;
}, 0);

关于箭头函数的补充：
使用箭头函数则更加简洁、可读性更强：

total = array1.filter(n => n < 100).map(n => n + 100).reduce((pre, n) => pre + n, 0);

注：箭头函数更加适合用于本来需要作为匿名函数的地方
箭头函数的结构为：

() => {}

简单来说结构就是 小括号指向大括号

小括号里面放参数，大括号里面放函数体；
简便写法：
如果小括号里面只要一个参数，那么小括号可以省略；若是无参数、多参数，则需要加上小括号
如果函数体较简单，比如只需要一行，可以省去大括号和里面的return;，直接放上表达式

(x) => {
  return x * x;
}
// 省去小括号
x => {
  return x * x;
}
// 省去小括号和大括号
x => x * x