运算符
1.赋值运算符
对变量进行赋值的运算符
赋值运算符(=
)将等号右边的值赋予给左边, 要求左边必须是一个容器
其它赋值运算符:+=,-=,*=,/=,%=
;使用这些运算符可以在对变量赋值时进行快速操作
let num = 1
// 采取赋值运算符
// num = num + 1
// num += 1
num += 3
console.log(num)
一元运算符
一元运算符:正负号
前置自增:++i
后置自增:i++
<!--1 .前置自增 -->
<script>
// 变量每次加1操作
let num =1
// num = num + 1
// num +=1
++num
console.log(num);//2
// 自增运算符每次只能加1
//2. 后置自增
let i = 1
i++
console.log(i);//2
// 前置自增和后置自增单独运算的时候,没有区别都是加1操作
let num1=1
console.log(++num +2);//4
// ++在前先自加,再参与运算
// 先自加1,变成2后和后面2相加
let i1=1
console.log(i++ +2);//3
// ++在后是后加
// 先和2相加,先运算输出完毕后 i再自加
//此时的i是1,先和2相加后,i再自加1此时为2
</script>
</body>
</html>
自测
let a=5;
let b=a++;//先赋值,后运算
console.log(a);// a=6
console.log(b);//b=5 输出运算前的值
let i= 1
console.log(i++ + ++i +i);//7
*/
let x = 10
x = x++; //把 x++赋值给x 后置自加
console.log(x);//10
x++ //等于x =x++ +1
console.log(x);//11
比较运算符
应用场景:比较两个数据大小、是否相等
>
: 左边是否大于右边
<
: 左边是否小于右边
>=
: 左边是否大于或等于右边
<=
: 左边是否小于或等于右边
==
: 左右两边值是否相等
===
: 左右两边是否类型和值都相等(全等)
!==
: 左右两边是否不全等(不全等)
!=
: 不等
比较结果为boolean类型,即只会得到 true 或 false
<script>
// =赋值
console.log( 2 =='2');//true
// 比较运算符有隐式转换,吧'2'转换为2 双等号 只判断值
console.log(2 ==='2'); //false
// 全等 判断值和数据类型一样才行
// 以后判断是否全等 用===
console.log(NaN===NaN);//不等于任何人 false
console.log(undefined ===null);//false
//不全等 对应 ===值和数据类型
console.log(3 !== '3');//true
//不等 对应== 值相等为真
console.log(3 != '3');//false
</script>
</body>
</html>
逻辑运算符
逻辑运算符用来解决多重条件判断
符号 | 名称 | 日常读法 | 特点 | 口诀 |
---|---|---|---|---|
&& | 逻辑与 | 并且 | 符号两边都为true结果才为true | 一假则假 |
|| | 逻辑或 | 或者 | 符号两边有一个true就为true | 一真则真 |
! | 逻辑非 | 取反 | true变false false变true | 真变假,假变真 |
<!-- &&与 并且,一假则假 -->
<!-- true && true -->
<!-- 逻辑或||有一个真就是真,全假则假 -->
<!-- 逻辑非 取反 真变假,假变真-->
<script>
let num=+ prompt('请输入一个值')
alert(num % 4 === 0 && num % 100 !==0)
</script>
</body>
</html>
运算符优先级
关系运算符也叫做比较运算符
if分支
if语句有三种使用:单分支、双分支、多分支
单分支
语法:
if(条件){
满足条件执行的代码
}
<!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>
//单分支语句
if(true){
console.log('执行语句');
}
if(0){
console.log('不执行');
}
// 除了0所有的数字都为真
if(''){
console.log('不执行');
}
// 除了''空字符串其余的为真
let score = +prompt('请输入您的分数')
if (score >=700){
alert('恭喜您考入清华')
}
</script>
</body>
</html>
双分支
语法:
if(条件){
满足条件执行的代码
}else{
不满足条件执行的代码
}
//需求用户输入,用户名:pink,密码:123456, 则提示登录成功,否则提示登录失败
// 示例代码
// 1. 用户输入
let uname = prompt('请输入用户名:')
let pwd = prompt('请输入密码:')
// 2. 判断输出
if (uname === 'pink' && pwd === '123456') {
alert('恭喜登录成功')
} else {
alert('用户名或者密码错误')
}
需求:让用户输入年份,判断这一年是闰年还是平年并弹出对应的警示框
分析:
①:能被4整除但不能被100整除,或者被400整除的年份是闰年,否则都是平年
②:需要逻辑运算符
// 1. 用户输入
let year = +prompt('请输入年份')
// 2. 判断输出
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
alert(`${year}年是闰年`)
} else {
alert(`${year}年是平年`)
}
多分支
释义:
先判断条件1,若满足条件1就执行代码1,其他不执行
若不满足则向下判断条件2,满足条件2执行代码2,其他不执行
若依然不满足继续往下判断,依次类推
若以上条件都不满足,执行else里的代码n
注:可以写N个条件,但这里演示只写2个
判断成绩单案例
需求:根据输入不同的成绩,反馈不同的评价
注:
①:成绩90以上是 优秀
②:成绩70~90是 良好
③:成绩是60~70之间是 及格
④:成绩60分以下是 不及格
<!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>
/* if(条件一){
代码1
}else if(条件二){
代码2
}else if(条件三){
代码3
}else{
不满足以上的代码
} */
// 90分以上 优秀
// 70-90 良好
// 60-70 及格
// 60以下 不及格
// 用户输入
let score =+ prompt('请输入您的成绩')
// 条件判断
if (score >=90){
alert('优秀')
} else if( score >=70){
alert('良好')
}else if( score>=60){
alert('及格')
}else{
alert('不及格')
}
</script>
</body>
</html>
三元运算符
语法:
条件 ? 满足条件
执行代码1 : 不满足条件执行代码2
// 三元运算符
// 条件 ? 代码1 : 代码2
console.log(3 > 5 ? 3 : 5)
if (3 < 5) {
alert('真的')
} else {
alert('假的')
}
// 三元写法
3 < 5 ? alert('真的') : alert('假的')
//
let sum = 3 < 5 ? 3 : 5
console.log(sum)// 3
求最大值案例
需求:用户输入2个数,控制台输出最大的值
分析:
①:用户输入2个数
②:利用三元运算符输出最大值
// 1. 用户输入
let num1 = +prompt('请您输入第一个数:')
let num2 = +prompt('请您输入第二个数:')
// 2. 判断输出-三元运算符
// if (num1 > num2) {
// alert(num1)
// } else {
// alert(num2)
// }
num1 > num2 ? alert(`最大值是: ${num1}`) : alert(`最大值是: ${num2}`)
// 加强 用户输入三个数字,找出最大的数字
三个数值比较大小案例
let num1 = +prompt('请输入第一个数字')
let num2 = +prompt('请输入第二个数字')
let num3 = +prompt('请输入第三个数字')
//三元:只能找出两个数字最大数
//res:得到num1和num2中最大的那个数字
let res = num1 > num2 ? num1 : num2
//得到res和num3的最大值
res = res > num3 ? res : num3
console.log(res)
<!-- 用户输入 -->
<script>
// let num1 =+ prompt('请您输入第一个数')
// let num2 = +prompt('请您输入第二个数')
// // 利用三元运算符比较
// num1 > num2 ? alert(num1) :alert(num2)
let num1 = +prompt('请您输入第一个数')
let num2 = +prompt('请您输入第二个数')
let num3 = +prompt('请您输入第三个数')
let res= num1>num2 ? num1 :num2
res=res >num3 ? res:num3 // 赋值给res,输出便利
console.log(res);
</script>
</body>
</html>
数字补0案例
需求:用户输入1个数,如果数字小于10,则前面进行补0, 比如 09 03 等
分析:
①:为后期页面显示时间做铺垫
②:利用三元运算符 补 0 计算
// 回顾
//let age = 10
// age = age + 1
// age 11
// 1. 用户输入
let num = prompt('请您输入一个数字:')
// 2. 判断输出- 小于10才补0 不小于10直接是num
num = num < 10 ? 0 + num : num
//num = num >= 10 ? num : 0 + num
alert(num)
<script>
//1. 用户输入
let num = prompt('请用户输入第一个数')
// 2.判断输出
// 小于10才补0 大于10 输出num
num = num < 10 ? 0 + num :num //赋值操作,便捷输出,
console.log(num);//console.log(num <0 ? 0+num :num);
</script>
switch语句
找到跟小括号里数据全等的case值,并执行里面对应的代码
若没有全等 === 的则执行default里的代码
例:数据若跟值2全等,则执行代码2
注意事项:
switch case语句一般用于等值判断,不适合于区间判断
switch case一般需要配合break关键字使用 没有break会造成case穿透
语法:
switch (表达式) {
case 值1:
代码1
break
case 值2:
代码2
break
case 值3:
代码3
break
default:
代码n
break
}
//示例:用户输入黑马学科编号,告诉用户学习什么学科 1-前端 2-PHP 3-java 4-UI
let subject = +prompt(
'请输入您要报名的学科编号,1-前端 2-PHP 3-java 4-UI'
)
switch (subject) {
case 1:
alert('恭喜你选择了2022年最有钱途的学科')
break
case 2:
alert('恭喜你选择了PHP学科')
break
case 3:
alert('恭喜你选择了Java学科')
break
case 4:
alert('恭喜你选择了UI学科')
break
default:
alert('脑子有包')
break
}
// 某种情况下,可以合理利用switch-case穿透现象来简化代码
// 什么时候需要省略case,合理利用穿透?
//答案:多个匹配值需要执行相同的代码
/* 用户输入月份,告诉用户什么季节
春季: 3 4 5
夏季: 6 7 8
秋季:9 10 11
冬季:12 1 2
*/
let month = +prompt('请输入月份')
switch (month) {
case 3:
case 4:
case 5:
alert('春季')
break
case 6:
case 7:
case 8:
alert('夏季')
break
case 9:
case 10:
case 11:
alert('秋季')
break
case 12:
case 1:
case 2:
alert('冬季')
break
default:
alert('你是外星人吗?')
break
}
简易版计算器
需求:用户输入2个数字,然后输入 + - * / 任何一个,可以计算结果
分析:
①:用户输入数字
②:用户输入不同算术运算符,可以去执行不同的运算 (switch)
// 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(`你干啥咧,请输入+-*/`)
}
循环
while循环
语法:
while (循环条件) {
重复执行的代码(循环体)
}
循环三要素:
1.变量起始值
2.终止条件(没有终止条件,循环会一直执行,造成死循环)
3.变量变化量(用自增或者自减)
/ 1. 变量的起始值
let i = 1
// 2. 终止条件
while (i <= 3) {
document.write('我要循环三次 <br>')
// 3. 变量的变化量
i++
}
让用户输入打印的个数案例
// 1. 变量的起始值
let end = +prompt('请输入次数:')
let i = 1
// 2. 终止条件
while (i <= end) {
document.write('我要循环三次 <br>')
// 3. 变量的变化量
i++
}
循环练习
页面输出1~100
let i = 1
while (i <= 100) {
document.write(`这是第${i}个数<br>`)
i++
}
2 页面输出1~100 累加和
let i = 1 // 变量的起始值
let sum = 0 // 累加和变量
while (i <= 100) {
// 把i 累加到 sum 里面
//sum = sum + i
sum += i
i++
}
console.log(sum) // 5050
3.页面输出1~100 偶数和
let i = 1
let sum = 0
while (i <= 100) {
// 筛选偶数 只有偶数才累加
if (i % 2 === 0) {
sum = sum + i
}
// 每次循环都要自加
i++
}
console.log(sum)
循环退出
continue
退出本次循环,一般用于排除或者跳过某一个选项的时候, 可以使用continue
break
退出整个循环,一般用于结果已经得到, 后续的循环不需要的时候可以使用
// break
let i = 1
while (i <= 10) {
console.log(i)
//break:吃到第五个包子吃饱了,后面的包子都不吃了。整个循环结束,立即执行循环后面的代码
if (i === 5) {
break // 退出循环
}
i++
}
console.log('吃完包子啦')
// continue
let i = 1
while (i <= 10) {
//continue:吃到第五个包子,吃到虫子了。第五个包子不吃,但是没吃饱后面包子继续吃。
//结束本次循环体,立即进入下一次循环判断
if (i === 5) {
i++
continue
}
console.log(`我正在吃第${i}个包子`)
i++
}
页面弹框案例
需求:页面弹出对话框,‘你爱我吗’,如果输入‘爱’,则结束,否则一直弹出对话框
分析:
①:循环条件永远为真,一直弹出对话框
②:循环的时候,重新让用户输入
③:如果用户输入的是: 爱,则退出循环 (break)
while (true) {
let str = prompt('你爱我吗')
// 退出条件 爱
if (str === '爱') {
break
}
}
简易ATM机
需求:用户可以选择存钱、取钱、查看余额和退出功能
分析:
①:循环的时候,需要反复提示输入框,所以提示框写到循环里面
②:退出的条件是用户输入了 4,如果是4,则结束循环,不在弹窗
③:提前准备一个金额预先存储一个数额
④:取钱则是减法操作, 存钱则是加法操作,查看余额则是直接显示金额
⑤:输入不同的值,可以使用switch来执行不同的操作
// 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
// money += +prompt('请输入存款金额')
break
case 2:
// 存钱
let qu = +prompt('请输入取款金额')
money = money - qu
// money -= +prompt('请输入存款金额')
break
case 3:
// 存钱
alert(`您的银行卡余额是${money}`)
break
}
}
if 和while的区别
if 多分支语句和 switch的区别:
共同点
都能实现多分支选择, 多选1
大部分情况下可以互换
区别:
switch…case语句通常处理case为比较确定值的情况,而if…else…语句更加灵活,通常用于范围判断(大于,等于某个范围)。
switch 语句进行判断后直接执行到程序的语句,效率更高,而if…else语句有几种判断条件,就得判断多少次
switch 一定要注意 必须是 === 全等,一定注意 数据类型,同时注意break否则会有穿透效果
结论:
当分支比较少时,if…else语句执行效率高。
当分支比较多时,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 i = 1
// let sum= 0
// while(i<=1000){
// sum= sum+ i
// i++
// }
// document.write(sum)
let num = 100
while(num>=100 && num<=200){
if(num % 6 === 0){
document.write(`${num}<br>`)
}
num++
}
/*
// 用户输入
let num = +prompt('请输入一个值')
let i= 1
let sum =0
while(i<=num){
sum= sum+i
i++
}
document.write(`和是${sum}`)
*/
</script>
</body>
</html>