如何在JS循环中使用padStart输出一个三角形的x ?

Question

我应该创建一个三角形的X，如链接中所示，使用padString图像的20行X从一个X开始，每增加一个X

他们给的提示是我应该使用像…

let str = "";
str = str.padStart(i,”x”); // i is the loop counter

到目前为止我得到的是…

let xShape = "x";
for (let counter = 0; counter <= 20; counter = counter + 1) {
xShape = xShape + "x"
}
document.getElementById("demo").innerHTML =
xShape.padStart(xShape, "x");

<p id="demo"></p>

但这并不写出20 X线从第一行只有一个X每个新系列都有一个额外的X只写最后一行20 X。我如何让它写出全部20行?我是初学者，我这样做是为了学习。谢谢你的帮助。

Answer 1

padStart接受传递给它的字符串，并在第一个参数的开头填充与第二个参数相同的次数。

所以你可以把它添加到循环中然后传递给它一个空字符串这样它的起始点就总是空的

let xShape = "";
for (let counter = 0; counter <= 20; counter++) {
xShape += "".padStart(counter, "x") + "<br>";
}
document.getElementById("demo").innerHTML = xShape;

<div id="demo"></div>

Answer 2

必须以某种方式在循环中收集输出行。但是您对padStart的使用也是错误的:第一个参数不应该是字符串，而应该是数字。它实际上应该是你的循环计数器。

let lines = [];
for (let counter = 1; counter <= 20; counter = counter + 1) {
lines.push("".padStart(counter, "x"));
}
document.getElementById("demo").innerHTML = lines.join("<br>");

<p id="demo"></p>

注意，repeat方法在这里更自然:

let lines = [];
for (let counter = 1; counter <= 20; counter = counter + 1) {
lines.push("x".repeat(counter));
}
document.getElementById("demo").innerHTML = lines.join("<br>");

<p id="demo"></p>

在更实用的方法中:

document.getElementById("demo").innerHTML = 
Array.from({length:20}, (_, counter) => "x".repeat(counter+1))
.join("<br>");

<p id="demo"></p>