如何为包含函数的JavaScript代码绘制符合规范的流程图

你可以按照「先拆分运行时序、再分层处理函数定义/调用、最后对应分支逻辑」的思路实现，具体如下：

• 首先提前修正原代码笔误：someMonth函数中return "February" + y的y为未定义变量，应为入参year。

第一步：梳理核心节点分层 #

流程图整体分为3个层级，避免函数逻辑混在一起过于混乱：

1. 全局初始化层：用「预定义过程」图形（两端带竖线的矩形）标注两个函数的定义：someYear(year)、someMonth(month, year)，不需要提前展开内部逻辑，只要标注函数名和入参即可。
2. 主流程入口层：用「开始」圆角矩形标注整个程序的启动节点，箭头指向主执行语句console.log(someMonth(2, 2007))，再引出箭头指向someMonth的调用节点，标注入参month=2、year=2007。
3. 函数内部逻辑层：单独给每个函数做内部流程分支，只有调用到对应函数的时候，才从调用点跳转进对应函数的逻辑，运行完返回结果到调用点继续后续流程。

第二步：处理函数调用的跳转逻辑 #

遇到函数调用的时候，不要直接把函数逻辑嵌在主流程里，按以下规则对应：

• 调用位置先标注「调用[函数名]，入参：[参数值]」，箭头指向对应函数的内部逻辑入口
• 函数内部运行结束后，标注「返回[返回值]到调用点」，箭头指回原来的调用位置，继续执行后续判断

第三步：对应分支判断逻辑 #

两个函数的内部流程按以下逻辑绘制：

someYear(year) 内部逻辑 #

• 入口：接收入参year
• 菱形判断框：year % 4 == 0 ？
  • 是：返回true
  • 否：返回false

someMonth(month, year) 内部逻辑 #

• 入口：接收入参month、year
• 第一个菱形判断框：month == 1 ？
  • 是：返回"January"，函数结束
  • 否：进入下一个判断
• 第二个菱形判断框：month == 3 ？
  • 是：返回"March"，函数结束
  • 否：进入下一个判断
• 第三个菱形判断框：month == 2 ？
  • 否：返回"The month is not in list"，函数结束
  • 是：跳转调用someYear(year)，获取返回值后进入下一个判断
• 第四个菱形判断框：someYear返回值为true ？
  • 是：返回"February" + year，函数结束
  • 否：返回"February"，函数结束

收尾逻辑 #

someMonth返回结果传递给console.log，执行打印操作后，整个程序运行结束，用「结束」圆角矩形标注即可。
如果需要简化流程图，高频调用的函数可以不展开内部逻辑，只保留调用、返回节点即可，主流程可读性会更高。

内容的提问来源于stack exchange，提问作者Satine Agababyan