JS是一种重要的编程语言，在前端开发中发挥着重要的作用，它能够实现很多有趣的功能。在本篇文章中，我们将讨论如何用JS打印正三角形。正三角形拥有良好的美学效果，在网页设计中经常被使用。
一、基础方法
function printTriangle(height) {
let row = '';
for (let i = 1; i <= height; i++) {
row += '*';
console.log(row);
}
}
printTriangle(5);
这是最基本的打印正三角形的方法。该方法使用了一个for循环，以累加星号构成正三角形。
首先定义一个长度为0的字符串，该字符串用来存储星号。然后，使用for循环从1到height，每次将一个星号添加到row字符串中。每次循环后，调用console.log()方法打印出row字符串。
我们调用了printTriangle()函数，并将5作为参数传入，该函数将会打印一个有5行的正三角形：
* ** *** **** *****
二、增强方法
function printTriangleEnhanced(height) {
const TOTAL_WIDTH = height * 2 - 1;
let row = '';
for (let i = 1; i <= height; i++) {
row += '*';
const ROW_WIDTH = i * 2 - 1;
const PADDING = Math.floor((TOTAL_WIDTH - ROW_WIDTH) / 2);
console.log(' '.repeat(PADDING) + row + ' '.repeat(PADDING));
}
}
printTriangleEnhanced(5);
在增强版中，我们优化了代码，使其更灵活、更健壮，并打印了带有空格的三角形，让其更美观。
为了使得三角形居中，我们定义了一个名为TOTAL_WIDTH的常量来表示三角形的总宽度，即height×2-1。在for循环中，我们通过ROW_WIDTH变量计算出当前行的宽度，即i×2-1。我们再使用PADDING变量来补足每行前面的空格，确保三角形居中。
我们调用了printTriangleEnhanced()函数，并将5作为参数传入，该函数将会打印一个有5行的正三角形：
* *** ***** ******* *********
三、利用ES6特性
function printTriangleES6(height) {
const TOTAL_WIDTH = height * 2 - 1;
[...Array(height)].forEach((_, i) => {
const ROW_WIDTH = i * 2 + 1;
const PADDING = Math.floor((TOTAL_WIDTH - ROW_WIDTH) / 2);
console.log(' '.repeat(PADDING) + '*'.repeat(ROW_WIDTH) + ' '.repeat(PADDING));
});
}
printTriangleES6(5);
在ES6中，我们可以使用更加简洁的方式来实现同样的功能。
首先，我们使用[...Array(height)]方法创建一个长度为height的数组，并使用forEach()方法遍历数组并执行操作。在此过程中不需要定义一个变量，所以我们用一个下划线'_ '来占位。
接下来，我们通过ROW_WIDTH变量计算出当前行的宽度，使用repeat()方法构造星号行，再使用repeat()方法构造空格行，最后拼接这两个字符串并打印出来即可。
我们调用了printTriangleES6()函数，并将5作为参数传入，该函数将会打印一个有5行的正三角形：
* *** ***** ******* *********
四、使用递归
function printTriangleRecursive(height, currentRow = 1, row = '') {
if (currentRow > height) return;
row += '*';
console.log(row);
printTriangleRecursive(height, currentRow + 1, row);
}
printTriangleRecursive(5);
递归是另一种实现打印正三角形的方法，可以很好地展示JS的强大之处。
在递归方法中，我们定义了height、currentRow和row 3个参数，其中currentRow和row都是可选的。
每次调用printTriangleRecursive()方法时，都会将currentRow加1，并将row添加一个星号。如果currentRow还没有达到height，那么该函数就会继续调用自身，直到currentRow等于height为止。
我们调用了printTriangleRecursive()函数，并将5作为参数传入，该函数将会打印一个有5行的正三角形：
* ** *** **** *****
五、使用生成器
function* generateTriangle(height, row = '') {
while (height--) {
row += '*';
yield `${row}\n`;
}
}
for (let row of generateTriangle(5)) {
console.log(row);
}
JavaScript中的生成器使得打印正三角形变得非常简单。
在generateTriangle()函数中，我们定义了一个名为row的空字符串，以及height参数。在while循环中，每次执行都会将height减一，直到height为0为止。在循环中，我们再将row添加星号并使用yield关键字将构成好的字符串传出去。
在for循环中，我们使用generateTriangle()函数创建一个生成器。随着每次迭代，我们都会获得一个新的星号行字符串并打印它。
我们调用了generateTriangle()函数，并将5作为参数传入，该函数将会打印一个有5行的正三角形：
* ** *** **** *****
结语
在本文中，我们介绍了不同的方法来用JS打印正三角形。无论你是想使用最基本的知识，还是想挑战更高级的技术，都有相应的方法供你参考。这些方法都有自己独特的优点，相信你会在日常开发中受益匪浅。
