JS中的高阶函数filter、map、reduce使用

1、filter( )函数

用于过滤
先看个实例

 <script>
    const nums = [10, 20, 110, 50, 223, 222, 20];
    let newNums = nums.filter(function (n) {
      return n < 100
    })
    console.log(newNums); // [10, 20, 50, 20]

  </script>

filter中的回调函数有一个要求：必须返回一个布尔值。
当返回true时，函数内部会自动将这次的回调的n加入到一个新数组中；
当返回false时，函数内部会自动过滤掉这次的n。

2、map( )函数

对数组进行加工，如数组中所有元素都乘以2
先上代码

 <script>
    const nums = [10, 20, 110, 50, 223, 222, 20];
    let newNums = nums.filter(function (n) {
      return n < 100
    })
    console.log(newNums); //[10, 20, 50, 20]

    let newNums2 = newNums.map(function (n) {
      return n * 2
    })
    console.log(newNums2);//[20, 40, 100, 40]


  </script>

上述代码是使用map（）函数，将数组【10，20，50，20】进行乘以2来处理得到一个新数组【20, 40, 100, 40】

reduce( ) 函数

用于对数组进行汇总。如求和

 <script>
    const nums = [10, 20, 110, 50, 223, 222, 20];
    //filter函数的使用
    let newNums = nums.filter(function (n) {
      return n < 100
    })
    console.log(newNums); //[10, 20, 50, 20]
	//map函数的使用
    let newNums2 = newNums.map(function (n) {
      return n * 2
    })
    console.log(newNums2);//[20, 40, 100, 40]
	//reduce函数的使用
    let newNums3 = newNums2.reduce(function (pre, n) {
      return pre + n
    }, 0)
    console.log(newNums3); //200
  </script>

上面代码可以简写为

const nums = [10, 20, 110, 50, 223, 222, 20];
let newNum4 = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n)
    console.log(newNum4); //200