.流程控制语句
==流程控制语句:重要实际操作==
1.流程控制语句介绍
-
顺序结构(代码依次从上往下执行)
console.log(1) console.log(2) console.log(3)
-
选择结构(分支语句) if if-else if-else if-else switch
-
循环结构：for while do-while for-in
2.选择结构（分支语句）
2.1 单分支
-
if
-
语法: if(条件){ 条件成立的时候执行的代码 }
-
==注意事项==
-
if后面的大括号可以省略 不加大括号 只能控制后面一行代码
-
if的判断条件不一定是表达式 只要能确定真假就行
-
-
<script>
// 1.单分支 if(判断条件) { 条件成立执行的代码}
//需求:如果我的钱超过10000 我就挣钱娶媳妇
var price = 8000;//这是我目前的存款
if(price > 10000){ // false 条件不成立
// 条件成立执行的代码
console.log("挣钱娶媳妇");
console.log("度蜜月");
}
// 注意事项1:if后面的大括号可以省略 不加大括号 只能控制后面一行代码
if(true)console.log(123);
if(false){console.log(456);console.log(789)};
// 注意事项2：if的判断条件不一定是表达式 只要能确定真假就行
if(0){
console.log("你在说什么")
}
</script>
2.2 双分支
-
if-else
-
语法： if(判断条件){条件成立执行的代码 }else{条件不成立执行的代码}
-
==注意事项:如果是双分支语句 if和else一定要搭配使用==
-
<script>
// 2.双分支 if(判断条件){ 条件成立执行的代码} else{ 条件不成立执行的代码}
// 需求：如果你二阶段考核分数不过90 你就末班 如果超过90 就进入三阶段
var store = 90;
if(store >= 90){ //条件成立
console.log("进入三阶段")
}else{//条件不成立
console.log("恭喜你要深造了一次")
}
// 注意事项:如果是双分支语句 if和else一定要搭配使用
if(true){
console.log(123)
}else{
console.log(456)
}
</script>
2.3 多分支
-
if-else if -else
-
==注意事项==：else不是必须的
-
语法:
-
if(条件1){
满足条件1执行的代码
}else if(条件2){
满足条件2执行的代码
}else if(条件3){
满足条件3执行的代码
}
.........
else{
以上条件都不满足的时候 执行的代码
}
//需求 成绩0-59 不及格 60-79 中等 80-100优秀 不在0-100中间 成绩无效
var store = 101;
if (store > 0 && store <= 59) { //0-59 大于0 store > 0 && 小于等于59 store <=59
console.log("不及格")
} else if (store > 59 && store <= 79) {// 60-79 大于59 store >59 && 小于等于79 store <=79
console.log("中等")
} else if (store > 79 && store <= 100) {//80-100
console.log("优秀")
} else { //以上条件都不满足的时候 执行这里的代码
console.log("成绩无效")
}
// 注意事项 else不是必须的
var num = 12;
if(num==10){
console.log("10")
}else if(num==11){
console.log("11")
}
2.4 switch语句
-
语法
switch(){ case 情况1 ： 匹配到情况1所执行的代码; break; case 情况2 ： 匹配到情况2所执行的代码; break; case 情况3 ： 匹配到情况3所执行的代码; break; ...... default:上述情况都不匹配的时候 执行的代码 }
<script>
/*
*/
// break 终止的意思 如果满足这一项，直接终止后面的代码执行
var a = "%";
switch (a) {
case "+": console.log("+"); break;
case "-": console.log("-"); break;
case "*": console.log("*"); break;
case "/": console.log("/"); break;
default: console.log("没有找到")
}
var c = 90;
switch(c){
case 100:console.log("满分");break;
default:console.log("没有找到");
}
// switch 比较适用于简单的字符串或者数字判断
</script>
3.循环结构
3.1 for循环
什么时候需要使用for循环 多次重复执行 多次有规律的执行 for循环的作用 可以让特定的代码执行指定的次数
-
for循环的语法
for(表达式1;表达式2;表达式3){ 循环体(重复执行的代码) }
for(初始化循环变量;循环条件;更新循环变量值){循环体(重复执行的代码)}
for(var n=0;n<5;n++){ console.log("今天吃饭了") }
执行过程
1.初始化循环变量 var n = 0
2.判断循环条件 n<5
条件成立 执行循环体
条件不成立 结束循环
3.更新循环变量 n++
4.回到步骤2
-
基础用法
<script>
/*
for(表达式1;表达式2;表达式3){ 循环体 }
for(初始化循环变量;循环条件;更新循环变量值){ 循环体}
*/
for (var n = 1; n < 10; n++) { // n = 1 2 3 4 5 6 7 8 9 10
console.log("你今天吃饭了吗")
}
console.log(n);//10
</script>
-
循环数组
//循环数组
//array 数组类型 ["123",2,true,undefined,null] 数组可以存储多个数组 可以存储任意类型的数据
var arr = ["你好吗", 123, true, undefined, null];
console.log(arr);
//获取数组中的某一项 语法 数组名[下标]
// console.log(arr[0])
// console.log(arr[1])
// console.log(arr[2])
// console.log(arr[3])
// console.log(arr[4])
//
for (var i = 0; i < 5; i++) { // i = 0 1 2 3 4 5
// console.log(i);// 0 1 2 3 4
console.log(arr[i]);// "你好吗" 123 true undefined null
}
-
循环生成标签
body>
<button>生成</button>
<ul>
</ul>
<script>
var arr = ["赵四成精", "刘能变形", "中国老年人才网正式上线", "拍婚纱照 新郎被劈死"]
// 需求 点击生成按钮 生成四个新闻
// 1.获取元素
var btn = document.getElementsByTagName("button")[0];
var list = document.getElementsByTagName("ul")[0];
// 2.添加点击事件
btn.onclick = function () {
for (var i = 0; i < 4; i++) { // i = 0
// 将原先的内容获取到 + 新内容
// arr[0] arr[1] arr[2] arr[3]
list.innerHTML += "<li>" + arr[i] + "</li>"
/*
i=0 "<li>赵四成精</li>"
i = 1 "<li>赵四成精</li>" + "<li>刘能变形</li>"
i = 2
*/
}
}
</script>
</body>
-
循环添加点击事件
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//点击哪个按钮 将哪个按钮的文本内容输出
var btn = document.getElementsByTagName("button");
// btn[0].onclick = function(){
// console.log(btn[0].innerText)
// }
// btn[1].onclick = function(){
// console.log(btn[1].innerText)
// }
// btn[2].onclick = function(){
// console.log(btn[2].innerText)
// }
// btn[3].onclick = function(){
// console.log(btn[3].innerText)
// }
// btn[4].onclick = function(){
// console.log(btn[4].innerText)
// }
for(var i = 0;i<5;i++){ // i = 0 1 2 3 4 5
btn[i].onclick = function(){
// console.log(btn[i].innerText);// 出现报错信息 因为此时i的值是5
// console.log(i);//5
}
}
</script>
</body>
3.2 while与do-while
3.2.1 while语句
/*
while语句
1.初始化循环变量
while(条件){
循环体(重复执行的代码);
更新循环变量
}
*/
var a = 0;
while(a < 3){
console.log("你好");
a++;
}
3.2.2 do-while的语法
/* do-while语句
1.初始化循环变量
do{
循环体;
更新循环变量
}while(条件)
*/
var b = 0
do{
console.log("摆烂");
b++;
}while(b<3);
3.3.3 while和do-while的区别
-
while：==先判断后执行 最开始不成立 一次也不执行==
-
do-while :==先执行后判断 最开始不成立 也会执行一次==
// while和do-while有什么区别
var x = 0;
while(x > 0){ //先判断后执行 最开始不成立 一次也不执行
console.log("马上下课了");
x++;
}
var x = 0;
do{// 先执行后判断 最开始不成立 也会执行一次
console.log("还没有下课呢");
x++;
}while(x<0)
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
