JavaScript课程——Day03（流程控制、顺序结构、分支语句、循环）
1、流程控制
所谓流程控制就是指程序怎么执行或者说程序执行的顺序。
- 顺序结构
- 条件选择结构（分支语句）：包括if-else以及switch
- 循环结构：包括 for 循环，while，do-while，for-in等
- 其他语句：break和continue
2、顺序结构
顺序结构的程序设计是最简单的，只要按照解决问题的顺序写出相应的语句即可，它的执行顺序是自上而下，依次执行的
3、分支语句
3.1、if
if (条件1) { 条件1为真执行 }
if (条件) { 如果条件为真，执行 } else { 如果条件为假，执行 }
if (条件1) { 条件1为真执行 } else if (条件2) { 条件2为真执行 } else if (条件3) { 条件3为真执行 } else { 以上条件都不为真执行 }
console.log(new Date().getDay()); // 0--6，代表周日--周六 var week = new Date().getDay(); if (week === 0) { console.log('今天周日'); } else if (week === 1) { console.log('今天周一'); } else if (week === 2) { console.log('今天周二'); } else if (week === 3) { console.log('今天周三'); } else if (week === 4) { console.log('今天周四'); } else if (week === 5) { console.log('今天周五'); } else if (week === 6) { console.log('今天周六'); }
var txt = document.getElementsByTagName('input')[0]; var btn = document.getElementsByTagName('button')[0]; btn.onclick = function () { var val = txt.value; // 取得分数 if (val < 0 || val > 100) { // 排除不合法的 alert('哥们，请输入正确的分数') } else { // 合法，等级划分 if (val < 60) { alert('哥们，不太行啊'); } else if (val >= 60 && val < 70) { alert('小老弟，及格了'); } else if (val >= 70 && val < 80) { alert('一般'); } else if (val >= 80 && val < 90) { alert('良好'); } else if (val >= 90 && val < 100) { alert('优秀'); } else { alert('满分'); } } }
3.2、switch
switch一般用于假设的个数有限，并且是同等级的关系，相对于if来说，结构更清晰。
switch (变量) { case 表达式1: 变量 全等于 表达式1 执行这里; break; case 表达式2: 变量 全等于 表达式2 执行这里; break; case 表达式3: 变量 全等于 表达式3 执行这里; break; ...... default: 以上都不成立，执行这里; }
var week = new Date().getDay(); // 0--6 switch (week) { case 0: console.log('星期日'); break; case 1: console.log('星期一'); break; case 2: console.log('星期二'); break; case 3: console.log('星期三'); break; case 4: console.log('星期四'); break; case 5: console.log('星期五'); break; case 6: console.log('星期六'); break; default: console.log('日期错误'); }
3.3、if和switch的区别
- 一般情况下，这两个语句是可以相互替换的
- switch语句通常处理case为比较确定值的情况，而if…else…if语句更加灵活，常用于范围判断（大于、等于某个范围）
- switch语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else语句有几种条件，就得判断多少次。因此当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。
4、循环
作用：让一段特定的代码执行指定的次数
4.1、for
for (1初始循环变量; 2判断条件(如果条件为真循环，否则停止循环); 4更新循环变量) { 3执行代码 }
// 打印1--3 // console.log(1); // console.log(2); // console.log(3); for (var i = 1; i <= 3; i++) { console.log(i); } // 第一轮 1234： 1、var i = 1; 2、1<=3; 3、console.log(1); 4、i++ // 第二轮 234： 2、2<=3; 3、console.log(2); 4、i++ // 第三轮 234： 2、3<=3; 3、console.log(3); 4、i++ // 第四轮 2： 2、4<=3;
// 打印1--100 // for (var i = 1; i <= 100; i++) { // console.log(i); // } // 打印100--1 // for (var i = 100; i >= 1; i--) { // console.log(i); // } // -------------------------- // 求1--100所有数的和 // 1+2+3+4+...+100=5050 // var num = 0; // 仓库 // for (var i = 1; i <= 100; i++) { // num += i; // } // console.log(num); // -------------------- // 求1--100所有奇数的和 // var num = 0; // for (var i = 1; i <= 100; i++) { // if (i % 2 === 1) { // num += i; // } // } // console.log(num); var num = 0; for (var i = 1; i <= 100; i += 2) { num += i; } console.log(num);
4.1.1、循环操作标签案例
<ul> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> <li>张新昊</li> <li>老王</li> </ul> <script> // 给每个li添加点击事件 var li = document.getElementsByTagName('li'); console.log(li); // li[0].onclick = function () { // console.log(1); // } // li[1].onclick = function () { // console.log(1); // } // li[2].onclick = function () { // console.log(1); // } for (var i = 0; i < li.length; i++) { // 添加背景 li[i].style.backgroundColor = 'pink'; // 添加事件 li[i].onclick = function () { console.log('点了我'); } } </script>
4.1.2、循环创建标签
// 循环创建100个p // 并隔行变色 window.onload = function () { var body = document.getElementsByTagName('body')[0]; for (var i = 1; i <= 100; i++) { if (i % 2 === 1) { // 奇数行 body.innerHTML += '<p style="background: red;">我是第' + i + '个p标签</p>'; } else { // 偶数行 body.innerHTML += '<p style="background: yellow;">我是第' + i + '个p标签</p>'; } } }
4.1.3、循环套循环——乘法口诀表
// 外层循环管轮数，里面的循环管每一轮的打印 // for (var i = 1; i <= 3; i++) { // for (var j = 1; j <= 5; j++) { // console.log(j); // } // } // 乘法口决表 window.onload = function () { var body = document.body; for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { body.innerHTML += j + '*' + i + '=' + i * j + ' '; } body.innerHTML += '<br>'; } }
4.2、while
1初始循环变量 while (2条件) { 3执行代码 4更新循环变量 }
// 打印1--10 var i = 1; while (i <= 10) { console.log(i); i++; }
for和while的区别：
两者在功能上是可以互换的。for适合能明确循环次数的循环，while适合只有条件判断的循环。
// 小王有100块钱，每天用一半，当用到1块钱时停止，可以用几天 var money = 100; // 多少钱 var count = 0; // 天数 while (money > 1) { money = money / 2; count++; console.log('今天第' + count + '天，还有' + money + '钱'); }
4.3、do-while
特点：不论条件是否满足，至少都能执行一次
1初始循环变量 do { 2执行代码 3更新循环变量 } while (4条件)
// ---------------------------- // 1--10 // var i = 1; // do { // console.log(i); // i++; // } while (i <= 10); var i = 100; do { console.log(i); i++; } while (i <= 10);
4.4、break和continue
- break与continue都是在循环中，终止循环的操作
- break是结束循环，后面的循环都不再执行
- continue是结束本次循环，即本次循环中continue以后代码都不再执行，直接执行下一次循环
for (var i = 1; i <= 10; i++) { if (i === 5) { // break; // 结束循环，后面的循环都不再执行。 continue; // 是结束本次循环，即本次循环中 continue 以后代码都不再执行，直接执行下一次循环。 } console.log(i); }
// 打印1--100之间除了35 45 55之外所有5的倍数的和 var num = 0; for (var i = 5; i <= 100; i += 5) { if (i === 35 || i === 45 || i === 55) { continue; } num += i; } console.log(num);
