12张流程图把程序员绕晕：JS循环的坑，3年经验也会踩

我见过最离谱的面试现场：一个5年经验的前端，在白板上画while循环流程图，把判断条件和执行顺序画反了。不是他不懂代码，是他从来没把「可视化」当回事。

这12张图来自一个被转发过4000次的教学帖。表面看是入门教程，实际藏着大多数开发者没意识到的思维陷阱——你会写循环，和你能把循环讲清楚，是两件事。

第1-4题：连数字都画不对的人，占七成

输出1 1 1 1 1，输出1 2 3 4 5，输出奇数列，输出3的倍数。这四道题的通过率在某编程社区统计中，从第一题到第四题断崖下跌：92%→67%→41%→28%。

问题出在箭头方向。很多人画流程图时，把「初始化→判断→执行→迭代」画成一个圈，但箭头从哪进、从哪出，稍微错一点，逻辑就全歪。第4题「3 6 9 12 15」最容易翻车——迭代步长是3，但判断条件该用「≤15」还是「<16」？画出来才知道自己是不是真懂。

第5-6题：「和」与「或」的死亡交叉

Multiples of 3 and 5（15的倍数）vs Multiples of 3 or 5（3或5的倍数）。这两张图的区别，对应代码里一个「&&」和一个「||」的区别，也是无数线上bug的来源。

我见过一个真实案例：某电商平台的优惠券逻辑，把「满100且会员」写成了「满100或会员」，损失六位数。流程图如果画对了，这种错误在纸面上就会被拦住。可视化不是给学生玩的，是给工程师查漏的。

第7-12题：从数学到工程的鸿沟

约数、约数个数、素数判断、数字反转、位数统计、数位求和。这六题把循环和数学运算捆在一起，考的不是语法，是「如何把人类语言翻译成机器步骤」。

素数判断那道题最典型。新手爱写「从2到n-1逐个试除」，但流程图里多画一个「√n优化」的分支，时间复杂度就从O(n)降到O(√n)。代码可以跑完再优化，流程图逼你在动手前就想清楚。

反转数字那题更有意思。有人用字符串切片，有人用数学运算（n%10取末位，n/10去末位），两种思路画出来的流程图完全不同。面试官要看的不是你的答案，是你的路径。

这12张图的原帖下面，最高赞评论是：「工作第三年才发现，我连for和while的区别都讲不明白。」你现在能不看代码，徒手画出第9题（素数判断）的完整流程吗？