2、JS基础-DAY2

是柚柚耶

已于 2023-05-20 09:56:54 修改

阅读量89

点赞数

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

于 2023-05-19 23:06:07 首次发布

本文链接：https://blog.csdn.net/m0_51394252/article/details/130556437

版权

JS 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文介绍了JavaScript中的运算符，包括赋值运算符、一元运算符（如自增、自减）、比较运算符（如大于、小于、等于）、逻辑运算符（与、或、非），以及分支语句（if、三元运算符、switch）和循环语句的使用，强调了不同运算符的特点和优先级，以及如何在实际编程中运用这些知识进行条件判断和循环控制。

摘要由CSDN通过智能技术生成

一、运算符

1.1 赋值运算符

目标：能够使用赋值运算符简化代码
（1）赋值运算符：对变量进行赋值的运算符
（2）已经学过的赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个容器
（3）其他赋值运算符：
+=
-=
*=
/=
%=
使用这些运算符可以在对变量赋值时进行快速操作

1.2 一元运算符

目标：能够使用一元运算符做自增运算
众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符
（1）二元运算符：
例：

（2）一元运算符：
例：正负号
（3）问题：我们以前让一个变量每次+1 ，以前我们做的呢？

我们可以有更简便的写法了

自增：

（1）符号：++
（2）作用：让变量的值 +1

自减：

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

注意：

前置自增和后置自增独立使用时二者并没有差别！
一般开发中我们都是独立使用
3. 后面 i++ 后置自增会使用相对较多,并且都是单独使用
经常用于计数来使用。用来计算多少次

答案：7
i++ 先运算后自加：1+ （）此时i已经是2了
++i先自加在运算：i= 2+1=3，1+3=4
+i:+3=7

1.3 比较运算符

1、比较运算符：
（1）> ：左边是否大于右边
（2）<：左边是否小于右边
（3）>=：左边是否大于或等于右边
（4）<=：左边是否小于或等于右边
（5）==：左右两边值是否相等
（6）===：左右两边是否类型和值都相等
（7）!==：左右两边是否不全等
比较结果为boolean类型，即只会得到 true 或 false
2、对比：
= 单等是赋值
== 是判断
=== 是全等
开发中判断是否相等，强烈推荐使用 ===

<body>
    <script>
        console.log(3 > 5)  //false
        console.log(2 == 2)  //true
        // 比较运算符有隐式转换 把'2'转换为2 双等号只判断值
        console.log(2 == '2')  //true
        console.log(undefined == null) //true
        // === 全等 判断 值 和 数据类型 都一样才行
        console.log(2 === '2')  //false
        console.log(NaN = NaN)  //false NaN不等于任何人，包括他自己
        //以后判断是否相等，请用 ===
    </script>
</body>

3、字符串比较，是比较的字符对应的ASCII码
（1）从左往右依次比较
（2）如果第一位一样再比较第二位，以此类推
（3）比较的少，了解即可

        console.log('a' < 'b')  //true
        console.log('aa' < 'ab')  //true
        console.log('aa' < 'aac')  //true

4、NaN不等于任何值，包括它本身
涉及到"NaN“ 都是false
5、尽量不要比较小数，因为小数有精度问题
6、不同类型之间比较会发生隐式转换
最终把数据隐式转换转成number类型再比较
所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==

1.4 逻辑运算符

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	两边都为true，结果才为true	一假则假
ll	逻辑或	或者	符号两边有一个true就为true	一真则真
！	逻辑非	取反	true变false，false变true	真则假，假则真

案例：判断一个数是4的倍数，且不是100的倍数
需求：用户输入一个，判断这个数能被4整除，但是不能被100整除,满足条件，页面弹出true，否则弹出false
分析：
①：用户输入
②：判断条件，看余数是不是0，如果是0就是能被整除，余数不是0，则不能被整除

<body>
    <script>
        // 1.用户输入
        let num = +prompt('请输入一个数字：')
        // 2.弹出结果
        alert(num % 4 === 0 && num%100 !== 0)
    </script>
</body>

1.5 运算符优先级

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

二、语句

2.1 表达式和语句

目标：能说出表达式和语句的区别
（1）表达式：
表达式是可以被求值的代码，JavaScript 引擎会将其计算出一个结果。
（2）语句：
语句是一段可以执行的代码。
比如： prompt() 可以弹出一个输入框，还有 if语句 for 循环语句等等
（3）区别：
1）表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧。
表达式 num = 3 + 4
2）语句：而语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值。
语句 alert() 弹出对话框 console.log() 控制台打印输出
3）某些情况，也可以把表达式理解为表达式语句，因为它是在计算结果，但不是必须的成分 (例如continue语句)

2.2 分支语句

程序三大流程控制语句：
以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
有的时候要根据条件选择执行代码，这种就叫分支结构
某段代码被重复执行，就叫循环结构

2.3分支语句

分支语句可以让我们有选择性的执行想要的代码
支语句包含：
If分支语句
三元运算符
switch 语句

2.3.1 if语句

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

1.单分支使用语法：

括号内的条件为true时，进入大括号里执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做~
(2)单分支课堂案例1：用户输入高考成绩，如果分数大于700，则提示恭喜考入黑马程序员

<body>
    <script>
        // 单分支语句
        // if (false) {
        //     console.log('执行语句')
        // }
        // console.log('------')
        // if (3<5) {
        //     console.log('执行语句')
        // }
        // 除了0，所有的数字都为真
        // if (1) {
        //     console.log('执行语句')
        // }
        // 1.用户输入
        let score = +prompt('请输入成绩：')
        // 2.进行判断输出
        if (score >=700) {
            alert('恭喜考入黑马程序员')
        }
    </script>
</body>

2.双分支if语法：

案例：判断用户登录案例
需求：用户输入，用户名：pink，密码：123456，则提示登录成功，否则提示登录失败
分析：
①：弹出输入框，分别输入用户名和密码
②：通过if语句判断，如果用户名是pink，并且密码是123456，则执行if里面的语句，否则执行else里面的语句。

<body>
    <script>
        // 1.用户输入
        let uname = prompt('请输入用户名：')
        let pwd = prompt('请输入密码：')
        // 2.判断输出
        if (uname === 'pink' && pwd === '123456') {
            alert('恭喜登录成功')
        }else{
            alert('用户名或者密码错误')
        }
    </script>
</body>

3.多分支if语法：

（1）使用场景：适合于有多个结果的时候，比如学习成绩可以分为：优良中差

释义：
先判断条件1，若满足条件1就执行代码1，其他不执行
若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
若依然不满足继续往下判断，依次类推
若以上条件都不满足，执行else里的代码n
注：可以写N个条件，但这里演示只写2个
（2）案例：输入成绩案例
需求：根据输入不同的成绩，反馈不同的评价
注：
①：成绩90以上是优秀
②：成绩70~90是良好
③：成绩是60~70之间是及格
④：成绩60分以下是不及格

<body>
    <script>
        let score = +prompt('请输入你的成绩：')
        if (score > 90){
            alert('优秀')
        } else if (score <= 90 && score >=70){
            alert('良好')
        } else if (score <70 && score >=60){
            alert('及格')
        } else {
            alert('不及格')
        }
    </script>
</body>

2.3.2 三元运算符

元：操作数
使用场景：其实是比 if 双分支更简单的写法，可以使用三元表达式
符号：? 与 : 配合使用
语法：

一般用来取值

<body>
    <script>
        // 三元运算符
        // 条件？代码1：代码2
        console.log(3>5 ? 3:5) //5
        let sum = 3 < 5 ? 3 : 5
        console.log(sum)  //3
    </script>
</body>

案例1：

判断2个数的最大值
需求：用户输入2个数，控制台输出最大的值
分析：
①：用户输入2个数
②：利用三元运算符输出最大值

<body>
    <script>
        // 1.用户输入
        let num1 = +prompt('请输入第一个数：')
        let num2 = +prompt('请输入第二个数：')
        // 2.判断输出-三元运算符
        num1 > num2 ? alert(`最大值是：${num1}`):alert(`最大值是：${num2}`)
    </script>
</body>

案例2：数字补0案例

需求：用户输入1个数，如果数字小于10，则前面进行补0，比如 09 03 等
分析：
①：为后期页面显示时间做铺垫
②：利用三元运算符补 0 计算

<body>
    <script>
        // 1.用户输入
        let num = prompt('请您输入一个数字：')
        // 2.判断输出-小于10才补0
        num = num < 10 ? 0+num : num
        alert(num)
    </script>
</body>

2.3.3 switch语句

释义：
找到跟小括号里数据全等的case值，并执行里面对应的代码
若没有全等 === 的则执行default里的代码
例：数据若跟值2全等，则执行代码2
注意：
1.switch case语句一般用于等值判断,不适合于区间判断
2.switch case一般需要配合break关键字使用没有break会造成case穿透

<body>
    <script>
        switch (1) {
            case 1:
                console.log('您选择的是1')
                break  //退出switch
            case 2:
                console.log('您选择的是2')
                break  //退出switch
            case 3:
                console.log('您选择的是3')
                break  //退出switch
            default:
                console.log('没有符合条件的')
                break
        }
    </script>
</body>

案例：简单计算器

需求：用户输入2个数字，然后输入 + - * / 任何一个，可以计算结果

body>
    <script>
        // 1.用户输入 2个数字 + 操作符号 + - * /
        let num1 = +prompt('请输入第一个数字：')
        let num2 = +prompt('请输入第二个数字：')
        let sp = prompt('请输入+ - * /其中任意一个：')
        // 2.判断输出
        switch (sp) {
            case '+':
                alert(`两个数的加法操作是${num1 + num2}`)
                break
            case '-':
                alert(`两个数的减法操作是${num1 - num2}`)
                break
            case '*':
                alert(`两个数的乘法操作是${num1 * num2}`)
                break
            case '/':
                alert(`两个数的除法操作是${num1 / num2}`)
                break
            default:
                alert('请输入+ - * /其中任意一个')
        }
    </script>
</body>

2.4 循环语句

2.4.1 断点调试

1.作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
2. 浏览器打开调试界面
（1）按F12打开开发者工具
（2）点到sources一栏
（3）选择代码文件

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

2.4.2 while 循环

目标：掌握while循环语法，能重复执行某段代码

循环：重复执行一些操作， while : 在…. 期间，所以 while循环就是在满足条件期间，重复执行某些代码。
比如我们运行相同的代码输出5次（输出5句 “我学的很棒”）
路径：
(1) while 循环基本语法
(2) while 循环三要素

1. while 循环基本语法：

(1) 释义：
跟if语句很像，都要满足小括号里的条件为true才会进入循环体执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出
(2) while 循环三要素：
循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。
所以，while循环需要具备三要素：

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

(3) 在页面中打印输出10句“月薪过万”
需求：使用while循环，页面中打印，可以添加换行效果

<body>
    <script>
        // 1.变量的起始值
        let i = 1
        // 2.终止条件
        while (i <= 10) {
            document.write('月薪过万<br>')
            // 3.变量的变化量
            i++
        }
        
    </script>
</body>

能不能改进，让用户输入打印输出的个数呢？

let end = +prompt('请输入次数：')
        // 1.变量的起始值
        let i = 1
        // 2.终止条件
        while (i <= end) {
            document.write(`我要循环${end}次<br>`)
            // 3.变量的变化量
            i++
        }

计算1-100之间的所有偶数和
核心思路：
声明累加和的变量 sum
首先利用if语句把 i 里面是偶数筛选出来
把筛选的 i 加到 sum 里面

<body>
    <script>
        let sum = 0
        let i = 1
        while (i <= 100) {
            // 筛选偶数
            if (i % 2 === 0) {
                sum += i
            }
            // 每次循环都要自加
            i++ 
        }
        console.log(sum)
    </script>
</body>

2.5 循环退出

目标：能说出continue和break的区别

循环结束：
break：退出循环
continue：结束本次循环，继续下次循环
区别：
continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue
break 退出整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用
案例
需求：页面弹出对话框，‘你爱我吗’，如果输入‘爱’，则结束，否则一直弹出对话框
分析：
①：循环条件永远为真，一直弹出对话框
②：循环的时候，重新让用户输入
③：如果用户输入的是：爱，则退出循环（break）

<body>
    <script>
        while (true) {
            let str = prompt('你爱我吗')
            // 退出条件
            if (str === '爱') {
                break
            }
        }
    </script>
</body>

综合案例：简易ATM取款机案例

需求：用户可以选择存钱、取钱、查看余额和退出功能
分析：
①：循环的时候，需要反复提示输入框，所以提示框写到循环里面
②：退出的条件是用户输入了 4，如果是4，则结束循环，不在弹窗
③：提前准备一个金额预先存储一个数额
④：取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额
⑤：输入不同的值，可以使用switch来执行不同的操作

<body>
    <script>
        // 1.开始循环 输入框写到 循环里面
        // 3.准备一个总的金额
        let money = 100
        while (true) {
            let re = +prompt(`
            请您选择操作：
            1.存钱
            2.取钱
            3.查看余额
            4.退出
            `)
        // 2.如果用户输入的4 则退出循环，break
        if (re === 4) {
            break
        }
        switch (re) {
            case 1:
                // 存钱
                let cun = +prompt('请输入存款金额：')
                money += cun
                break
            case 2:
                // 取钱
                let qu = +prompt('请输入取款金额：')
                money -= qu
                break
            case 3:
                // 余额
                alert(`您的银行卡余额是${money}`)

        }


        } 
    </script>
</body>

switch和if的区别：

大部分情况下可以互换
区别：
（1）switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断（大于，等于某个范围）
（2）switch语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
（3）switch一定要注意必须是===全等，一定要注意数据类型，同时注意break否则会有穿透效果
结论：
当分支比较少，if…else语句执行效率高
当分支比较多，switch 语句执行效率高，而且结构更清晰

是柚柚耶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2、JS基础-DAY2

while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出。②：通过if语句判断，如果用户名是pink，并且密码是123456，则执行if里面的语句，否则执行else里面的语句。需求：用户输入，用户名：pink，密码：123456，则提示登录成功，否则提示登录失败。②：判断条件，看余数是不是0，如果是0就是能被整除，余数不是0，则不能被整除。
复制链接

扫一扫