四，JavaScript之条件分支和循环流程。if……else条件，for和while循环。

凡梦_leo

于 2024-07-19 10:11:21 发布

阅读量839

点赞数 13

分类专栏： JavaScript 文章标签： javascript 前端后端 for循环 if条件语句 js vue

本文链接：https://blog.csdn.net/qq_55006020/article/details/140539285

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

很高心您打开了本篇博客；
主要作用：通过学习JavaScript和整理笔记，为前端/后端/大数据项目提供基石；
复习前面三篇：

一,JavaScript基础知识。初识JavaScript，变量var和let，变量提升（var和let的区别），常量（const），标识符，注释，引入方式和输出方式-CSDN博客

二，JavaScript之数据类型。原始数据类型，引用数据类型，数据类型转换，查看数据类型。-CSDN博客

三，JavaScript之运算符，详细篇。算数，比较，逻辑，赋值，位，其他运算符等。运算符的优先级。-CSDN博客

本篇是 javascript 专栏，笔记梳理的第四篇。
主要内容：条件分支，循环流程。if，else，switch条件语句，和for，while循环语句的用法和示例。
学习：知识的初次邂逅
复习：知识的温故知新

一，if语句

1，基础if语句

2，if……else语句

3，if……elseif ……else语句

一，if语句

1，基础if语句

在js中，if语句是一种基本的控制流程语句，它允许程序根据条件的布尔值真假来执行不同的代码。

基本语句：

if(布尔值){
//如果布尔值返回结果为真，则执行这句话
}

示例：

        let a=1;
        if(a<2){
            console.log('执行我这句');  // 执行我这句
        };

        if(a>2){
            console.log('我还会被执行么');  // 条件不满足，此语句不会被执行  
        };

2，if……else语句

if代码块后面，还可以更一个else代码块，表示不满足条件时，所要执行的代码。

基本语句：

if(布尔值){
    //为真的时候，执行我
}else{
    //为假的时候，执行我
};

示例：

        let a1='1234';
        if(a.lenght<2){
            console.log('执行我这句');
        }else{
            console.log('会执行我么');//  a1的长度比2大 条件不满足，所以走这里。你会被执行的！
        };

判断一个年时平年还是润年

    var yeah=2008;
    if(yeah%4 === 0 && yeah%100 !==0 || yeah%400 ===0){
        console.log(yeah+"是闰年！")
    }
    else {
        console.log(yeah+"是平年")
    }

3，if……elseif ……else语句

对同一个变量进行多次判断的时候，多个if else语句可以连写在一起

基础语法：

if(条件=值1){
    //满足值1的时候执行我
}else if(条件=值2){
    //满足值2的时候执行我
}else if (条件=值3){
    //满足值3的是否执行我
}else{
    //以上都不满足的时候执行我
}

示例：

        let week
        if(week='周一'){
            console.log('今天是周一');
        }else if(week='周二'){
            console.log('今天是周二');
        }else if (week='周三'){
            console.log('今天是周三');
        }else{
            console.log('今天是周四或者周五或者周六');
        }

嵌套用法

  if(typeof n1 === Number && typeof n2 === Number && typeof n3 === Number){
        if(n1<n2 && n1<n3){
    console.log(n1+"最小") //返回这个结果
      }
      else if(n2<n1 && n2<n3){
          console.log(n2+"最小")
        }
      else if(n3<n1 && n3<n2){
        console.log(n3+"最小")
      }
  }else{
      console.log('他们表示数值')
  }

else 代码块总是匹配与之最近的if语句

二，switch语句

多个if else连在一起使用的时候，也可以使用switch替代。

switch基本语句

switch（条件）{
    case "值1"：条件=值1的时候执行的语句；break；
    case "值2"：条件=值2的时候执行的语句；break；
    case "值3"：条件=值3的时候执行的语句；break；
    case "值4"：条件=值4的时候执行的语句；break；
    default：以上值都不满足执行的语句
}

示例

 var a = 1;
    switch (a) {
        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
        case 7:
            console.log("礼拜七")
            break
        default:
            console.log('请输入1-7之间的数字')
    }

break 如果不加，会执行穿透效果示例

<!--判断年数和天数时候合规 并且输入年份和月份 注意2月闰年和平年的月份不一样，1，3，5，7，8，10，12的月份天数也不一样-->
<script>
    var yeah1 = 2023;
    var mot1 = 2;
    switch (mot1) {
        case 1:case 3:case 5:case 7:case 8:case 10:case 12:console.log(yeah1 + '年的' + mot1 + '的月有31天')
            break
        case 4:case 6:case 9:case 11:
            console.log(yeah1 + '年的' + mot1 + '的月有30天')
            break
        case 2:
            if (yeah1 % 4 === 0 && yeah1 % 100 !== 0 || yeah1 % 400 === 0) {console.log(yeah1 + '年是闰年，他的' + mot1 + '的月有29天')}
            else {console.log(yeah1 + '年是平年，他的' + mot1 + '的月有28天')}
            break
        default:console.log('您输入的月份有误')}
</script>

如果不用穿透实现代码如下：

-->
<!--不用case穿透实现的代码-->
<script>
    var yeah = 2024;
    var moth = 5;
    switch (moth) {
        case 1:
            console.log(yeah + "的" + moth + "月有31天")
            break
        case 2:
            if (yeah % 4 === 0 && yeah % 100 !== 0 || yeah % 400 === 0) {
                console.log(yeah + '是闰年' + moth + '月有29天')
            } else {
                console.log(yeah + '是平年' + moth + '月有28天')
            }
            break
        case 3:
            console.log(yeah + "的" + moth + "月有31天")
            break
        case 4:
            console.log(yeah + "的" + moth + "月有30天")
            break
        case 5:
            console.log(yeah + "的" + moth + "月有31天")
            break
        case 6:
            console.log(yeah + "的" + moth + "月有30天")
            break
        case 7:
            console.log(yeah + "的" + moth + "月有31天")
            break
        case 8:
            console.log(yeah + "的" + moth + "月有31天")
            break
        case 9:
            console.log(yeah + "的" + moth + "月有30天")
            break
        case 10:
            console.log(yeah + "的" + moth + "月有31天")
            break
        case 11:
            console.log(yeah + "的" + moth + "月有30天")
            break
        case 12:
            console.log(yeah + "的" + moth + "月有31天")
            break
        default:
            console.log('信息输入有误')
    }
</script>

三，三目运算符

这个三元运算符可以被视为if else的简写形式，因此可以用于多种场合。

基础语句

（条件）？为真的表达式：为假的表达式

示例：

    var a=450;
    a % 2 ===0? console.log('偶数'):console.log('奇数')
    //  布尔值判断    真的结果            假的结果
    //     ？              冒号分割
    //未来写作中 大多场景会把判断的值直接取出来给一个变量
    var vae1=a % 2 ===0? '偶数':'奇数';
    console.log(vae1)

四，循环

1，for循环

循环语句用于重复执行某个操作；

for循环语句就是循环命令，执行循环的起点，终点，和终止条件。

语法如下：

for(初始表达式；布尔表达式；迭代因子){
循环语句
}

初始表达式：确定循环变量的初始值，只在循环开始的时候执行一次；
布尔表达式：每轮循环开始时，都要执行这个条件表达式，只有值为真，才可以继续循环；
迭代因子：每一次循环之后，通常用来递增迭代循环变量，不至于形成死循环。

示例：

  // 有死循环的可能
  for (var a=1;a<4;a++){
    console.log(a)
  }
  //打印结果  1  2  3
  // var a=1  程序进来先执行这个，然后进入布尔判断 开始执行真的内容 然后变量自增
  //循环100以内的每个数字
  var x=100;
  for(var i=0;i<=x;i++){
      console.log(i)  //i一次是0 到100
  }

实现九九乘法表

    for (var x = 0; x < 10; x++) {
        for (var y = 1; y < (x +1); y++)
            document.write(x + '*' + y + '=' + (x * y) + ' ')
        document.write('<br>')
    }

求出1到100以内的数值和

<!--输出1-100之间的数字和-->
<!--<script>-->
<!--    var a=0-->
<!--    for(var i=0;i<5;i++){-->
<!--        a=a+i-->
<!--        // i1 a=0+1-->
<!--        // i=2的时候  a=1+2-->
<!--        //i=3的时候  a=3+3-->
<!--        //i=4   a=6+4-->
<!--    }-->
<!--    document.write(a)-->

2，while循环

while循环语句包括一个循环条件和一段代码块，只要条件为真，就不断的循环执行代码块。

语法

let n=1;
while(n<10){
    循环语句
    n+=1
}

n=1 循环的初始条件；
n<10 循环的执行条件；
n=n+1 循环的迭代因子；

示例：

  var a=0;
  while (a<10){
    document.write(a)
    a=a+1  // 结束条件写在前面和写在后面的区别   第一次的值会不会发生变化  a的值
  }

3，do……while循环

他和while循环类似，但是它的区别就是无论循环条件是否满足，我都要执行一次。

语法：

let n=0;
do{
循环语句
迭代因子
}while(条件)

示例：

  var a=100;
  // do {
  //   console.log(a)
  //   a=a+1
  // }while (a<10);  //这布尔值结果是false 所以不执行 只是执行上面的一行
    do {
    console.log(a)
    a=a+1
  }while (a<=105);  //a是100 小于105 结果是真 所以会打印每次增加的值

4，break和continue跳出语句

break和continue都可以跳出循环。

break四跳出代码块和循环。

continue是终止本次循环，返回循环开始继续重新执行；

示例：

// 第一种情况
  // for(var a=1;a<10;a++){
  //
  //   if(a===5){
  //     continue
  //   }
  //   document.write(a)  // 1234 6789  5不见了 满足布尔值判断 所以5被跳过了
  // }
  //第二种情况
  //   for(var a=1;a<10;a++){
  //   if(a===5){
  //     break
  //   }
  //   document.write(a)  // 1234  5后面的都不见了  满足布尔值判断 所以循环直接结束
  // }
    //在sw里面   break 有穿透效果  没有continue的用法
  var a=2
  switch (a) {
    case 1:
      document.write(1);
      // break
    case 2:
      document.write(2);
      // break
    case 3:
      document.write(3);
      // break
    default:
      document.write(2222)  // 2 3 222   下面都被穿透了
  }

示例2 求出100之间的偶数和

<!--利用循环写出100以内的奇数和偶数的和
-->
<script>
  //第一种解题思路  for+if和else
  osun=0
  qsun=0
  // for(var a=0;a<=100;a++){
  //   if(a %2 ===0){
  //     osun=osun+a
  //     // document.write(a+':是偶数<hr>')
  //   }
  //   else {
  //     qsun=qsun+a
  //   }
  // }
  // document.write('偶数和是:' + osun);
  // document.write('奇数和是:' + qsun);

  //第二种方法 用continue 来跳出 解决
  for(var a=0;a<100;a++){
    if(a%2 ===0){
      continue
    }
    qsun=qsun+a;
  }document.write('奇数和是:' + qsun);
  for(var a1=0;a1<100;a1++){
    if(a1%2 !==0){
      continue
    }
    osun=osun+a1;
  }document.write('偶数和是:' + osun);
</script>