JS基础【双重for循环的实现与应用、打印九九乘法表】

本文主要是介绍JS基础【双重for循环的实现与应用、打印九九乘法表】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主、华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作者：码喽的自我修养🥰
📝 专栏：JavaScript基础 🎉

🌈 创作不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕

循环嵌套

利用循环的知识来对比一个简单的天文知识，我们知道地球在自转的同时也在围绕太阳公转，如果把自转和公转都看成是循环的话，就相当于是循环中又嵌套了另一个循环。

实际上 JavaScript 中任何一种循环语句都支持循环的嵌套，如下代码所示：

举例：假如每天记住5个单词，3天后一共能记住多少单词？

拆解：

第一天： 5个单词
第二天： 5个单词
第三天： 5个单词

实现代码

// 1. 外面的循环 记录第n天 
for (let i = 1; i < 4; i++) {document.write(`第${i}天 <br>`)// 2. 里层的循环记录 几个单词for (let j = 1; j < 6; j++) {document.write(`记住第${j}个单词<br>`)}
}

实现效果

记住，外层循环循环一次，里层循环循环全部

应用（一）👉 倒三角

 // 外层打印几行
for (let i = 1; i <= 5; i++) {// 里层打印几个星星for (let j = 1; j <= i; j++) {document.write('★')}document.write('<br>')
}

实现效果

应用（二）👉九九乘法表

样式css

span {display: inline-block;width: 100px;padding: 5px 10px;border: 1px solid pink;margin: 2px;border-radius: 5px;box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);background-color: rgba(255, 192, 203, .1);text-align: center;color: hotpink;
}

Javascript代码

 // 外层打印几行
for (let i = 1; i <= 9; i++) {// 里层打印几个星星for (let j = 1; j <= i; j++) {// 只需要吧 ★ 换成  1 x 1 = 1   document.write(`<div> ${j} x ${i} = ${j * i} </div>`)}document.write('<br>')
}

实现效果