当前位置：首页 > JavaScript

在js中实现三角形语句

2026-04-05 04:29:29JavaScript

使用 `for` 循环打印三角形

通过嵌套循环控制行数和每行的星号数量，以下是一个打印直角三角形的示例：

function printTriangle(rows) {
  for (let i = 1; i <= rows; i++) {
    let line = '';
    for (let j = 1; j <= i; j++) {
      line += '* ';
    }
    console.log(line);
  }
}
printTriangle(5); // 打印5行直角三角形

使用 `repeat()` 方法简化

利用字符串的 repeat() 方法减少嵌套循环，适合打印等边三角形：

在js中实现三角形语句

function printEquilateralTriangle(rows) {
  for (let i = 1; i <= rows; i++) {
    const spaces = ' '.repeat(rows - i);
    const stars = '*'.repeat(2 * i - 1);
    console.log(spaces + stars + spaces);
  }
}
printEquilateralTriangle(5); // 打印5行等边三角形

使用递归实现三角形

递归方式控制每行的输出，适用于动态行数需求：

在js中实现三角形语句

function recursiveTriangle(row, current = 1) {
  if (current > row) return;
  console.log('* '.repeat(current));
  recursiveTriangle(row, current + 1);
}
recursiveTriangle(5); // 递归打印5行

倒置三角形的实现

调整循环条件或字符串生成逻辑，实现倒三角形：

function printInvertedTriangle(rows) {
  for (let i = rows; i >= 1; i--) {
    console.log('* '.repeat(i));
  }
}
printInvertedTriangle(5); // 打印5行倒直角三角形

通过DOM渲染三角形

将三角形输出到HTML页面，适合前端动态展示：

function renderTriangle(rows, elementId) {
  const element = document.getElementById(elementId);
  let html = '';
  for (let i = 1; i <= rows; i++) {
    html += '<div>' + '* '.repeat(i) + '</div>';
  }
  element.innerHTML = html;
}
// 调用时传入目标DOM元素的ID
renderTriangle(5, 'triangle-container');

以上方法覆盖了控制台输出、递归、DOM操作等多种场景，可根据实际需求选择。