用JS打印正三角形

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打印正三角形。无论你是想使用最基本的知识，还是想挑战更高级的技术，都有相应的方法供你参考。这些方法都有自己独特的优点，相信你会在日常开发中受益匪浅。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/245521.html