javaScript (二)

最新推荐文章于 2024-08-22 10:45:33 发布

牵手不牵薛之谦

最新推荐文章于 2024-08-22 10:45:33 发布

阅读量665

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_53172414/article/details/126109786

版权

流程控制

学习目标

1.掌握常见运算符，为程序“能思考”做准备

2.掌握分支语句，让程序具备判断能力

3.掌握循环语句，让程序具备重复执行能力

运算符

赋值运算符

赋值运算符：对变量进行赋值的运算符

赋值运算符(=)将等号右边的值赋予给左边, 要求左边必须是一个容器

其它赋值运算符:+=,-=,*=,/=,%=;使用这些运算符可以在对变量赋值时进行快速操作

    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 i = 1
 console.log(++i + 1)// 3
//后置自增：先使用再自加（记忆口诀：++在后 后加） 
 let i = 1
 console.log(i++ + 1) //2
//面试题  了解即可
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 计算

// 回顾
//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)

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. 准备一个总的金额 要写到循环的外面,不然每次循环都会重置
    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语句执行效率高，而且结构更清晰。