js高阶函数filter，map，reduce的用法

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body>

  <script>

    const nums = [100, 200, 40, 440, 60, 88]

    // 去除数组中所有小于100的数字

    // filter中的回调函数有一个需求：必须返回一个boolean值

    // 当返回true时，函数内部会自动将这次回调的n加入到新的数组中

    // 当返回false时，函数内部会过滤掉这次的n

    let newNums  = nums.filter(function(n){

      return n < 100

    })

    console.log(newNums)

    // 将所有小于100的数字*2

    // map

    let new2Nums = newNums.map(function(n){

      return n*2

    })

    console.log(new2Nums)

    // 将上个条件的数字全部相加

    // reduce,preValue参数表示return返回的值

    let total = new2Nums.reduce(function(preValue, n){

      return preValue + n

    },0)

    console.log(total)

    // 链式

    let total2 = nums.filter(function(n){

      return n < 100

    }).map(function(n){

      return n * 2

    }).reduce(function(preValue, n){

      return preValue + n

    }, 0)

    console.log(total2)

    // 使用箭头函数

    let total3 = nums.filter(n => n < 100).map(n => n * 2).reduce((pre,n) => pre + n)

    console.log(total3)

  </script>

</body>

</html>