零基础学JavaScript第二天

179 阅读3分钟

1.运算符

1.1赋值运算符

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

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

其它赋值运算符:+=,-=,*=,/=,%=;使用这些运算符可以在对变量赋值时进行快速操作 js let num = 1 // 采取赋值运算符 // num = num + 1 // num += 1 num += 3 console.log(num)

1.2一元运算符

一元运算符:正负号

前置自增:++i

后置自增:i++ 前置自增和后置自增单独使用没有区别

1.3比较运算符

应用场景:比较两个数据大小、是否相等

>: 左边是否大于右边

<: 左边是否小于右边

>=: 左边是否大于或等于右边

<=: 左边是否小于或等于右边

==: 左右两边值是否相等

===: 左右两边是否类型和值都相等(全等)

!==: 左右两边是否不全等(不全等)

!=: 不等

比较结果为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('-------------------------')

1.4逻辑运算符

Snipaste_2022-05-23_14-11-06.png

	// 1.逻辑与 一假则假 二元运算符
    console.log(true && true)
    console.log(false && true)
    console.log(3 < 5 && 3 > 2)
    console.log(3 < 5 && 3 < 2)
    console.log('-----------------')
    // 2 逻辑或 一真则真 二元运算符
    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.5运算符优先级

Snipaste_2022-05-23_14-13-50.png

2.语句

2.1表达式和语句

表达式是可以被求值的代码,JavaScript 引擎会将其计算出一个结果。(简单理解表达式就是一个式子)

语句是一段可以执行的代码。(比如: prompt() 可以弹出一个输入框)

2.2分支语句

以前我们写的代码,写几句就从上往下执行几句,这种叫顺序结构

有的时候要根据条件选择执行代码,这种就叫分支结构

某段代码被重复执行,就叫循环结构

2.3if分支

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

2.3.1单分支

语法:
if(条件){
    满足条件执行的代码
} 
 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('恭喜考得高分')
    }

2.3.2双分支

释义:

先判断条件1,若满足条件1就执行代码1,其他不执行

若不满足则向下判断条件2,满足条件2执行代码2,其他不执行

若依然不满足继续往下判断,依次类推

若以上条件都不满足,执行else里的代码n

注:可以写N个条件,但这里演示只写2个

语法:
    if(条件1){
        代码1
    }else if (条件2){
		代码2
    }else if (条件3){
		代码3
    }else{
		代码n
    }
语法:
if(条件){
    满足条件执行的代码
}else{
   不满足条件执行的代码
} 
//需求用户输入,用户名:amidn,密码:123456, 则提示登录成功,否则提示登录失败
// 示例代码
// 1. 用户输入
    let uname = prompt('请输入用户名:')
    let pwd = prompt('请输入密码:')
    // 2. 判断输出
    if (uname === 'amidn' && pwd === '123456') {
      alert('恭喜登录成功')
    } else {
      alert('用户名或者密码错误')
    }

2.4三元运算符

语法:

条件 ? 满足条件执行代码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.5 switch语句

找到跟小括号里数据全等的case值,并执行里面对应的代码

若没有全等 === 的则执行default里的代码

例:数据若跟值2全等,则执行代码2

注意事项:

1.switch case语句一般用于等值判断,不适合于区间判断

2.switch case一般需要配合break关键字使用 没有break会造成case穿透

语法:
switch (表达式) {
      case1:
        代码1
        break  
      case2:
        代码2
        break  
      case3:
        代码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
    }

3.循环

循环作用:重复执行一些操作,如while循环 for循环.

3.1 while循环

语法:
while (循环条件) {
    重复执行的代码(循环体)
}

跟if语句很像,都要满足小括号里的条件为true才会进入 循环体 执行代码

while大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到小括号判断条件,直到括号内条件不满足,即跳出

循环三要素:

1.变量起始值

2.终止条件(没有终止条件,循环会一直执行,造成死循环)

3.变量变化量(用自增或者自减)

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

3.2退出循环

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++

    }

if 多分支语句和 switch的区别:

  1. 共同点

    • 都能实现多分支选择, 多选1
    • 大部分情况下可以互换
  2. 区别:

    • switch…case语句通常处理case为比较确定值的情况,而if…else…语句更加灵活,通常用于范围判断(大于,等于某个范围)。

    • switch 语句进行判断后直接执行到程序的语句,效率更高,而if…else语句有几种判断条件,就得判断多少次

    • switch 一定要注意 必须是 === 全等,一定注意 数据类型,同时注意break否则会有穿透效果

    • 结论:

      • 当分支比较少时,if…else语句执行效率高。
      • 当分支比较多时,switch语句执行效率高,而且结构更清晰。