JavaScript实现斐波那契右帕斯卡图案 代码问题排查与优化

预期效果 #

目标是基于斐波那契数列输出右帕斯卡三角形图案，预期输出如下：

0
0 1
0 1 1
0 1 1 2
0 1 1 2 3
0 1 1 2 3 5
0 1 1 2 3 5 8 
0 1 1 2 3 5
0 1 1 2 3
0 1 1 2
0 1 1
0 1
0

现有代码的问题 #

当前已实现基础三角形结构，但输出不符合预期，现有代码如下：

function fiboP(n) {
  let string = "";
  let n1 = 0
  let n2 = 1
  for (let i = 1; i <= n; i++) {
    for (let j = 0; j < i; j++) {
      string += n1 + " ";
      next_num = n1 + n2;
      n1 = n2;
      n2 = next_num;
    }
    string += "\n";
  }
  for (let i = 1; i <= n - 1; i++) {
    for (let j = 0; j < n - i; j++) {
      string += n1 + " ";
      next_num = n2 - n1;
      n2 = n1;
      n1 = next_num;
    }
    string += "\n";

  }
  console.log(string)
}

fiboP(5)

运行后错误输出为：

0 
1 1 
2 3 5 
8 13 21 34 
55 89 144 233 377 
610 377 233 144 
89 55 34 
21 13 
8

代码存在三个核心问题：

• 斐波那契递推状态是全局共享的，每输出一个数字就更新递推值，导致下一行不会从0开始输出序列，而是顺着上一行末尾的数值继续往后计算，数字会持续增大，完全偏离每行从0起始的要求
• 下半部分倒序逻辑虽然用减法回溯斐波那契数的思路可行，但因为上半部分结束时递推变量已经是数值极大的项，回溯结果自然不符合预期
• 参数和输出规模不匹配：预期最长行有7个数字（到8），但传参为5时最长行仅输出5个数字，参数对应关系错误

优化实现方案 #

不要用全局递推变量跨状态传递，提前生成需要长度的斐波那契数组，逐行截取对应长度的片段拼接即可，逻辑直观几乎不会出错：

function fiboP(maxLineLength) {
  // 预先生成最长行需要的斐波那契序列
  const fibSeq = [0, 1]
  for (let i = 2; i < maxLineLength; i++) {
    fibSeq.push(fibSeq[i-1] + fibSeq[i-2])
  }
  const lines = []
  // 拼接上半部分：行长度从1递增到最大长度
  for (let i = 1; i <= maxLineLength; i++) {
    lines.push(fibSeq.slice(0, i).join(' '))
  }
  // 拼接下半部分：行长度从最大长度-1递减到1
  for (let i = maxLineLength - 1; i >= 1; i--) {
    lines.push(fibSeq.slice(0, i).join(' '))
  }
  console.log(lines.join('\n'))
}

// 传入最长行的长度7，即可得到预期输出
fiboP(7)

运行上述代码即可得到和目标完全一致的输出，代码逻辑没有跨循环的状态依赖，可读性和调试成本都远低于边输出边递推的实现。

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