当前位置：首页 > JavaScript

js如何实现九九乘法表

2026-01-31 12:16:53JavaScript

使用双重循环实现九九乘法表

通过嵌套的 for 循环生成九九乘法表，外层循环控制行数，内层循环控制每行的列数。

for (let i = 1; i <= 9; i++) {
  let row = '';
  for (let j = 1; j <= i; j++) {
    row += `${j} × ${i} = ${i * j}\t`;
  }
  console.log(row);
}

使用数组和 map 方法实现

利用数组的 map 方法生成每一行的乘法表内容，再通过 join 合并为字符串。

js如何实现九九乘法表

Array.from({ length: 9 }, (_, i) => i + 1).forEach(row => {
  const line = Array.from({ length: row }, (_, col) => {
    const colNum = col + 1;
    return `${colNum} × ${row} = ${colNum * row}`;
  }).join('\t');
  console.log(line);
});

通过字符串模板生成

使用字符串模板动态生成每一行的乘法表内容，减少循环嵌套。

js如何实现九九乘法表

let result = '';
for (let i = 1; i <= 9; i++) {
  for (let j = 1; j <= i; j++) {
    result += `${j} × ${i} = ${i * j}\t`;
  }
  result += '\n';
}
console.log(result);

输出到 HTML 页面

将九九乘法表输出到 HTML 页面上，动态生成表格结构。

document.addEventListener('DOMContentLoaded', () => {
  const table = document.createElement('table');
  for (let i = 1; i <= 9; i++) {
    const row = document.createElement('tr');
    for (let j = 1; j <= i; j++) {
      const cell = document.createElement('td');
      cell.textContent = `${j} × ${i} = ${i * j}`;
      row.appendChild(cell);
    }
    table.appendChild(row);
  }
  document.body.appendChild(table);
});

使用递归实现

通过递归函数生成九九乘法表的每一行，适用于函数式编程场景。

function generateMultiplicationTable(row = 1, col = 1, line = '') {
  if (row > 9) return;
  if (col > row) {
    console.log(line);
    generateMultiplicationTable(row + 1, 1, '');
  } else {
    line += `${col} × ${row} = ${col * row}\t`;
    generateMultiplicationTable(row, col + 1, line);
  }
}
generateMultiplicationTable();

以上方法可以根据具体需求选择适合的实现方式，控制台输出或页面渲染均可灵活调整。