前端JavaScript入门-day02-运算符和语句

小周不想卷

已于 2023-08-03 15:10:36 修改

阅读量641

点赞数 5

分类专栏： # 前端JavaScript入门文章标签：前端 JavaScript html5 css3

于 2023-06-26 13:20:17 首次发布

本文链接：https://blog.csdn.net/weixin_73295475/article/details/131381086

版权

前端JavaScript入门专栏收录该内容

9 篇文章 1 订阅

订阅专栏

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

一.运算符

1.1 赋值运算符

目标：能够使用赋值运算符简化代码
赋值运算符：对变量进行赋值的运算符

已经学过的赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个容器
其他赋值运算符：
        +=
        -=
        *=
        /=
       %=

使用这些运算符可以在对变量赋值时进行快速操作

以前我们让一个变量加 1 如何做的？

现在我们有一个简单的写法啦~~~

1.2 一元运算符

众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符

二元运算符：
例：
一元运算符：
例：正负号

目标：能够使用一元运算符做自增运算

自增：
        符号：++
        作用：让变量的值 +1

自减：
        符号：--
        作用：让变量的值 -1
使用场景：经常用于计数来使用。比如进行10次操作，用它来计算进行了多少次了

自增运算符的用法：

前置自增：

每执行1次，当前变量数值加1
其作用相当于 num += 1

后置自增：

每执行1次，当前变量数值加1

其作用相当于 num += 1

前置自增和后置自增单独使用没有区别

如果参与计算就有区别：

前置自增：先自加再使用（记忆口诀：++在前先加）

后置自增：先使用再自加（记忆口诀：++在后后加）

思考：

答案为7，因为i先后置++变成2，然后又前置++变成3，所以原式为：1+3+3=7

1.3 比较运算符

比较运算符的介绍

比较运算符具有隐式转换的特点，可以将字符型转换为数字型

使用场景：比较两个数据大小、是否相等

> ：左边是否大于右边
<：左边是否小于右边
>=：左边是否大于或等于右边
<=：左边是否小于或等于右边
==：左右两边值是否相等
===：左右两边是否类型和值都相等
!==：左右两边是否不全等
比较结果为boolean类型，即只会得到 true 或 false

对比：

= 单等是赋值
== 是判断
=== 是全等
开发中判断是否相等，强烈推荐使用 ===（可以避免隐式转换带来的问题）

比较运算符的细节

字符串比较，是比较的字符对应的ASCII码

从左往右依次比较
如果第一位一样再比较第二位，以此类推

NaN不等于任何值，包括它本身
涉及到"NaN“ 都是false

尽量不要比较小数，因为小数有精度问题

1.4 逻辑运算符

1.5 运算符优先级

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

二.语句

2.1 表达式和语句

表达式：
表达式是可以被求值的代码，JavaScript 引擎会将其计算出一个结果。

语句：
语句是一段可以执行的代码。
比如： prompt() 可以弹出一个输入框，还有 if语句 for 循环语句等等

区别：
表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧。
表达式 num = 3 + 4
语句：而语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值。
语句 alert() 弹出对话框 console.log() 控制台打印输出

某些情况，也可以把表达式理解为表达式语句，因为它是在计算结果，但不是必须的成分 (例如continue语句)

2.2 程序三大流程控制语句

顺序结构

以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构

分支结构

有的时候要根据条件选择执行代码，这种就叫分支结构

循环结构

某段代码被重复执行，就叫循环结构

2.3 分支语句

分支语句可以让我们有选择性的执行想要的代码

分支语句包含：
        If分支语句
        三元运算符
        switch 语句

if语句

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

单分支使用语法：

括号内的条件为true时，进入大括号里执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做~

双分支if语法：

<!-- 需求：用户输入，用户名：pink，密码：123456， 则提示登录成功，否则提示登录失败
分析：
①：弹出输入框，分别输入用户名和密码
②：通过if语句判断，如果用户名是pink，并且密码是123456，则执行if里面的语句，否则执行else
里面的语句。 -->
<!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 uname = prompt('请输入用户名：')
        let pwd = prompt('请输入密码：')
        if(umame === 'zxc'&& pwd==='123456')
        {
            alert('恭喜登陆成功')
        }
        else
        {
            alert('用户名或者密码错误')
        }
    </script>
</body>
</html>

多分支if语法：

<!-- 需求：根据输入不同的成绩，反馈不同的评价
注：
①：成绩90以上是 优秀
②：成绩70~90是 良好
③：成绩是60~70之间是 及格
④：成绩60分以下是 不及格 -->
<!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 score = +prompt('请输入成绩')
        if(score>=90)
        {
            alert('优秀')
        }
        else if(score>=70)
        {
            alert('良好')
        }
        else if(score>=60)
        {
            alert('及格')
        }
        else
        {
            alert('不及格')
        }
    </script>
</body>
</html>

三元运算符

符号：? 与 : 配合使用

<!-- 需求：用户输入2个数，控制台输出最大的值
分析：
①：用户输入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 num1 = +prompt('第1个数')
        let num2 = +prompt('第2个数')
        // if(num1>num2)
        // {
        //     alert(num1)
        // }
        // else
        // {
        //     alert(num2)
        // }
        num1>num2?alert(num1):alert(num2)
    </script>
</body>
</html>

switch语句

释义：
找到跟小括号里数据全等的case值，并执行里面对应的代码
若没有全等 === 的则执行default里的代码

注意事项：

1. switch case语句一般用于等值判断,不适合于区间判断
2. switch case一般需要配合break关键字使用没有break会造成case穿透

2.4 循环结构

断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
浏览器打开调试界面
1. 按F12打开开发者工具
2. 点到sources一栏
3. 选择代码文件
断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

while循环

1. while 循环基本语法：

释义：
跟if语句很像，都要满足小括号里的条件为true才会进入循环体执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

2. while 循环三要素：

1. 变量起始值
2. 终止条件（没有终止条件，循环会一直执行，造成死循环）
3. 变量变化量（用自增或者自减）

<!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>
        //1.变量的起始值
        let i = 1
        //2.终止条件
        while(i<=3)
        {
            document.write('循环三次<br>')
            //3.变量的变化量
            i++
        }
    </script>
</body>
</html>