使用递归在JavaScript中打印左下侧星号三角形图案的问题

问题说明 #

尝试用JavaScript递归打印左下侧星号三角形，现有代码输出不符合预期。

目标图案 #

* * * * *
* * * *
* * *
* *
*

现有代码 #

var triangle = function (row, col) {
    if(row == 0){
        return
    }
    if(col < row){
        console.log("*")
        triangle(row, col + 1)
    }else{
        console.log("\n")
        triangle(row - 1, 0)
    }
}
triangle(4, 0)

当前输出 #

*
*
*
*


*
*
*


*
*


*

问题根源 #

1. 每次调用console.log("*")会强制换行，导致每个星号单独占一行，无法在同一行拼接多个星号
2. 初始调用triangle(4, 0)仅生成4行，而目标是5行，参数不匹配

修正方案 #

方案一：递归拼接每行字符串 #

通过递归拼接当前行的星号内容，完成一行后再打印，同时调整初始行数参数：

var triangle = function (row, col, currentLine) {
    if (row === 0) {
        return;
    }
    currentLine = currentLine || "";
    // 拼接星号，最后一个星号后不加空格
    currentLine += col < row - 1 ? "* " : "*";
    if (col < row - 1) {
        triangle(row, col + 1, currentLine);
    } else {
        console.log(currentLine);
        triangle(row - 1, 0);
    }
}
triangle(5, 0);

方案二：简洁递归写法 #

利用字符串重复方法快速构造每行内容：

function printTriangle(n) {
    if (n === 0) return;
    console.log("* ".repeat(n).trim());
    printTriangle(n - 1);
}
printTriangle(5);

验证结果 #

两种方案运行后均会输出符合预期的三角形：

* * * * *
* * * *
* * *
* *
*

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