高阶函数 (Higher-order function) - 图1

1.什么是高阶函数

  1. 可以把函数作为参数传递给另一个函数
  2. 可以把函数作为另一个函数的返回结果

    2.函数作为参数

    ```javascript // 函数作为参数 示例 // forEach 遍历 function forEach(arr, fn) { for (let i = 0; i < arr.length; i++) {
    1.  fn(arr[i]); // fn 则是作为参数的方法
    } } // 测试数组 let arr = [1, 2, 3, 4, 56, 8, 9, 71]; // forEach应用 // forEach(arr,function(value){ // console.log(value); // })

// filter 过滤数组 function filter(arr, fn) { let results = []; for (let i = 0; i < arr.length; i++) { if (fn(arr[i])) {// fn 则是作为参数的方法 results.push(arr[i]); } } return results; }

// filter 应用 let f = filter(arr, function (value) { return value % 2 === 0; }) console.log(f);

  2. <a name="zcbHr"></a>
  3. ## 3.函数作为返回值
  4. ```javascript
  5. // 返回函数
  6. function makeFn(){
  7.     let msg = 'Hello function'
  8.     return function(){ // 返回了一个函数
  9.         console.log(msg);
  10.     }
  11. }
  12. // 调用返回的那个函数
  13. // 第一种方式
  14. const fn = makeFn()
  15. fn();
  16. // 第二种方式
  17. makeFn()();
  19. // 模拟once（内部的函数只执行一次）
  20. function once(fn){
  21.     let done = false;
  22.     return function(){
  23.         if(!done){
  24.             done = true;
  25.             // apply 用于给方法传参 
  26.             // arguments 对应于传递给函数的参数的类数组对象
  27.             // arguments 当前是指获取传递给fn的参数
  28.             return fn.apply(this,arguments)
  29.         }
  30.     }
  31. }
  33. // 应用
  34. let pay = once(function(money){
  35.     console.log(`支付：${money} RMB`);
  36. })
  37. // 执行 这里可以看到 不管调用多少次 内部的方法只执行一次
  38. pay(5)
  39. pay(5)
  40. pay(5)
  41. pay(5)

4.意义

  1. 抽象可以帮我们屏蔽细节，只需要关注与我们的目标
  2. 高阶函数是用来抽象通用的问题
  3. 好处：
    1. 函数更灵活
    2. 使代码更简洁

      5.常用的高阶函数

      ```javascript // ————————-forEach 遍历————————- function forEach(arr, fn) { for (let i = 0; i < arr.length; i++) { fn(arr[i]); // fn 则是作为参数的方法 } }

// 测试数组 let arr = [1, 2, 3, 4, 56, 8, 9, 71]; //forEach应用 forEach(arr,function(value){ console.log(value); })

  1. ```javascript
  2. // -----------------filter 过滤数组-----------------
  3. function filter(arr, fn) {
  4.     let results = [];
  5.     for (let i = 0; i < arr.length; i++) {
  6.         if (fn(arr[i])) {// fn 则是作为参数的方法
  7.             results.push(arr[i]);
  8.         }
  9.     }
  10.     return results;
  11. }
  12. // 测试数组
  13. let arr = [1, 2, 3, 4, 56, 8, 9, 71];
  14. // filter 应用
  15. let f = filter(arr, function (value) {
  16.     return value % 2 === 0;
  17. })
  18. console.log(f);
  1. // -----------------map 根据规则统一修改数组内的值-----------------
  2. const map = (arr, fn) => {
  3.     let results = [];
  4.     for (let value of arr) {
  5.         results.push(fn(value));
  6.     }
  7.     return results;
  8. }
  10. // 测试
  11. let arr = [1, 2, 3, 4]
  12. arr = map(arr, v => v * v)
  13. console.log(arr);
  1. // -----------------every 数组是否全部满足条件-----------------
  2. const every = (arr, fn) => {
  3.     let result = true;
  4.     for (const value of arr) {
  5.         result = fn(value)
  6.         if (!result) {
  7.             break
  8.         }
  9.     }
  10.     return result;
  11. }
  12. // 测试
  13. let arr = [1,2,3,3]
  14. let e = every(arr,v => v <= 3)
  15. console.log(e);
  1. // -----------------some 数组中是否有满足条件的元素-----------------
  2. const some = (arr, fn) => {
  3.     let result = false;
  4.     for (const value of arr) {
  5.         result = fn(value)
  6.         if (result) {
  7.             break
  8.         }
  9.     }
  10.     return result;
  11. }
  12. // 测试
  13. let arr = [1,2,2,2]
  14. let e = some(arr,v => v >= 3)
  15. console.log(e);