JavaScript学习——流程控制、循环及运算符

yoghurt&girl

于 2022-08-23 09:00:00 发布

阅读量135

点赞数

分类专栏： web前端开发 JavaScript 文章标签：学习

本文链接：https://blog.youkuaiyun.com/ywforever/article/details/126466633

版权

web前端开发同时被 2 个专栏收录

25 篇文章

订阅专栏

JavaScript

11 篇文章

订阅专栏

一、流程控制

顺序结构

自上而下，依顺序执行

分支结构

根据不同的条件，执行不同的代码，从而得到不同的结果

分支结构

1、分支结构

js提供了两种：if switch两种语句

if语句

不管是在哪一种编程语言，if基本都是存在的，它常用于判断

语法格式：

'双分支'
if (条件)

        {代码块}else

         {代码块};

    如果...否则...
'多分支'
if (表达式1) {

        代码块}else if (表达式2)

                {}else if(表达式3)

                        {}else {};
如果...如果...如果...否则...

双分支案列展示：

    var year = prompt('请输入年份：');
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            alert('您输入的年份是闰年！！！')
        } else {
            alert('您输入的年份是平年！')

        }

多分支案列展示：

var score = prompt('请您输入分数:');
        if (score >= 90) {
            alert("宝贝，你是我的骄傲");
        } else if (score >= 80) {
            alert('宝贝，你已经很出色了');
        } else if (score >= 70) {
            alert("你要继续加油喽");
        } else if (score >= 60) {
            alert('孩子，你很危险');
        } else {
            alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
        }

2、switch语句

语法格式：

switch(n)

{

         case 1: 执行代码块 1

                break;

        case 2: 执行代码块 2

                break;

        default:

                与 case 1 和 case 2 不同时执行的代码

}

1、我们开发里面表达式我们经常写成变量
2．我们num 的值和 case 里面的值相匹配的时候是全等必须是值和数据类型一致才可

3. break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case

switch语句和if else if 语句的区别

一般情况下，它们两个语句可以相互替换

1、switch..case语句通常处理case为比较确定值的情况，而if...else...语句更加灵活，常用于范围判断新(大于、等于某个范国)

2、switch语句进行条件判断后直接执行到程序的条件语句，效率更亮。而if..else语句有几种条件，就得判断多少次。

3、当分支比较少时，if...else语句的执行效率比switch语句高。

4、当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

3、三元表达式

语法格式：语句判断 ? 表达式1 : 表达式2

1、为真返回表达式1，为假返回表达式2
2、输出多个需要加括号

总结代码：

if (2 > 1) {
            //满足条件就执行
            console.log("2大于1")
            //不满足条件就执行
        } else {
            console.log("2不大于1!")
        }

 //三目运算
        s1 = 10
        s2 = 40
        s1 > s2 ? console.log("s1大") : console.log('s2大');

 //switch
        switch (s2) {
            case 10:
                console.log('s1等于10')
                break;
            case 20:
                console.log('s2等于20')
                break;
            default:
                console.log('以上结果都不是')
        }

二、循环

在Js中，主要有三种类型的循环语句:

for循环
while 循环

do..while循环

1、for循环

语法格式：

for（初始化变量；条件表达式；操作表达式）{

//循环体

}

初始化变量：var声明的一个普通变量，用于计数器使用

条件表达式：据诶的那个每一次循环是否继续执行，就是终止条件

操作表达式：每次循环后最后执行的代码，用于计数器变量进行更新（递增/递减）

//for循环
        // for (var i = 0; i <= 10; i++) {
        //     console.log(i)
        // }
        //案列1-求1-100平均值
        var sum = 0,
            avg = 0;
        for (var i = 0; i <= 100; i++) {
            sum += i;
        }
        avg = sum / 100
        console.log(avg)
        //案列2-求1-100之间所有偶数和奇数的和
        var even = 0,
            odd = 0;
        for (var i = 0; i <= 100; i++) {
            if (i % 2 == 0) {
                even += i
            } else {
                odd += i
            }
        }
        console.log('偶数和为：' + even)
        console.log('奇数和为：' + odd)

2、双重for循环

语法结构：

for(外层的初始化变量；外层条件表达式；外层操作表达式）{

for（里层初始化变量；里层条件表达式；里层操作表达式）{

//执行语句

}

}

注意：

外层循环一次，里层循环执行全部

//双重for循环
  //打印倒三角形     
var str = '';
        for (var i = 0; i <= 10; i++) {
            for (var j = i; j < 10; j++) {
                str += '*'
            }
            str += '\n'
        }
        console.log(str)

小结：

for循环可以重复执行某些相同代码
for循环可以重复执行些许不同的代码，因为我们有计数器
for循环可以重复执行某些操作，比如算术运算符加法操怍
随着需求增加，双重for循环可以做更多、更好看的效果
双重for循环，外层循环一次,内层 for循环全部执行
for循环是循环条件和数字直接相关的循环

3、while循环和do...while循环

语法结构：

while（条件表达式）{

//循环体

}

当条件表达式为true时，则执行循环体，否则退出循环

do
{
需要执行的代码
}
while (条件);

注意：至少执行一次循环体

  var i = 0
        while (i < 5) {
            console.log(i);
            i++;
        }

//do while循环
do
{
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

循环小结

JS中循环有for .while、do while
三个循环很多情况下都可以相互替代使用
如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用for
while和do..while 可以做更复杂的判断条件，比for循环灵活—些
while和do..while执行顺序不一样，while先判断后执行，do...while先执行一次，再判断执行
while和do...while执行次数不一样，do...while至少会执行一次循环体，而while可能一次也不执行实际工作中，我们更常用for循环语句，它写法更简洁直观，所以这个要重点学习

4、continue和break关键字

continue关键字用于立即跳出本次循环，继续下一次循环

 for (var i = 0; i <= 5; i++) {
            if (i == 3) {
                continue;
                
            }
            console.log(i);
        }

 for (var i = 0; i <= 5; i++) {
            if (i == 3) {
                break;
                
            }
            console.log(i);
        }

三、运算符

1、算术运算符

+ ：加

-：减

*：乘

/：除
%：取余——可用于判断是否能整除

浮点数要注意精度问题

 //算术运算符
        console.log(1 + 1)
        console.log(2 - 1)
        console.log(2 * 1)
        console.log(2 / 1)
        console.log(5 % 2)

2、比较运算符

常见的：

>:大于

<：小于

==

>=

<=

!==

===

      //比较运算符
        console.log(1 > 2)
        console.log(1 < 2)
        console.log(2 >= 2)
        var num1 = 123;
        var num2 = 456;
        var str1 = "123";
        var arr = [123]
       console.log(num1 == num2)
        console.log(num1 == str1)//true
        console.log(num1 === str1)//false
        console.log(num1 == arr)//true
        console.log(num1 === arr)//false
        console.log(num1 !== str1)
        console.log(num1 != str1)

3、逻辑运算符

逻辑运算符：

&&：与同为真为真，有一个为假都为false

||：或有一个为真则为真

！：非取反

  console.log(false)
         console.log(!false)
         console.log(!999)
        //遇假停，遇真走
        var a = 1 && 2;
        var b = 0 && 2;
        console.log(a)
        console.log(b)
        // //遇假走，遇真停
        var a1 = 0 || 2;
        var b1 = 1 || 2;
        var c = undefined || 0;
        console.log(a1)
        console.log(b1)
        console.log(c)
        // //此处含有优先级区分【与 或 非】
        var d = '123' && 'number' || true && 1 && ('D' / 2) || 0 && undefined;
        //number||d/2||0  number

        console.log(d)