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 继续写,那么

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

posted @ 2021-07-08 21:20  咸瑜  阅读(190)  评论(0编辑  收藏  举报