2.JavaScript 基础 (运算符,流程控制)

最新推荐文章于 2024-07-12 16:27:40 发布

风无雨

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量246

点赞数

分类专栏： # JS基础文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wusandaofwy/article/details/126062419

版权

JS基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.运算符

1.1赋值运算符

赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个容器

<!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>

</body>
<script>
    // 赋值运算符
    let i = 2
    console.log(i);

    // 其他赋值运算符
    i += 1  //等价于 i = i + 1
    console.log(i);

    i -= 1
    console.log(i);

    i *= 1
    console.log(i);

    i /= 1
    console.log(i);

    i %= 1
    console.log(i);
</script>

</html>

1.2.一元运算符

一元运算符:操作一个变量的运算符

<!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>
</body>
<script>
    // 一元运算符:操作一个变量的运算符
    let num = 0
    // 🏆自增: 让变量的值+1 作用相当于num=num+1
    // 经常用于计数
    // 前++
    ++num
    console.log(num);
    // 后++
    num++
    console.log(num);
    // 🏆自减: 让变量的值-1
    // 前--
    --num
    console.log(num);
    // 后--
    num--
    console.log(num);
</script>

</html>

1.3.比较运算符

比较运算符结果为blooean

<!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>
</body>
<script>
    // 比较运算符  结果为blooean
    // >,<,>=,<=,==,!=,===,!==
    console.log(6 <= 5);
    console.log(6 == "6");
    console.log(6 ==  5); //双等号只判断值是否相等 不判断 变量的类型
    console.log(6 === "6");//左右两边是否全等
    console.log(6 != 7);//左右两边不等于
    console.log(6 !== "6");//左右两边是否不全等

</script>

</html>

1.4.逻辑运算符

逻辑运算符与或非

<!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>
</body>
<script>
    // 逻辑运算符 与或非
    // 与 &&
    console.log(5 < 19 && 5 > 2);
    // 或 ||
    console.log(6 > 2 || 6 < 6);
    // 非
    console.log(!'年后');//隐式转换为布尔型,字符串为true再取反输出为false
    // 输入一个数,判断一个数能被4整除,不能被100整除
    let x = +prompt('输入数字')
    console.log(x % 4 == 0 && x % 100 != 0);
    alert(x % 4 == 0 && x % 100 != 0)
    document.write(x % 4 === 0 && x % 100 != 0)

</script>

</html>

1.5.运算符优先级

<!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>
</body>
<script>
    let a = 3 > 5 && 2 < 7 && 3 == 4
    console.log(a);
    let b = 3 <= 4 || 3 > 1 || 3 != 2
    console.log(b);
    let c = 2 === "2"
    console.log(c);
    let d = !c || b && a
    console.log(d);
</script>

</html>

2.语句

2.1.表达式和语句

// 表达式:可以被求值得代码

// 语句:是一段可以被执行的代码

// 流程控制三大语句

// 1.顺序结构

// 2.分支结构

// 3.循环结构

2.2.分支语句

2.2.1if语句

<!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>
</body>
<script>
// if语句
// 🏆单分支
// 小括号内的 一定需要的是布尔值 如果不是则隐性转换为布尔值 
// if(执行条件){
//     满足条件要执行的代码
// }
if(true){
    document.write(`if语句单分支`)
}
// 🏆双分支
if(false){
    document.write('第一条分支')
}
else{
    document.write('第二条分支')
}

// 🏆多分支
if(){

}else if{

}else if{
    
}else{
    
}
</script>

</html>

2.2.2三元运算符

是比 if 双分支更简单的写法，可以使用三元表达式

语法: 条件 ? 语句1 : 语句2

<!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 res = 5 > 3 ? '对' : '错'
        // alert(res)

        // 比较俩个数的大小
        // let x = +prompt('请输入第一个数')
        // let y = +prompt('请输入第二个数')
        // let max = x > y ? x : y
        // alert(`最大数为${max}`)

        // 小于10的数字补零
        let number = prompt('输入数字')
        number = number < 10 ? '0' + number : number
        document.write(number)</script>
</body>

</html>

2.2.3switch语句

注意:

1. switch case语句一般用于等值判断,不适合于区间判断

2. switch case一般需要配合break关键字使用没有break会造成case穿透

3.switch 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 是全等比较
        x = +prompt('第一个数')
        y = +prompt('第一个数')
        yunsuan = prompt('输入运算符')
        let res
        switch (yunsuan) {
            
            case '*':
                res = x * y;
                document.write(res);
                break;
            case '+':
                res = x + y;
                document.write(res);
                break;
            case '-':
                res = x - y;
                document.write(res);
                break;
            case '/':
                res = x / y;
                document.write(res);
                break;
            default:
                document.write('未识别的运算符')
        }
    </script>
</body>

</html>

2.3循环语句

2.3.1 断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug

 浏览器打开调试界面

1. 按F12打开开发者工具

2. 点到sources一栏

3. 选择代码文件

 断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

2.3.2while循环语句

    let i = 1;
    while (i <= 100) {
    document.write(`${i}<br>`)
    i++
 }

// 循环的3要素解决while循环

// 1.变量起始值

// 2.终止条件

// 3.变量更新

🏆要满足小括号里的条件为true才会进入循环体执行代码

 while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，

<!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>
</body>
<script>
    //  while循环
    // let flag = true
    // let i = 1
    // while (flag) {
    //     i++
    //     console.log('月薪过百万');
    //     if (i > 6) {
    //         flag = false
    //     }

    // }
    // 循环的3要素 解决while循环
    // 1.变量起始值
    // 2.终止条件
    // 3.变量更新
    // let i = 1
    // while (i <= 10) {
    //     console.log('月薪过万');
    //     document.write(`月薪过万<br>`)
    //     i++
    // }
    // let i = 1;
    // while (i <= 100) {
    //     document.write(`${i}<br>`)
    //     i++
    // }

    // 计算从1加到100的总和并输出
    // let i = 1;
    // let sum = 0
    // while (i <= 100) {
    //     sum = sum + i
    //     i++
    // }
    // document.write(sum)

    // 计算1-100之间的所有偶数和
    // let i = 1;
    // let sum = 0
    // while (i <= 100) {
    //     if (i % 2 === 0) {
    //         sum = sum + i
    //     }
    //     i++
    // }
    // document.write(sum)

    let i = 2
    let sum = 0
    while (i <= 100) {
        sum += i
        i = i + 2
    }
    document.write(sum)
</script>

</html>

2.3.3循环退出

continue和break的区别

	continue	break
效果	结束本次循环，继续下次循环	跳出所在的循环
区别	退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue	退出整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用

3.取款机案例

需求：用户可以选择存钱、取钱、查看余额和退出功能

分析：

①：循环的时候，需要反复提示输入框，所以提示框写到循环里面

②：退出的条件是用户输入了 4，如果是4，则结束循环，不在弹窗

③：提前准备一个金额预先存储一个数额

④：取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额

⑤：输入不同的值，可以使用switch来执行不同的操作

实现代码如下:

<!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 total = 0
        let flag = 1
        while (flag) {
            let option = +prompt(`
请选择你的操作:
1.存款
2.取款
3.查看余额
4.退出
    `) 
    let cash = 0
            switch (option) {
                case 1:
                    cash = +prompt('输入存款金额')
                    total = total + cash
                    break;
                case 2:
                    cash = +prompt('输入取款金额')
                    if (cash <= total) {
                        total = total - cash
                    } else {
                        alert(`您的余额不足
                         `)
                    }

                    break;
                case 3:
                    alert(`你的银行卡余额为:${total}`)
                    break;
                case 4:
                    // 退出循环,让循环条件不成立
                    flag = 0
                    alert('欢迎下次光临')
                    break;
                default:
                    alert('请选择合法操作')
                    break;

            }
        }

    </script>
</body>

</html>