JS打印乘法口诀表

1.打印乘法口诀表

1.1 思路图解

1.1.1 乘法口诀表 整体思路分析

共 9 行 9 列（列数逐行递减）

乘法口诀表

1.1.2 实现思路

• 行的生成：想 怎么生成行？
• 列的生成：想 如何 在行中 生成 多少个列？
• 列内容的生成：想 每个列的 算式 如何生成？
• 所有的内容，都以字符串的方式 在 console.log()打印出来~~

1.2 代码实现

1.2.1 行的生成

目标：生成9行，每行1个星星

生成9行，每行1个星星

• 行数：乘法口诀表一共 9 行
• 内容：在每行内容的结尾处 添加一个 换行符\r ，以实现换行效果

小技巧：可以看成拼接在一起的 9 个 字符串，输出时，可以用一个变量str保存
​ 通过 console.log(str) 一次输出

1.2.2 列的生成

列的生成

• 分析：每一行的 列数 和 行数 成关联关系：行号 + 列数 = 10，那么每行要生成的列数可以算出。
• 列数计算方式：10 - 行号 = 当前行的 列数

1.2.3 列内容的生成(算式)

目标：将每个 星星 换成 对应的 乘法算式

• 列的循环

  
  
  列的循环

• 列里的算式
  如第2行第3列： 3 * 8 = 24 , 字符串拼接: 列号 + "*" + (10-行号) + "=" + (列数 * (10-行数))
  

  列里的算式

1.3小结

• 代码

var strKouJueBiao = '';
//1.使用一个 for 循环 来循环生成行
for(var row = 1; row <= 9; row++){
    //2. 打印 列
    for(var col = 1; col <= 10 - row; col ++ ){
        //3. 生成算式，最后 制表符 会让格式好看点
        strKouJueBiao += col + ' * ' + (10-row) + ' = ' + (10-row)*col + '\t';
    }
    //4.每行都要换行
    strKouJueBiao += '\n';
}
console.log(strKouJueBiao);

• 注意
  • 双重嵌套循环 通常用来生成表格类似结构
  • 外部循环与内部循环的条件可以相关联
  • 在字符串中，可以使用 \r 和 \t 分别实现 换行 和 退格