JavaScript中流程控制语句的基本使用

#流程控制语句

流程控制语句分类

顺序结构：代码从上到下去执行分支结构：if if-else switch循环结构：for while do-while 1.分支语句 1.1if语句

语法：if(条件){ 条件成立时执行代码 }

双分支：if(条件){ 条件成立时执行代码 }else{ 条件不成立时执行代码 }

if语句后边不放{}，只能控制紧跟着的第一条语句

if语句的条件不仅是比较，还可以是值，为真值

// 1.if
// 如果有100块，去买蜜雪冰城，麻辣香锅
var money = 200;
if(money > 100){
    console.log("买蜜雪冰城");
    console.log("买麻辣香锅");
}

// 2.if语句后边不放{}，只能控制紧跟着的第一条语句
var money = 100;
if(money > 200)
    console.log("买蜜雪冰城");

console.log("买麻辣香锅");
console.log("买雪糕");

// 3.双分支：if(条件){ 条件成立时执行代码 }else{ 条件不成立时执行代码 }
var money = 1000000;
if(money > 10000){
    console.log("买个手机");
    console.log("买个电脑");
    console.log("买个平板");
}else{
    console.log("好好学习");
    console.log("努力挣钱");
}

// 4.if语句的条件不仅仅是比较，还可以是值，为真值
// 假值：0 "" null undefined NaN false
if("abc"){
    console.log("这是1");
    console.log("这是数值");
}

if语句的多分支

语法：if(条件1){ 条件1成立时执行的代码 }else if(条件2){ 条件2成立时执行的代码 }else if(){}…把不容易满足的条件放在前边，可以减少判断次数

var n = 155;
if(n >= 90){
    console.log("非常棒");
}else if(80 <= n && n < 90){
    // 80-90
    console.log("真好");
}else if(70 <= n && n < 80){
    // 70-80
    console.log("还不错");
}else if(60 <= n && n < 70){
    // 60-70
    console.log("及格了");
}else{
    // 否则
    console.log("不及格 下次努力");
}

if语句的嵌套

if语句可以套if语句

1.2 switch语句 break的作用：防止穿透，如果不加的话，丛匹配到的那一项开始，后续条件不再匹配直接执行

/*			switch(匹配项){
                case 值1: 匹配到值1时所执行的代码; break;
                case 值2: 匹配到值2时所执行的代码; break;
                ...
                default: 以上都没有匹配到执行的代码;
            }
*/
var str = "华妃";
switch(str){
    case "皇后": console.log("今天去皇后那"); break;
    case "华妃": console.log("今天去华妃那"); break;
    case "甄嬛": console.log("今天去甄嬛那"); break;
    case "眉姐姐": console.log("今天去眉姐姐那"); break;

        // 默认项
    default: console.log("今天哪里也不去");
}

使用场景：

​ 如果匹配的是简单的字符或者数字，使用switch会更简洁些

​ 如果出现的情况比较复杂，用if语句会更方便些

2.循环语句 2.1 for循环

语法：for(表达式一；表达式二；表达式三){ 循环体 }

​ for(初始化循环变量；循环条件；更新循环变量){ 循环体 }

注意：循环条件一定要保证能让循环结束，否则陷入死循环

重复执行的代码 有规律的变化

执行过程

1.初始化循环变量   var i = 1
2.判断循环条件      i <= 5
     条件成立时执行下一步
     条件不成立循环结束
3.执行循环体
4.更新循环变量  i++
5.回到步骤2

/* 重复执行的代码 有规律的变化 */
// 求1-100的和
var sum = 0; // 存放和
for(var i = 1; i <= 100; i++){
    console.log(i); // 1 2 3 ... 100
    // 每次拿到的数都往sum上加
    // sum = sum + i; // 累加
    sum += i;
}
console.log(sum,'和'); // 5050

for循环 *** 作标签

// 有规律的变化
console.log(oLi.length, '元素集合的长度');
for(var i = 0; i < oLi.length; i++){
    console.log(i); // 0 1 2 3 4
    oLi[i].onclick = function(){
        console.log("被点击了");
    }
}

动态渲染数据

var oUl = document.getElementsByTagName('ul')[0];
var list = ["上海6月见实现社会面清零",
            "大别山革命老区",
            "先救我妹妹",  
            "老年人新冠疫苗接种不要等"]
// 动态渲染数据
// 根据数据的长度来渲染标签
for(var i = 0; i < list.length; i++){
    console.log(i); // 0 1 2 3
    console.log(list[i]); // 取值

    // 生成对应个数的li标签
    oUl.innerHTML += "" + list[i] + "";
}

2.2 while和do-while

while:满足某个条件，执行某件事情
	初始化循环变量
	while(循环条件){
		// 循环体
		// 更新循环变量
	}
do-while：先执行一次循环体，之后再判断循环条件
	初始化循环变量
	do{
		// 循环体
		// 更新循环变量
	}while(循环条件)

// 初始化循环变量
var j = 10;
while(j <= 5){
    // 循环体
    console.log("while-------" + j);

    // 更新循环变量
    j++;
}

// 初始化循环变量
var k = 10;
do{
    // 循环体
    console.log('do-while--------'+k);

    // 更新循环变量
    k++;
}while(k <= 5)

while和do-while的区别：

do-while先执行一次循环体，之后再判断循环条件，循环体至少会执行一次while满足某个条件，执行某件事情

for和while的使用场景

for循环适用于开始条件和结束条件都比较明确时使用while循环适用于循环条件比较明确时使用 3.break和continue

都是在循环中使用，

break是直接终止循环

continue是跳过本轮循环，后续循环继续执行

for(var i = 1; i <= 10; i++){
    if(i == 5){
        // console.log("不小心摔断腿了");
        // break; // 终止循环

        console.log("有点累 下来歇一会");
        continue; // 跳过本轮循环，后续循环继续执行
    }

    console.log("这是第" + i + "圈");
}

4.for循环的嵌套

for循环的嵌套/双重for循环：在for循环中嵌套一个for循环

外循环执行一轮，内循环执行一整圈

for(初始化外循环变量; 外循环条件;外循环变量的更新){
	for(初始化内循环变量; 内循环条件;内循环变量的更新){}
}

*** 作有规律的图形

外循环控制行内循环控制列

// 外循环控制行 i
for(var i = 1; i<=5; i++){
    // 每一行都要生成列  内循环的条件:列<=行
    // 内循环控制列 j
    for(var j = 1; j <= i; j++){
        document.write("*")
    }
    document.write("
");
}

动态生成标签

外循环控制父元素内循环控制子元素

// 有几个ul进行多少次渲染 arr[0] oUl[0]
// 外循环控制父元素 ul
for(var k = 0; k < oUl.length; k++){
    // 根据数据的长度动态生成标签li
    var list = arr[k]; // 获取对应的数据

    // 内循环控制子元素 li
    for(var i = 0; i < list.length; i++){
        console.log(list[i]);
        oUl[k].innerHTML += ""+ list[i] +""; // 累加
    }
}