当前位置:首页 > JavaScript

js实现九九

2026-04-05 18:45:11JavaScript

使用 JavaScript 实现九九乘法表

方法一:使用双重 for 循环

通过嵌套循环实现九九乘法表的生成,外层循环控制行数,内层循环控制列数。

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

方法二:使用数组和 map 方法

利用数组的 map 方法生成每一行的内容,再通过 join 方法拼接成字符串。

js实现九九

Array.from({ length: 9 }, (_, i) => i + 1).forEach(i => {
  const row = Array.from({ length: i }, (_, j) => j + 1)
    .map(j => `${j} x ${i} = ${i * j}`)
    .join('\t');
  console.log(row);
});

方法三:使用字符串模板

通过字符串模板动态生成每一行的内容,减少循环嵌套。

js实现九九

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

方法四:输出为 HTML 表格

将九九乘法表渲染为 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} x ${i} = ${i * j}</td>`);
  }
  document.write('</tr>');
}
document.write('</table>');

方法五:使用递归实现

通过递归函数生成每一行的内容,适合学习递归的使用。

function generateRow(i, j = 1, row = '') {
  if (j > i) return row;
  row += `${j} x ${i} = ${i * j}\t`;
  return generateRow(i, j + 1, row);
}

for (let i = 1; i <= 9; i++) {
  console.log(generateRow(i));
}

以上方法均能实现九九乘法表的生成,可以根据实际需求选择适合的方式。

标签: 九九js
分享给朋友:

相关文章

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js分组实现

js分组实现

分组实现方法 在JavaScript中,可以通过多种方式实现数组或对象的分组操作。以下是几种常见的方法: 使用Array.prototype.reduce() 通过reduce方法可以轻松实现数组分…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…

js 实现滚动

js 实现滚动

实现滚动的方法 使用 window.scrollTo() window.scrollTo() 方法可以滚动到文档中的特定位置。可以指定 x 和 y 坐标,或者使用平滑滚动的选项。 // 滚动到指定位…

js 实现跳转

js 实现跳转

使用 window.location.href 进行跳转 通过修改 window.location.href 可以跳转到指定 URL,浏览器会加载新页面: window.location.hre…