JavaScript函数作为参数传递代码执行过程分步解析（新手向）

嘿，作为编程新手，第一次碰到这种“函数传函数”的写法确实会懵——别担心，咱们拆成一小段一小段来看，保证你能懂！

• 第一步：定义存储年份的数组
  第一行代码 var years = [1990, 1965, 1937, 2005, 1998]; 就是创建了一个普通数组，里面存了5个出生年份，没啥复杂的。

• 第二步：理解核心高阶函数 arrayCalc
  这是整个代码的关键，它是一个高阶函数（说白了就是能把另一个函数当参数用的函数）：

  • 它接收两个参数：arr（要处理的数组）和fn（一个用来处理数组元素的函数）
  • 函数内部先创建了一个空数组arrRes，用来存处理后的结果
  • 然后用for循环遍历传入的arr数组，每遍历到一个元素，就调用fn(arr[i])——这里的fn就是后面传进来的具体处理函数，把它的执行结果塞进arrRes里
  • 最后把装满结果的arrRes返回出去

• 第三步：定义具体的处理函数 calculateAge
  这个函数就很直白了：它接收一个参数el（也就是从数组里拿出来的年份），返回2018 - el——说白了就是用2018年减去出生年份，算出这个人的年龄。

• 第四步：调用高阶函数，生成年龄数组
  代码 var ages = arrayCalc(years, calculateAge); 做了这几件事：

  1. 把years数组传给arrayCalc的arr参数
  2. 把calculateAge函数传给arrayCalc的fn参数（注意这里传的是函数本身，不是调用它，所以没有加括号()）
  3. 接下来arrayCalc开始工作：
     • 遍历years里的第一个元素1990，调用calculateAge(1990)得到28，塞进arrRes
     • 第二个元素1965，调用calculateAge(1965)得到53，塞进arrRes
     • 以此类推，直到所有元素处理完，arrRes就变成了[28, 53, 81, 13, 20]
  4. 最后把这个结果数组赋值给ages变量

• 第五步：打印结果
  最后一行console.log(ages);就是把计算好的年龄数组打印到控制台，你会看到输出[28, 53, 81, 13, 20]

额外小总结 #

这种写法的好处是逻辑分离：arrayCalc只负责“遍历数组并收集结果”，具体每个元素要做什么操作（比如算年龄、算退休年份），交给单独的函数去处理。以后如果要改处理逻辑，只需要写个新函数传给arrayCalc就行，不用动遍历的代码，复用性超强！

内容的提问来源于stack exchange，提问作者George Politis