ES6 高阶函数的使用详解

高阶函数是ES6提供的新方法。只所以叫高阶函数是因为这些方法参数都是函数，也就是在函数里面传函数。这就是所谓的函数式编程，函数是一等公民。而传统的面向对象编程，对象是第一公民。
主要高阶函数有filter,map和reduce。这三个函数实际上就是用来替代for循环，更加的高效方便。

filter函数

有这样的需求：
1.过滤数组中小于100的数字，arr=[10,99,101,22,33]。
传统做法就是遍历加判断。ES6提供新的方式（可以提供高阶函数）来快速实现这种功能。
这种写法是少很多代码的，也不要for循环了。而且会将结果直接添加到新的数组里面，这个用传统方法写代码还是比较多的。

                let arr=[10,99,101,22,33]
                let newArr
                newArr=arr.filter(function (n) {
                    return n<100
                })
                console.log(newArr);
1
2
3
4
5
6

map

2.需求：将数组中的元素乘以二，arr=[10,99,101,22,33]。

 				let arr=[10,99,101,22,33]
                let newArr=arr.map(function (n) {
                    return n*2
                })
                console.log(newArr)
1
2
3
4
5

reduce

3.需求将数组中的元素累加，arr=[10,99,101,22,33]
可以实现遍历数组，并且拿到前一个值和当前值，这样我们就可以实现类似累加或者累乘等操作。
下面的代码实现累加，比for还是少一些代码的。需要传两个参数第一个和上面一样，传一个函数，第二个参数实际上是给prevValue一个初值。这里是0。
reduce相对来说难一点，不过他的本质就是拿到前一个值和当前值

				let arr=[10,99,101,22,33]
                let newArr=arr.reduce(function (prevValue,currentValue) {
                    return prevValue+currentValue
                },0)
                console.log(newArr);
1
2
3
4
5

整合例子

把上面三个函数一起用。
4.需求：筛选小于100的元素，然后乘以2，然后把数组累加。
就是将上面的写法连在一起。

      		   let arr=[10,99,101,22,33]
               let total= arr.filter(function (value) {
                    return value<100
                }).map(function (value) {
                    return value*2
                }).reduce(function (prev,cur){
                     return prev+cur
                },0)
                console.log(total)
1
2
3
4
5
6
7
8
9

通过箭头函数简化（lambda表达式）

实际上就是lambda表达式。

  let arr=[10,99,101,22,33]        
  let total= arr.filter(n=>n<100)
                .map(n=>n*2)
                .reduce((prev,cur)=>prev+cur)
  console.log(total)
1
2
3
4
5

计算书籍总价实例

下面的例子在实际开发中很常见。计算图书的总价，总价等于单价乘数量，再累加每种类型的书目。使用高阶函数就可以非常简单的实现。

 totalPrice(){
         return this.books.map(book => book.num*book.price).reduce((prev,cur)=>prev+cur)
      }
1
2
3