JS的三大高阶函数详解JS的三大高阶函数详解编程范式：命令式编程/声明式编程编程范式：面向对象编程(第一公民：对象)

JS的三大高阶函数详解

编程范式：命令式编程/声明式编程
编程范式：面向对象编程(第一公民：对象)/函数式编程(第一公民：函数)
高阶函数：filter/map/reduce
高阶函数：函数本身需要的参数也可能是一个函数

filter

filter用来过滤数据，将符合条件的数据过滤出来
参数：callbackfn 一个回调函数，回调函数在它遍历数组获取到每一个元素的时候都会执行一次回调函数
filter中的回调函数有一个要求，该回调函数必须返回一个boolean值：
true：当返回true时，函数内部会自动将这次回调的n加入到一个新的数组中（新的数组由filter返回，我们只需要接收就行）
false：当返回false时，函数内部会自动过滤掉这次的n

map

map函数是映射的意思可以认为用来处理数据
参数：callbackfn 一个回调函数，回调函数在它遍历数组获取到每一个元素的时候都会执行一次回调函数
该回调函数会将返回的值加入到新的数组中，新的数组由map函数返回，我们只需要接收就可以了
map函数返回一个新的数组

reduce

reduce函数用来对数组中所有内容进行汇总
参数两个：
1.callbackfn 该回调函数需要两个参数
- 1.previousValue 上一次返回的值比如说第一次我return的是40 第二次的时候 previousValue就是40
- 2.n 每一次从数组中获取到的数据
2.initalValue 初始值初始值初始化的是previousValue 因为previousValue是上一次的return，当我们第一次调用的时候
没有return , 因此我们需要设置初始值，一般为0

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--举一个函数式编程的例子-->
<script>
  const nums = [10,20,111,222,444,40,50];
//  第一步取出来所有小于100的数字
//  按照我们平常的思维，先需要遍历数组，然后做出判断，再将结果保存在一个新的数组中打印出来
//   let newNums = [];
//   for (let n of nums){
//     if (n < 100){
//       newNums.push(n);
//     }
//   }
//   console.log(newNums);

//  第二步，将所有小于100的数字进行转化:全部*2
//  按照我们平常的思维,遍历数组,进行乘法运算,再保存在一个新的数组中打印出来
//   let new2Nums = [];
//   for (let n of newNums){
//     new2Nums.push(n * 2);
//   }
//
//   console.log(new2Nums);

//  第三步：将转换后的数字进行汇总并打印出来
//  按照我们的思维，应该先定义一个变量来存储结果，在通过遍历new2Nums 进行加法运算

  // let total = 0;
  // for (let n of new2Nums){
  //   total += n;
  // }
  // console.log(total);



//  高阶函数：filter/map/reduce
//  高阶函数：函数本身需要的参数也可能是一个函数

  // 第一步取出来所有小于100的数字
//  filter用来过滤数据，将符合条件的数据过滤出来
//  参数：callbackfn  一个回调函数，回调函数在它遍历数组获取到每一个元素的时候都会执行一次回调函数
//  比如这个数组一共有7个元素 那么它就会执行7次回调函数  它会把数组中的每一个数据遍历出来传递给回调函数，因此回调函数需要一个形参
//  来接收该值 如下 形参n 它的值就是nums数组中的元素值--[10,20,111,222,444,40,50]
  // 第一次进入回调函数 n就相当于是10 第二次 n就相当于20 第三次 n就相当于111
//  第四次 n就相当于222 第五次 n就相当于444 第6次 n就相当于 40 第7次 n就相当于50

  //filter中的回调函数有一个要求，该回调函数必须返回一个boolean值：
  //true：当返回true时，函数内部会自动将这次回调的n加入到一个新的数组中  （新的数组由filter返回，我们只需要接收就行）
  //false：当返回false时，函数内部会自动过滤掉这次的n
  // let newNums = nums.filter(function (n) {
  //   return n < 100;   //我们第一步获取小于100的数，因此return 为 n<100 n<100为true时，n就会被加入到一个新的数组
  // });
  // console.log(newNums);


//  map函数是映射的意思  可以认为用来处理数据
//  参数 ：callbackfn 一个回调函数，回调函数在它遍历数组获取到每一个元素的时候都会执行一次回调函数
//  该回调函数会将返回的值加入到新的数组中，新的数组由map函数返回，我们只需要接收就可以了
//  map函数返回一个新的数组

  //第二步，将所有小于100的数字进行转化:全部*2
  // let new2Nums = newNums.map(function (n) {
  //   return n * 2;
  // });
  // console.log(new2Nums);

//  reduce函数用来对数组中所有内容进行汇总
//  参数两个：
//  1.callbackfn  该回调函数需要两个参数
//      1.previousValue  上一次返回的值  比如说第一次我return的是40 第二次 的时候 previousValue就是40
//      2.n 每一次从数组中获取到的数据
//  2.initalValue 初始值 初始值初始化的是previousValue 因为previousValue是上一次的return，当我们第一次调用的时候
//  没有return , 因此我们需要设置初始值，一般为0

  // let total = new2Nums.reduce(function (previousValue, n) {
  //   return previousValue + n;
  // },0)

//  第一次 previousValue 0 n 20
//  第二次 previousValue 20 n 40
//  第三次 previousValue 60 n 80
//  第四次 previousValue 140 n 100
//  汇总为 140 + 100 = 240


//  上述是详细分析

//  接下来我们来利用函数编程的特色:链式编程
//  来体验更高级的写法
//   let total = nums.filter(function (n) {
//     return n < 100;
//   }).map(function (n) {
//     return n * 2;
//   }).reduce(function (previousValue,n) {
//     return previousValue + n;
//   },0);
//
//   console.log(total);

//  接下来通过箭头函数来更加高级的书写

  let total = nums.filter(n => n <100).map(n => n * 2).reduce((previousValue,n) => previousValue + n);
  //一行就可以完成，箭头函数  形参 => 结果
  console.log(total);
</script>

</body>
</html>