运算符
赋值运算符
对变量进行赋值的运算符。
已经学过的赋值运算符:=【将等号右边的值赋予给左边,要求左边必须是一个容器】
其他赋值运算符:
+= -= *= /= %=
原始写法和简化写法【其实就是java基础】
一元运算符
众多的JavaScript 的运算符可以根据所需表达式的个数,分为一元运算符、二元运算符、三元运算符。
二元运算符:
css
let num = 10 + 20
但是:
- 前置自增和后置自增独立使用时二者并没有差别!
- 一般开发中我们都是独立使用
- 后面 i++后置自增会使用相对较多,并且都是单独使用
例题:
let i= 1
console.log(i++ + ++i + i)
最后得出结果为7
比较运算符
>:左边是否大于右边
<:左边是否小于右边
>=:左边是否大于或等于右边
<=:左边是否小于或等于右边
==:左右两边值是否相等
===:左右两边是否类型和值都相等
!==: 左右两边是否不全等
对比:
= 单等是赋值
== 是判断
=== 是全等
开发中判断是否相等,强烈推荐使用===
字符串比较,是比较的字符对应的ASCI码
- 从左往右依次比较
- 如果第一位一样再比较第二位,以此类推
- 比较的少,了解即可
NaN不等于任何值,包括它本身【涉及到"NaN"都是false】
尽量不要比较小数,因为小数有精度问题
不同类型之间比较会发生隐式转换
逻辑运算符
使用场景: 逻辑运算符用来解决多重条件判断
**正确写法:**num>5 && num<10
案例:
需求:用户输入一个,判断这个数能被4整除,但是不能被100整除,满足条件,页面弹出true,否则弹出 false
css
<body>
<script>
//1.用户输入
let num = +prompt('请输入一个数字:')
//2.弹出结果
alert(num % 4 === 0 && num % 100 !== 0)
</script>
</body>
运算符优先级
- 一元运算符里面的逻辑非优先级很高
- 逻辑与比逻辑或优先级高
语句
表达式和语句
表达式是可以被求值的代码,JavaScript引擎会将其计算出一个结果。
例如:
语句是一段可以执行的代码。【比如: prompt()可以弹出一个输入框,还有 if语句 for 循环语句等】
区别:
**表达式:**因为表达式可被求值,所以它可以写在赋值语句的右侧。
【表达式:num=3+4】
语句: 而语句不一定有值,所以比如 alert()、for和break 等语句就不能被用于赋值。
【语句:alert()弹出对话框console.log()控制台打印输出】
某些情况,也可以把表达式理解为表达式语句,因为它是在计算结果,但不是必须的成分(例如continue语句)
分支语句
程序三大流程控制语句
- 以前我们写的代码,写几句就从上往下执行几句,这种叫顺序结构
- 有的时候要根据条件选择执行代码,这种就叫分支结构
- 某段代码被重复执行,就叫循环结构
分支语句
分支语句可以让我们有选择性的执行想要的代码
lf分支语句
if语句有三种使用:单分支、双分支、多分支
单分支语句
语法:
css
if(条件)
{
满足条件要执行的代码
}
- 括号内的条件为true时,进入大括号里执行代码
- 小括号内的结果若不是布尔类型时,会发生隐式转换转为布尔类型
- 如果大括号只有一个语句,大括号可以省略,但是,俺们不提倡这么做~
双分支语句
语法:
css
if(条件){
满足条件要执行的代码
} else {
不满足条件执行的代码
}
案例:
输入用户名和密码
css
<body>
<script>
//1.用户输入
let uname = prompt('请输入用户名:')
let pwd = prompt('请输入密码:')
//2.判断输出
if(uname === 'pink'&& pwd ==='123456'){
alert('恭喜登录成功')
}else {
alert('用户名或者密码错误')
}
</script>
</body>
多分枝语句
**使用场景:**适合于有多个结果的时候,比如学习成绩可以分为:优 良 中 差
语法:
css
if(条件1){
代码1
}else if(条件2){
代码2
}else if(条件3){
代码3} else {
代码n
释义:
- 先判断条件1,若满足条件1就执行代码1,其他不执行
- 若不满足则向下判断条件2,满足条件2执行代码2,其他不执行
- 若依然不满足继续往下判断,依次类推
- 若以上条件都不满足,执行else里的代码n
- 注:可以写N个条件,但这里演示只写2个
案例:
根据不同成绩返回不同的评价
css
<body>
<script>
//1.用户输入
let score = +prompt('请输入成绩:')
//2.判断输出if(score >= 90){
alert('成绩优秀,宝贝,你是我的骄傲')
}else if(score >= 70){
alert('成绩良好,宝贝,你要加油哦~~')
}else if(score >=60){
alert('成绩及格,宝贝,你很危险~')
else {
alert('成绩不及格,宝贝,我不想和你说话,我只想用鞭子和你说话~')
</script>
</body>
三元运算符
使用场景: 其实是比if双分支 更简单的写法,可以使用 三元表达式
符号: ?与:配合使用
语法:
css
条件 ? 满足条件执行的代码 : 不满足条件执行的代码
一般用来取值
案例:
**需求:**用户输入2个数,控制台输出最大的值
数字补0案例
**需求:**用户输入1个数,如果数字小于10,则前面进行补0,比如 09 03 等
- 为后期页面显示时间做铺垫
- 利用三元运算符 补 0计算
switch 语句
css
switch(数据){
case 值1:
代码1
break
case 值2:
代码2
break
default:
代码n
break
}
释义:
- 找到跟小括号里数据全等的case值,并执行里面对应的代码
- 若没有全等 ===的则执行default里的代码
- 例:数据若跟值2全等,则执行代码2
- switch case语句一般用于等值判断,不适合于区间判断
- switch case一般需要配合break关键字使用 没有break会造成case穿透
案例:
简单计算器
**需求:**用户输入2个数字,然后输入+ - * / 任何一个,可以计算结果
循环语句
断点调试
学习时可以帮助更好的理解代码运行,工作时可以更快找到bug
JS基础Day2-29-断点调试_哔哩哔哩_bilibili
浏览器打开调试界面
1.按F12打开开发者工具
2.点到sources一栏
3.选择代码文件
**断点:**在某句代码上加的标记就叫断点,当程序执行到这句有标记的代码时会暂停下来
循环:重复执行一些操作
while :在..期间,所以 while循环 就是在满足条件期间,重复执行某些代码。
css
while(循环条件){
要重复执行的代码(循环体)
}
释义:
- 跟if语句很像,都要满足小括号里的条件为true才会进入循环体 执行代码
- while大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到小括号判断条件,直到括号内条件不满足,即跳出
while 循环三要素:
循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程。所以,while循环需要具备三要素:
- 变量起始值
- 终止条件(没有终止条件,循环会一直执行,造成死循环)
- 变量变化量(用自增或者自减)
循环退出
循环结束:
- **break:**退出循环
- **continue:**结束本次循环,继续下次循环
区别
- continue 退出本次循环,一般用于排除或者跳过某一个选项的时候,可以使用continue
- break退出整个循环,一般用于结果已经得到,后续的循环不需要的时候可以使用
综合案例
简易ATM取款机案例
**需求:**用户可以选择存钱、取钱、查看余额和退出功能
css
<!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>
// 1. 开始循环 输入框写到 循环里面
// 3. 准备一个总的金额
let money = 100
while (true) {
let re = +prompt(`
请您选择操作:
1.存钱
2.取钱
3.查看余额
4.退出
`)
// 2. 如果用户输入的 4 则退出循环, break 写到if 里面,没有写到switch里面, 因为4需要break退出循环
if (re === 4) {
break
}
// 4. 根据输入做操作
switch (re) {
case 1:
// 存钱
let cun = +prompt('请输入存款金额')
money = money + cun
break
case 2:
// 取钱
let qu = +prompt('请输入取款金额')
money = money - qu
break
case 3:
// 查钱
alert(`您的银行卡余额是${money}`)
break
}
}
</script>
</body>
</html>