javascript如何实现99乘法表

# JavaScript如何实现99乘法表

99乘法表是编程初学者常见的练习题目，它不仅能够帮助我们理解循环嵌套的概念，还能熟悉JavaScript的基础语法。本文将详细介绍如何使用JavaScript实现99乘法表，并提供多种实现方式及优化思路。

## 一、基础实现：双重for循环

最经典的方式是使用双重`for`循环，外层循环控制行数，内层循环控制每行的列数。

```javascript
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);
}

输出效果：

1 × 1 = 1	
1 × 2 = 2	2 × 2 = 4	
1 × 3 = 3	2 × 3 = 6	3 × 3 = 9	
...

代码解析

1. 外层循环变量i表示行号（1~9）
2. 内层循环变量j表示当前行的列号（1~i）
3. \t用于对齐输出格式

二、DOM动态渲染

将结果输出到网页而非控制台，更贴近实际开发场景。

<div id="multiplication-table"></div>

<script>
  const table = document.getElementById('multiplication-table');
  for (let i = 1; i <= 9; i++) {
    const rowDiv = document.createElement('div');
    for (let j = 1; j <= i; j++) {
      const span = document.createElement('span');
      span.textContent = `${j}×${i}=${i*j}`;
      span.style.margin = '0 10px';
      rowDiv.appendChild(span);
    }
    table.appendChild(rowDiv);
  }
</script>

三、函数式编程实现

使用Array.from()和reduce()实现函数式编程风格：

function createTable(size = 9) {
  return Array.from({length: size}, (_, i) => 
    Array.from({length: i + 1}, (_, j) => 
      `${j + 1}×${i + 1}=${(i + 1) * (j + 1)}`
    ).join(' ')
  ).join('\n');
}

console.log(createTable());

四、优化输出格式

1. 对齐输出

使用padEnd()方法保持对齐：

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

2. HTML表格形式

document.write('<table border="1">');
for (let i = 1; i <= 9; i++) {
  document.write('<tr>');
  for (let j = 1; j <= i; j++) {
    document.write(`<td>${j}×${i}=${i*j}</td>`);
  }
  document.write('</tr>');
}
document.write('</table>');

五、扩展实现

1. 倒序输出

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

2. 自定义范围

function multiplicationTable(min, max) {
  for (let i = min; i <= max; i++) {
    let row = '';
    for (let j = min; j <= i; j++) {
      row += `${j}×${i}=${i*j} `;
    }
    console.log(row);
  }
}
multiplicationTable(5, 8);  // 输出5~8的乘法表

六、性能对比

通过console.time()测试不同实现的性能：

注：测试环境Chrome 115，100次平均值

七、实际应用场景

1. 数学教育网站：可视化展示乘法关系
2. 编程教学工具：演示循环嵌套原理
3. 算法练习：理解时间复杂度（本例为O(n²)）

八、常见问题

Q1：为什么我的乘法表没有对齐？

A：因为不同位数的乘积占位不同，建议： - 使用\t制表符 - 或padEnd()方法统一长度

Q2：如何实现竖排展示？

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

结语

通过实现99乘法表，我们掌握了： 1. 循环嵌套的逻辑控制 2. 字符串拼接与格式化 3. 从控制台到DOM的多种输出方式

建议尝试更多变体，如彩色输出、交互式乘法表等，以加深对JavaScript的理解。 “`

这篇文章共计约1200字，包含了基础实现、DOM操作、函数式编程、格式优化、扩展实现等多个方面的内容，采用Markdown格式并包含代码块、表格等元素，适合技术博客发布。