如何用reduce替代嵌套for循环实现JavaScript乘法表？

你当前用嵌套for循环的实现没问题，但确实有更简洁的函数式写法或者更优雅的实现方式，下面列举几种可行方案：

1. 用reduce结合map实现 #

利用Array.from生成10到20的数字范围，每一行通过map计算乘积，再用reduce拼接成最终的文本字符串：

const table = () => {
  const range = Array.from({ length: 11 }, (_, i) => i + 10); // 生成10-20的数组
  const tableText = range.reduce((acc, y) => {
    const row = range.map(x => `|${x * y}   `).join('') + '|\n';
    return acc + row;
  }, '');
  result.innerText = tableText;
};

这里Array.from用来创建包含10到20的数组，外层reduce负责累加每一行的文本，内层map计算当前行的所有乘积并格式化为带|的片段，最后拼接成完整的表格文本。

2. 纯map+join的极简写法 #

如果不需要显式用reduce，也可以直接用map生成每一行，再用join拼接所有行：

const table = () => {
  const range = Array.from({ length: 11 }, (_, i) => i + 10);
  const tableText = range.map(y => {
    return range.map(x => `|${x * y}   `).join('') + '|\n';
  }).join('');
  result.innerText = tableText;
};

这种写法更直观，每一行的逻辑独立，通过两次map分别处理行和列，最后用join把所有行连起来，代码量更少。

3. 生成HTML表格优化排版 #

你当前的文本表格可能存在对齐问题，换成HTML表格会让排版更整齐，同时写法也很简洁：

const table = () => {
  const range = Array.from({ length: 11 }, (_, i) => i + 10);
  const tableHtml = `
    <table border="1">
      ${range.map(y => `
        <tr>
          ${range.map(x => `<td>${x * y}</td>`).join('')}
        </tr>
      `).join('')}
    </table>
  `;
  result.innerHTML = tableHtml;
};

这种方式直接生成HTML表格结构，浏览器会自动处理单元格对齐，视觉效果更好，代码同样简洁清晰。

4. 用Generator函数（进阶玩法） #

如果想尝试更灵活的方式，可以用Generator生成所有乘积，再拼接成表格：

function* generateProducts(start, end) {
  for (let y = start; y <= end; y++) {
    for (let x = start; x <= end; x++) {
      yield [x, y, x * y];
    }
    yield 'row-end';
  }
}

const table = () => {
  let tableText = '';
  for (const item of generateProducts(10, 20)) {
    if (item === 'row-end') {
      tableText += '|\n';
    } else {
      tableText += `|${item[2]}   `;
    }
  }
  result.innerText = tableText;
};

Generator适合需要分步处理数据的场景，把乘积生成逻辑封装起来，主函数只负责拼接文本，逻辑分离更清晰。

内容的提问来源于stack exchange，提问作者Marius Fredriksen