运算符
赋值运算符
赋值运算符:对变量进行赋值的运算符
赋值运算符(=
)将等号右边的值赋予给左边, 要求左边必须是一个容器
其它赋值运算符:+=,-=,*=,/=,%=
;使用这些运算符可以在对变量赋值时进行快速操作
let num = 1 // 采取赋值运算符 // num = num + 1 // num += 1 num += 3 console.log(num)
一元运算符
一元运算符:正负号
前置自增:++i
后置自增:i++
前置自增和后置自增单独使用没有区别
// 1. 前置自增 let i = 1 ++i console.log(i)//2 // 2. 后置自增 let i = 1 i++ console.log(i)//2
前置自增和后置自增如果参与运算就有区别: (难点,但是了解即可)
let num = 10 // 前++ // 分2步:1. 先将自己的值进行 加1 操作 num = num + 1 = 10 + 1 // 2. 然后再将变量的值赋值给 等号左边的变量名 res = num = 11 let res = ++num console.log(res) console.log(num) let num1 = 10 // 后++ // 分2步:1. 先将自己的值进行 赋值给 等号左边的变量名 res1 = num1 = 10 // 2. 然后将自己的值进行 加1 操作 num1 = num1 + 1 = 10 + 1 let res1 = num1++ console.log(num1) console.log(res1) let i = 1 // 前++ 参与运算 先加1 后再参与运算 // i = i + 1 = 2 + 2 // console.log(++i + 2) // console.log(i) // 后++ 参与运算 先参与运算 后再 自己+ 1 // i = 1 + 2 = 3 console.log(i++ + 2) console.log(i) //面试题 了解即可 let i = 1 console.log(i++ + ++i + i)//7
比较运算符
应用场景:比较两个数据大小、是否相等
>
: 左边是否大于右边
<
: 左边是否小于右边
>=
: 左边是否大于或等于右边
<=
: 左边是否小于或等于右边
==
: 左右两边值是否相等
===
: 左右两边是否类型和值都相等(全等)
!==
: 左右两边是否不全等(不全等)
!=
: 不等
比较结果为boolean类型,即只会得到 true 或 false
= 单等是赋值
== 是判断
=== 是全等
开发中判断是否相等,强烈推荐使用 ===
console.log(3 > 5) console.log(3 >= 3) console.log(2 == 2) // 比较运算符有隐式转换 把'2' 转换为 2 双等号 只判断值 console.log(2 == '2') // true console.log(undefined === null) // === 全等 判断 值 和 数据类型都一样才行 // 以后判断是否相等 请用 === console.log(2 === '2') console.log(NaN === NaN) // NaN 不等于任何人,包括他自己 //不全等 console.log(2 !== '2') // true // 不等 console.log(2 != '2') // false console.log('-------------------------') console.log('a' < 'b') // true console.log('aa' < 'ab') // true console.log('aa' < 'aac') // true console.log('-------------------------')
逻辑运算符
逻辑运算符用来解决多重条件判断
符号 | 名称 | 日常读法 | 特点 | 口诀 |
---|---|---|---|---|
&& | 逻辑与 | 并且 | 符号两边都为true结果才为true | 一假则假 |
|| | 逻辑或 | 或者 | 符号两边有一个true就为true | 一真则真 |
! | 逻辑非 | 取反 | true变false false变true | 真变假,假变真 |
// 1.逻辑与 一假则假 二元运算符 // 有的丈母娘招女婿: 有车 且 有房 且 有存款。 必须要全部都满足,只要有一个不满足就是false console.log(true && true) console.log(false && true) console.log(3 < 5 && 3 > 2) console.log(3 < 5 && 3 < 2) console.log('-----------------') // 2 逻辑或 一真则真 二元运算符 //我的丈母娘 : 有车 或者 有房 或者 有存款。 只要有任意一个满足就为true console.log(true || true) console.log(false || true) console.log(false || false) console.log('-----------------') // 3 逻辑非 取反 一元运算符 //个别丈母娘招女婿: 只要不是女的(取反) console.log(!true) console.log(!false) console.log('-----------------') let num = 6 console.log(num > 5 && num < 10) console.log('-----------------')
逻辑与案例
// 1. 用户输入 let num = +prompt('请输入一个数字:') // 2. 弹出结果 alert(num % 4 === 0 && num % 100 !== 0)
运算符优先级
一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
语句
表达式和语句
表达式是可以被求值的代码,JavaScript 引擎会将其计算出一个结果。(简单理解表达式就是一个式子)
语句是一段可以执行的代码。(比如: prompt() 可以弹出一个输入框)
分支语句
以前我们写的代码,写几句就从上往下执行几句,这种叫顺序结构
有的时候要根据条件选择执行代码,这种就叫分支结构
某段代码被重复执行,就叫循环结构
if分支
if语句有三种使用:单分支、双分支、多分支
单分支
语法: if(条件){ 满足条件执行的代码 }
括号内的条件为true时,进入大括号里执行代码
小括号内的结果若不是布尔类型时,会发生隐式转换转为布尔类型
如果大括号只有一个语句,大括号可以省略,但是,俺们不提倡这么做~
示例代码:
if(false){ console.log('执行语句:金波真帅') } if(true){ console.log('执行语句:金波真帅') } if (2 === '2') { console.log('执行语句:金波真帅') } // 1. 除了0 所有的数字都为真 if (0) { console.log('执行语句:金波真帅') } // 2.除了 '' 所有的字符串都为真 true if ('') { console.log('执行语句:金波真帅') } if ('金波老师') { console.log('执行语句:金波真帅') } /* 课堂案例*/ // 1. 用户输入 let score = +prompt('请输入成绩') // 2. 进行判断输出 if (score >= 700) { alert('恭喜考入黑马程序员') }
双分支
语法: 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个
语法: if(条件1){ 代码1 }else if (条件2){ 代码2 }else if (条件3){ 代码3 }else{ 代码n }
需求:根据输入不同的成绩,反馈不同的评价
注:
①:成绩90以上是 优秀
②:成绩70~90是 良好
③:成绩是60~70之间是 及格
④:成绩60分以下是 不及格
示例代码: // 1. 用户输入 let score = +prompt('请输入成绩:') // 2. 判断输出 if (score >= 90) { alert('成绩优秀,宝贝,你是我的骄傲') } else if (score >= 70) { alert('成绩良好,宝贝,你要加油哦~~') } else if (score >= 60) { alert('成绩及格,宝贝,你很危险~') } else { alert('成绩不及格,宝贝,我不想和你说话,我只想用鞭子和你说话~') }
三元运算符
其实是比 if 双分支更简单的写法,可以使用 三元表达式
语法:
条件 ? 满足条件执行代码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)
数字补0案例
需求:用户输入1个数,如果数字小于10,则前面进行补0, 比如 09 03 等
分析:
①:为后期页面显示时间做铺垫
②:利用三元运算符 补 0 计算
// 1. 用户输入 let num = prompt('请您输入一个数字:') // 2. 判断输出- 小于10才补0 不小于10直接是num num = num < 10 ? 0 + num : num //num = num >= 10 ? num : 0 + num alert(num)
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循环 for循环.
while循环
语法: while (循环条件) { 重复执行的代码(循环体) }
跟if语句很像,都要满足小括号里的条件为true才会进入 循环体 执行代码
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
页面输出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. 准备一个总的金额 //money这个变量必须要在循环外面声明。 因为如果你在循环里面声明,循环每走一次就会赋值100,无法实现存储功能 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 多分支和switch的区别
if 多分支语句和 switch的区别:
-
共同点
-
都能实现多分支选择, 多选1
-
大部分情况下可以互换
-
-
区别:
-
switch…case语句通常处理case为比较确定值的情况,而if…else…语句更加灵活,通常用于范围判断(大于,等于某个范围)。
-
switch 语句进行判断后直接执行到程序的语句,效率更高,而if…else语句有几种判断条件,就得判断多少次
-
switch 一定要注意 必须是 === 全等,一定注意 数据类型,同时注意break否则会有穿透效果
-
结论:
-
当分支比较少时,if…else语句执行效率高。
-
当分支比较多时,switch语句执行效率高,而且结构更清晰
-
-