02-JS算数运算符&分支语句

孙小明的测试修炼手册

已于 2023-06-29 01:51:20 修改

阅读量37

点赞数

分类专栏：前端实战-JS 文章标签： javascript 前端开发语言

于 2023-06-29 00:23:33 首次发布

本文链接：https://blog.csdn.net/weixin_44431329/article/details/131447366

版权

前端实战-JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、运算符

1、算数运算符

运算符	功能
加	数字相加
减	数字相减
乘	数字相乘
除	数字相除
取余	常用来判断某个数是否能被整数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num = 10
        let num1 = 20

        console.log(num + num1);
        console.log(num - num1);
        console.log(num / num1);
        console.log(num * num1);
        console.log(num % num1);

    </script>
</body>
</html>

2、赋值运算符

运算符	功能
+=	与sum = sum+i相等
-=	与sum = sum-i相等
*=	与sum = sum*i相等
/=	与sum = sum/i相等
%=	与sum = sum%i相等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num = 10
        let sum = 1;
        console.log(sum += num);  
        console.log(sum -= num);  
        console.log(sum /= num);  
        console.log(sum *= num);  
        console.log(sum %= num);  


    </script>
</body>
</html>

3、一元运算符

运算符	功能
++i	i= i+1
–i	i= i-1
i++	先使用后加
i–	先使用后减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        let i = 1;
        console.log(i++);
        console.log(i--);
        console.log(++i);
        console.log(--i);
    </script>
</body>
</html>

4、比较运算符

比较运算符只会有true或者flase两种结果

运算符	作用
>	左边是否大于右边
<	左边是否小于右边
>=	左边是否大于等于右边
<=	左边是否小于等于右边
==	左边右边是否相等（只比较直）
===	左边右边是否值和类型是否相等
!==	左右两边是否不全等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num = 1
        let num1 = 2
        console.log(num>num1);
        console.log(num<num1);
        console.log(num>=num1);
        console.log(num<=num1);
        console.log(num==num1);
        console.log(num===num1);
        console.log(num!==num1);

    </script>
    
</body>
</html>

[外链图片转存中…(img-UefIoxOy-1687969253826)]
注意：

字符串比较，是比较字符串对应的ASCLL码
NaN不等于任何值，包括他的本身
尽量不要比较小数，因为右精度问题
不同类型之间比较会发生隐式转换所以来发中尽量使用=== 或者!==

5、逻辑运算符

符号	名称	特点
&&	与：并且	两边为true则为true否则为false
\|\|	或：或者	有一个为true就为true
!	非：取反	true为false
falsetrue为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(true && true);
        console.log(true || false);
        console.log(!true);
    </script>
</body>
</html>

2、分支语句

1、if分支语句

if有三种分支语句单分支、双分支、多分支
单分支

案例：判断用户输入是否大于5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num = prompt('请输入一个数字')
        if(num>5){
            console.log("用户输入的数字大于5")
        }
    </script>
</body>
</html>

双分支语句

案例：判断用户输入是否大于5，如果小于5则输出您当前的数字小于5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num = prompt('请输入一个数字')
        if(num>5){
            console.log("用户输入的数字大于5")
        }else{
            console.log("用户输入的数字小于5");
        }
    </script>
</body>
</html>

多分支语句

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num = prompt('请输入当前时间')
        if(num>20){
            console.log("晚上好")
        }else if(12<num<18){
            console.log("下午好");
        }else {
            console.log("早上好");
        }
    </script>
</body>
</html>

3、三元运算符

格式

条件？值1：值2 
-- 记忆口诀一真大师

案例：判断两个数的最大值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num = 1;
        let num2 = 5
        let max = num >num2?num:num2
        console.log(max);

    </script>
</body>
</html>

4、Switch语句

找到跟小括号数据相等的case值，并执行里面的代码
若是没有全相等，则执行default代码
case里面需要写break要不然会造成case击穿

案例：根据用户输入的数字判断为几

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <script>
        switch (2) {
            case 1:
                alert(1)
                break
            case 2:
                alert(2)
                break
            case 3:
                alert(3)
                break
            default:
                alert('没有数据')

        }

    </script>
</body>

</html>

5、while循环

跟if的语法很像，只要小括号的循环条件为true才会执行代码
while大括号里代码执行完毕后不会跳出，会继续回到小括号中进行判断条件是否满足，若是满足则继续执行大括号的代码

[外链图片转存中…(img-XLcsaHus-1687969253830)]
案例：打印10句月薪过万

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        var num = 0
        while(num<10){
            console.log('月薪过万');
            num++

        }
    </script>
</body>
</html>

1、退出循环

满足条件后退出循环使用break 跳过循环 continue

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 我们要打印吃包子
        let i = 1
        while (i <= 6) {
            if (i === 3) {
                i++
                // continue 结束本次循环 继续下一次循环
                // continue
                // 退出循环
                break
            }
            document.write(`我要吃第${i}个包子 <br>`)
            i++
        }
    </script>
</body>

</html>