循环与递归：重复次数差异及判断条件数值不同的技术问询

这俩函数看起来判断条件数值不一样，实则是因为循环和递归的执行逻辑顺序、条件作用对象完全不同，通过调整数值刚好让两者绘制的矩形列表完全匹配。我给你拆解清楚：

1. 核心逻辑差异：条件什么时候生效？ #

循环函数：先判断，再干活 #

function branchBoxForLoop(size) {
  c.strokeStyle = "blue";
  for (var i = size; i > 4; i = i * 0.65) {
    c.translate(i, i);
    c.strokeRect(-i, -i, i, i);
  }
}

循环的i > 4是前置判断：只有当当前i大于4时，才会执行绘制逻辑；如果i<=4，直接跳过，不会画这个尺寸的矩形。

递归函数：先干活，再判断要不要继续 #

function branchBox(size) {
  c.translate(size, size);
  c.strokeRect(-size, -size, size, size);
  if (size > 5) {
    branchBox(size * 0.65);
  }
}

递归的size > 5是后置判断：先把当前size的矩形画出来，再判断当前size是否大于5——如果是，才会递归调用画下一个更小的尺寸（当前size*0.65）；如果当前size<=5，画完就停止，不会继续递归。

2. 数值匹配的底层逻辑 #

要让两者输出一致，得保证循环绘制的所有尺寸，和递归绘制的所有尺寸完全重合。我们拿初始size=10举个实际例子：

• 循环执行流程：
  1. i=10>4 → 绘制10，i=10*0.65=6.5
  2. i=6.5>4 → 绘制6.5，i=6.5*0.65=4.225
  3. i=4.225>4 → 绘制4.225，i=4.225*0.65≈2.746
  4. i≈2.746>4？不满足，循环结束。最终画了10、6.5、4.225三个矩形。
• 递归执行流程：
  1. 画10，10>5 → 递归调用branchBox(6.5)
  2. 画6.5，6.5>5 → 递归调用branchBox(4.225)
  3. 画4.225，4.225>5？不满足，停止递归。最终也画了10、6.5、4.225三个矩形。

这里的关键是：递归里触发下一次调用的条件是size>5，生成的下一个尺寸size*0.65刚好大于4（满足循环的绘制条件），同时这个新尺寸本身<=5（所以递归画完它就停止，不会生成更小的、循环不会处理的尺寸）。

简单说：

• 循环的i>4管的是「这个尺寸要不要画」
• 递归的size>5管的是「要不要生成下一个尺寸来画」
  通过4和5这两个数值的配合，刚好让递归生成的所有待画尺寸，都是循环愿意画的尺寸，最终输出自然一致。

内容的提问来源于stack exchange，提问作者Yaroslav Averin