5. vue常用高阶函数及综合案例

一. 常用的数组的高阶函数
假设, 现在有一个数组, 我们要对数组做如下一些列操作

1. 找出小于100的数字:
2. 将小于100的数字, 全部乘以2:
3. 在2的基础上, 对所有数求和:
   通常我们会怎么做呢?

找出小于100的数字:

将小于100的数字, 全部乘以2:

对所有数求和:

<button @click="getNum()">计算</button>

在上面的demo中, 我们全部都是使用循环来进行计算, 并且最后达到了我们想要的效果. 点击计算按钮, 查看计算结果:

在js高阶函数里面, 有一些高阶函数是可以直接计算得到上面的效果的. 下面主要介绍三个高阶函数

filter
map
reduce

1. filter函数
   filter()方法会创建一个新数组，原数组的每个元素传入回调函数中，回调函数中有return返回值，若返回值为true，这个元素保存到新数组中；若返回值为false，则该元素不保存到新数组中；原数组不发生改变。

语法: array.filter(function(currentValue,index,arr), thisValue)
参数

举例1: 返回数组中<100的元素
getNums() {
// 来看看filter的用法
　　 let num1 = [10 ,20, 100, 30, 320, 55. 80, 210]
let newNum1 = this.nums.filter(function (num) {
return num < 100;
})
console.log(newNum1)
}
filter()函数的入参是一个function, 出参是一个新的数组
function函数也有参, 这里只传入了第一个入参, 表示: 循环遍历时的数组元素.
function的返回值类型是true或false, 如果返回结果是true, 则返回新数组中有这个元素, 返回结果是false, 则返回新数组中没有这个元素

举例2: 利用filter，可以巧妙地去除Array的重复元素：
filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身：

let nums = [10, 20, 100, 30,