由来: MDN First-class Function

    1. 函数存储在变量中
    2. 函数可以作为参数
    3. 函数作为返回值

    在JavaScript中函数是一个对象的表现形式, 可以通过 new Function() 实例化对象, 将函数存储在变量或者数组中,也可以作为一个函数的参数传递, 也可以作为函数返回值来执行

    1. //把函数赋值给变量
    2. let fn = function(){
    3.     console.log('123')
    4. }
    5. fn()
    7. //示例
    8. const obj = {
    9.     index: fn
    10. }

    函数作为参数

    1. /**
    2.  * @desc 函数作为参数
    3.  */
    4. function forEach(arr, fn) {
    5.   for (let i = 0; i < arr.length; i++) {
    6.     fn(arr[i]);
    7.   }
    8. }
    10. // 测试
    11. // let arr = [1,2,3,4,5,6,7,8,9]
    12. // forEach(arr, (val)=>{
    13. //     console.log(val)
    14. // })
    16. /**
    17.  * @desc 函数作为参数
    18.  */
    19. // function filter(arr, fn) {
    20. //   let result = [];
    21. //   for (let i = 0; i < arr.length; i++) {
    22. //     if (fn(arr[i])) {
    23. //       result.push(arr[i]);
    24. //     }
    25. //   }
    26. //   return result;
    27. // }
    29. // const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    31. // const res = filter(arr, (val) => {
    32. //   return val % 2 === 0;
    33. // });
    34. // console.log(res)
    36. function map(arr, fn){
    37.     let result = [];
    38.     for (let i = 0; i < arr.length; i++){
    39.         if(fn(arr[i])){
    40.             result.push(arr[i])
    41.         }
    42.     }
    43.     return result;
    44. }
    46. const arr = [1, 2, 3, 4, 5, 6,]
    47. const res = map(arr, (val) =>{
    49.     if(val > 3){
    50.         return val > 3 ? true : false
    51.     }
    52. })
    53. console.log(res)

    函数作为返回值

    1. /**
    2.  * 函数作为返回值
    3.  */
    4. function makeFn() {
    5.   const msg = "hello";
    6.   return () => {
    7.     console.log(msg);
    8.   };
    9. }
    10. // makeFn()()
    12. /**
    13.  * @desc 函数只执行一次
    14.  */
    15. function once(fn) {
    16.   let flag = false;
    17.   return function () {
    18.     if (!flag) {
    19.       flag = true;
    20.       return fn.apply(this, arguments);
    21.     }
    22.   };
    23. }
    24. const pay = once((res) =>{
    25.     console.log('res', res);
    26. })
    27. pay(10)
    28. pay(10)
    29. pay(10)
    30. pay(10)