JavaScript 常见 高阶函数的使用

其实就是函数来的 ，下面讲常见的几种高阶函数： 三个：

filter / map / reduce

1.Array filter() 方法

如果有数组： let arr = [60,50,105,99,153,125,29]; 如果要把小于100 的过滤出来，那么：

其实这个方法有过滤器的意思，所以就是过滤，他的参数是一个函数，函数的参数就是这个遍历值，其次这个函数一定得返回一个 Boolean 型，为true时 吧这个值返回装进一个新数组，为false则不加入新数组，到最后结束就 把 整个新数组当返回值返回：

  <script>
    let arr = [60,50,105,99,153,125,29];
    //先获取到大于100 的数
    arr = arr.filter(function (item){
        return item < 100;
    });
    
//打印
    for (const number of arr) {
        console.log(number);
    }
  </script>

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

2. Array map() 方法  

其实 map 也一样 不会更新数组 他返回的是一个新数组，其次，他对每个元素进行遍历，他返回的不是布尔型，返回什么都可以，你返回什么 我就往里面装什么：

  <script>
    let arr = [60,50,105,99,153,125,29];
    //直接遍历 然后每个元素*2 然后更新数组即可
    arr = arr.map(function (item){
        return item *= 2;
    });

//打印
    for (const number of arr) {
        console.log(number);
    }
  </script>

因为他有这个特性，所以他可以直接放入方法：

var numbers = [4, 9, 16, 25];

function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}

可以看出 Math.sqrt是个球平方根的函数，是的 他是一个函数！ 仔细想想即可。

3.reduce() 方法

其实这个有点绕 但是很简单：

比如我要吧数组里面的全部值求出来：

  <script>
    let arr = [60,50,105,99,153,125,29];
    //直接求出即可
    let total = arr.reduce(function (sum,n){
        return sum + n;
    },0)
    console.log(total);

    /***
     * 这里我解析一下：
     * reduce 这个函数 第一个参数是个方法，第二个参数是初始值
     * 然后第一个参数中的 第一个参数sum是初始值来的，这个方法每次遍历arr中的元素，放在参数n中
     * 这个方法的返回值呢就是赋给sum，所以sum就会一直随着遍历而增加n 所以求出来了arr中的总和
     * 
     * 当然你也可以尝试一下乘或者除， 但是呢 他一定是从左到右（下标0到下标leng-1）
     */

  </script>

其实吧  注释文档写的很清楚了，蛮简单的 就是内个 初始值 要注意一下 一般为0；sum类似于静态的，而n是每次遍历的元素值。

注意: reduce() 对于空数组是不会执行回调函数的。

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

看下面除了内几个还有些很好玩的参数：比如下标

参数

描述

function(total,currentValue, index,arr)

必需。用于执行每个数组元素的函数。
函数参数:

参数	描述
total	必需。初始值, 或者计算结束后的返回值。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。

initialValue

可选。传递给函数的初始值

总结：总结：

其实 你得举一反三：

1、2、3 我这里讲了三个高阶函数【常用的】 ，那么你就得去把他们结合起来：

他们返回的是一个数组对吧，那你可以用链式编程 在他们计算完后.xxxx 继续写，那么

你就可以把你要用到的代码很压缩成一点点了，这是一个思维。