三、运算符、数据类型转换(显式、隐式)、语句(if、三元、switch、while、for)

原创已于 2024-11-12 20:34:29 修改 · 564 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2024-11-12 18:37:11 首次发布

就业专栏收录该内容

29 篇文章

订阅专栏

1. 运算符

1.1 自增自减

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    // 单独使用时，前置++和后置++无差别，开发中一般单独使用
    // 参与运算时有差别，++i先自增再参与运算，i++先参与运算再自增

    // 1. 单独使用
    let i = 5
    let j = 5
    console.log(i, j); // 5 5
    i++
    ++j
    console.log(i, j); // 6 6

    // 2. 参与运算时
    let a = i++
    let b = ++j
    console.log(a, b); // 6 7

  </script>
</body>

</html>

1.2 比较运算符

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    比较运算符,返回值为布尔类型 true/false
      > 左边是否大于右边
      < 左边是否小于右边
      >= 左边是否大于或等于右边
      <= 左边是否小于或等于右边
      === 左右两边是否类型和值都相等
      == 左右两边值是否相等
      != 左右值不相等
      !== 左右两边是否不全等
  -->
  <!-- 
    注意：
      = 赋值
      == 判断值是否相等
      === 判断是否全等(值和数据类型)
  -->
  <script>
    console.log(3 > 5); // f
    console.log(3 < 5); //t

    console.log(3 == '3'); //t
    console.log(3 === '3'); //f

    console.log(3 != '3'); //f
    console.log(3 !== '3'); //t

  </script>
</body>

</html>

1.3 逻辑运算符

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    与&& 一假则假
    或|| 一真则真
    非！
    
    优先级为！&& ||
  -->
  <script>
    // 逻辑中断/短路运算
    // && 遇到false 后面不继续执行
    console.log(3 > 5 && 5 < 10) //f
    console.log(0 && 10) //0
    console.log(1 && 10) //10

    // || 遇到true 后面不继续执行
    console.log(3 < 5 || 5 > 10) //t
    console.log(3 || 0) //3
    console.log(0 || 3) //3
  </script>
</body>

</html>

案例1-判断数字

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    判断一个数是4的倍数，且不是100的倍数
    需求：用户输入一个，判断这个数是4的倍数，并且不是100的倍数，
    如果是则页面弹出true，否则弹出false
  -->
  <script>
    let num = +prompt('请输入一个数字')
    alert(num % 4 === 0 && num % 100 !== 0)
  </script>
</body>

</html>

1.4 运算符优先级

2. 数据类型转换

2.1 转数字型

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    为什么需要类型转换？
    使用表单、prompt获取过来的数据默认是字符串类型的，
    此时就不能直接简单的进行加法运算
  -->
  <!-- 
    1. 显式转换(明确) 程序员写代码转换
    2. 隐式转换(不明确) 某些运算符被执行时，系统内部自动将数据类型进行转换
  -->

  <script>
    // 1. 字符串转数字
    let str1 = '1.1'
    let str2 = '1.9'
    let str3 = '1.9aa'
    let str4 = 'jqk111'
    // 保留小数转换 parseFloat
    console.log(parseFloat(str1)) // 1.1
    console.log(parseFloat(str2)) // 1.9
    console.log(parseFloat(str3)) // 1.9
    console.log(parseFloat(str4)) // NaN
    // 取整转换 parseInt
    console.log(parseInt(str1)) // 1
    console.log(parseInt(str2)) // 1
    console.log(parseInt(str3)) // 1
    console.log(parseInt(str4)) // NaN
    // Number
    console.log(typeof Number(str1)) // number
    console.log(Number(str2)) // 1.9
    console.log(Number(str3)) // NaN 不是一个数字

    // 2. 布尔型转数字
    console.log(Number(true)); // 1
    console.log(Number(false)); // 0

    // 3. undefined
    console.log(Number(undefined)); // NaN

    // 4. null
    console.log(Number(null)); // 0
  </script>
</body>

</html>

2.2 转字符串型

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 数字转字符串 -->
  <script>
    let num1 = 1.1
    let num2 = 1.9
    let num3 = 2
    let num4 = 1.95

    // 1. String
    console.log(String(num1)) // 1.1
    console.log(typeof String(num1)) // string

    // 2. toString(进制)
    console.log(num1.toString()) // 1.1
    console.log(num2.toString()) // 1.9
    console.log(num3.toString()) // 2
    console.log(num3.toString(2)) // 10

    // 3. toFixed(保留小数位数) 默认不保留 四舍五入
    console.log(num1.toFixed()) // 1
    console.log(num2.toFixed()) // 2
    console.log(num3.toFixed()) // 2
    console.log(num4.toFixed()) // 2
    console.log(num1.toFixed(1)) // 1.1
    console.log(num2.toFixed(1)) // 1.9
    console.log(num3.toFixed(1)) // 2.0
    console.log(num4.toFixed(1)) // 1.9
    console.log(num4.toFixed(2)) // 1.95

  </script>
</body>

</html>

2.3 转布尔型

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 转布尔型 -->
  <script>
    //不正常的数据转为false，其他的转为true
    console.log(Boolean(0)) // f
    console.log(Boolean(NaN)) // f
    console.log(Boolean(undefined)) // f
    console.log(Boolean(123)) // t
    console.log(Boolean('123')) // t
  </script>
</body>

</html>

2.4 隐式转换

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 隐式转换 系统内部自动转换（鸿蒙中无 → 强类型语言） -->
  <script>
    // 1. 转字符串 +字符串拼接
    console.log('1' + 2); // 字符串12

    // 2. 转为数字型 - * / % > ==等 , 字符串前'+'(正号)转为数字
    console.log(+('1' + 2)) // 数字12
    console.log('10' - '5') // 数字5
    console.log('10' * '5') // 数字50
    console.log('3' < '5') // true

    // 3. 转布尔型
    console.log(!0) // true

  </script>
</body>

</html>

3. 语句

3.1 if语句

单分支、双分支、多分支

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    表达式和语句：
    表达式：可以被求值的代码，并将其计算出一个结果
    语句：一段可以执行的代码，是一个行为（如分支语句和循环语句）
  -->
  <!-- 
    程序三大流程控制语句：顺序结构、分支结构(选择执行)、循环结构(重复执行)
  -->
  <script>
    let age = prompt('请输入您的年龄')
    if (age >= 18) {
      alert('允许进入网吧')
    } else {
      alert('未成年禁止进入网吧游玩')
    }
  </script>
</body>

</html>

案例2-简易版登录

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    判断用户登录案例
    需求：用户输入，用户名：刘德华，密码：123456，
    则提示登录成功，否则提示登录失败
  -->
  <script>
    // 1. 用户输入
    let uname = prompt('请输入您的用户名')
    let password = prompt('请输入您的密码')
    // 2. 程序判断
    if (uname === '刘德华' && password === '123456') {
      alert('哦耶！登陆成功')
    } else {
      alert(`
      sorry~登陆失败
      用户名或密码错误
      `)
    }
  </script>
</body>

</html>

案例3-成绩评语

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    输入成绩输出评语案例
    需求：根据输入不同的成绩，反馈不同的评价
      注：
      ①：成绩90以上是 优秀
      ②：成绩70~90是 良好
      ③：成绩是60~70之间是 及格
      ④：成绩60分以下是 不及格
  -->
  <script>
    let score = prompt('请输入您的成绩')

    if (score >= 90) {
      alert('优秀')
    } else if (score >= 70) {
      alert('良好')
    } else if (score >= 60) {
      alert('及格')
    } else {
      alert('不及格(っ °Д °;)っ')
    }
  </script>
</body>

</html>

3.2 三元运算符

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
    简单双分支，可以使用三元运算符，写起来比if简单
  -->
  <script>
    // 用户输入2个数，页面弹出最大的值
    let num1 = prompt('请输入数字1')
    let num2 = prompt('请输入数字2')
    alert(`较大值为${num1 > num2 ? num1 : num2}`)
  </script>
</body>

</html>

案例4-数字补0

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    用户输入1个数，如果数字小于10，则前面进行补0，比如0903等
  -->
  <script>
    let num = prompt('请输入数字：')
    alert(num < 10 ? '0' + num : num)
  </script>
</body>

</html>

3.3 switch语句

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    switch 用于判断全等===
    找到跟小括号里数据全等的case值，并执行里面对应的代码
    若没有全等 === 的则执行default里的代码

    1. switch case语句一般用于等值判断, if 适合于区间判断
    2. switch case一般需要配合break关键字使用 没有break会造成case穿透
    3. if 多分支语句开发要比switch更重要，使用也更多
  -->
  <script>
    let fruit = prompt('请输入要查找的水果:')
    switch (fruit) {
      case '苹果':
        alert('苹果2块钱一斤')
        break
      case '香蕉':
        alert('香蕉3块钱一斤')
        break
      case '榴莲':
        alert('榴莲4块钱一斤')
        break
      default:
        alert('没有您要找的水果')
    }
  </script>
</body>

</html>

3.4 while循环

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    // 循环三要素：初始值 条件 变化量(控制循环的次数)
    let i = 1
    while (i <= 3) {
      document.write(`第${i}次循环<br>`)
      i++
    }
  </script>
</body>

</html>

案例5-输出1-100及其累加和

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p></p>

  <script>
    // 输出1-100
    let i = 1
    while (i <= 100) {
      // 控制台输出
      // console.log(i)
      // 只有一个选择器→输出被覆盖
      // document.querySelector('p').innerHTML = i // 100
      document.querySelector('p').innerHTML += i //12345678910...
      i++
    }

    // 输出1-100之间的偶数
    let j = 1
    while (j <= 100) {
      if (j % 2 === 0) {
        document.write(j + '<br>')
      }
      j++
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    // 1-100累加和
    /* let i = 1
    let sum = 0
    while (i <= 100) {
      sum += i
      i++
    }
    document.write(`1-100累加和为${sum}`) */

    // 1-100偶数累加和
    let i = 1
    let sum = 0
    while (i <= 100) {
      if (i % 2 === 0) {
        sum += i
      }
      i++
    }
    document.write(`1-100偶数累加和为${sum}`)
  </script>
</body>

</html>

3.5 for循环

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    for循环好处：把声明初始值、循环条件、变量计数写到一起，让人一目了然
    是最常使用的循环形式
  -->
  <!-- 
    for（初始值;循环条件;变量计数）{
      //满足条件执行的循环体
    }
  -->
  <script>
    // for 1-100累加和
    /* let sum = 0 不能放到循环体内
    若放到{}内会每次都重置为0，达不到累加效果 */
    /* 
      for循环()内已写变量计数i++，{}内不需再写，与while不同
    */
    let sum = 0
    for (let i = 1; i <= 100; i++) {
      sum += i
    }
    document.write(sum)
  </script>
</body>

</html>

3.6 循环中断

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    1. 中止循环
      break 中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率） 
      continue 中止本次循环，一般用于排除或者跳过某一个选项的时候
    2. 无限循环
      while(true) 来构造“无限”循环，需要使用break退出循环。
      for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环
  -->
  <script>
    // 吃五个苹果 假设第三个有虫子
    for (let i = 1; i <= 5; i++) {
      document.write(`正在吃第${i}个苹果<br>`)

      if (i === 3) {
        document.write(`有虫子，不吃辣（＞人＜；）<br>`)

        break // 退出整个循环
        // continue // 退出当前循环
      }
    }
  </script>
</body>

</html>

案例6-简易ATM存取款机

<!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>综合案例-ATM存取款机</title>
  <link rel="stylesheet" href="./css/alert.css">
</head>

<body>
  <div role="alert" class="el-alert">
    <span class="el-alert__title" id="title"> 文字内容： </span>
  </div>

  <!-- 秋姐课上方法 -->
  <script>
    let balance = 5000
    for (; ;) {
      let num = +prompt(`
        请选择您的操作：
          1. 取款
          2. 存款
          3. 查看余额
          4. 退出系统
      `)
      if (num === 1) {
        let qu = +prompt('取出金额为：')
        balance -= qu
        alert(`已成功取出${qu}元，卡内现有余额为${balance}`)
      } else if (num === 2) {
        let cun = +prompt('存入金额为：')
        balance += cun
        alert(`已成功存入${cun}元，卡内现有余额为${balance}`)
      } else if (num === 3) {
        alert(`卡内现有余额为${balance}`)
      } else if (num === 4) {
        alert('退出系统')
        document.querySelector('.el-alert__title').innerHTML = `您的银行卡余额为 ${balance} 元`
        break
      } else {
        alert('请输入上述操作中所对应的数字')
      }
    }
  </script>

  <!-- 自做 -->
  <!-- <script>
    // 死循环
    // while(true){}
    // for(;;){}

    // 卡内原有金额
    let balance = 3000
    for (; ;) {
      let num = +prompt(`
        请选择您的操作：
          1. 取款
          2. 存款
          3. 查看余额
          4. 退出系统
      `)

      if (num === 4) {
        // 此次练习中的错误 使用类选择器时类名前要加. 如.el-alert__title
        document.querySelector('.el-alert__title').innerHTML = `您的银行卡余额为 ${balance} 元`
        break
      }

      switch (num) {
        case 1:
          let qu = +prompt('取出金额为：')
          balance -= qu
          alert(`已成功取出${qu}元，卡内现有余额为${balance}`)
          break
        case 2:
          let cun = +prompt('存入金额为：')
          balance += cun
          alert(`已成功存入${cun}元，卡内现有余额为${balance}`)
          break
        case 3:
          alert(`卡内现有余额为${balance}`)
          break
        default:
          alert('请输入上述操作中所对应的数字')
      }

    }
  </script> -->

  <!-- <script>
    // 死循环
    // while(true){}
    // for(;;){}

    // 卡内原有金额
    let balance = 3000
    for (; ;) {
      let num = +prompt(`
        请选择您的操作：
          1. 取款
          2. 存款
          3. 查看余额
          4. 退出系统
      `)

      switch (num) {
        case 1:
          let qu = +prompt('取出金额为：')
          balance -= qu
          alert(`已成功取出${qu}元，卡内现有余额为${balance}`)
          break
        case 2:
          let cun = +prompt('存入金额为：')
          balance += cun
          alert(`已成功存入${cun}元，卡内现有余额为${balance}`)
          break
        case 3:
          alert(`卡内现有余额为${balance}`)
          break
        case 4:
          document.querySelector('.el-alert__title').innerHTML = `您的银行卡余额为 ${balance} 元`
          break
        default:
          alert('请输入上述操作中所对应的数字')
      }

      if (num === 4) {
        // document.querySelector('el-alert__title').innerHTML = `您的银行卡余额为 ${balance} 元`
        break
      }
    }
  </script> -->
</body>

</html>

4. 作业

4.1 三个数中最大值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    创建三个变量，保存三个数字，然后比较三个数的最大值
  -->
  <script>
    let num1 = prompt('请输入数字1')
    let num2 = prompt('请输入数字2')
    let num3 = prompt('请输入数字3')

    alert(`这三个数中最大值为：${(num1 > num2 ? num1 : num2) > num3 ? (num1 > num2 ? num1 : num2) : num3}`)
  </script>
</body>

</html>

4.2 判断时间阶段

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    判断时间阶段。
    比如: 用户输入12点 弹出中午好
          用户输入18点 弹出傍晚好 
          用户输入23点 弹出深夜好
  -->
  <script>
    let time = +prompt('请输入几点？（12/18/23）')
    if (time === 12) {
      alert('中午好！')
    } else if (time === 18) {
      alert('傍晚好！')
    } else if (time === 23) {
      alert('深夜好！')
    } 
  </script>
</body>

</html>

4.3 判断奇数偶数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 用户输入一个数，来判断是奇数还是偶数(能被2整除的数是偶数） -->
  <script>
    let num = +prompt('请输入数字：')
    if (num) {
      if (num % 2 === 0) {
        alert(`${num}是偶数`)
      } else {
        alert(`${num}是奇数`)
      }
    } else {
      alert('请输入非零数字哦')
    }
  </script>
</body>

</html>

4.4 抽奖活动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    抽奖活动 幸运数字是6
    用户有三次机会三次之内输入6 则提示恭喜中奖 不再弹出
    三次都没成功 则失败
  -->
  <script>

    for (let i = 1; i <= 3; i++) {
      let num = +prompt('请输入抽奖数字：')
      if (num === 6) {
        alert('恭喜中奖！！！')
        break
      }
    }
  </script>
</body>

</html>

4.5 星期几

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 根据用户输入的数值(数字1到数字7），返回星期几(用switch) -->
  <script>
    let num = +prompt('请输入一位1-7之间的数字')
    switch (num) {
      case 1:
        alert('星期一')
        break
      case 2:
        alert('星期二')
        break
      case 3:
        alert('星期三')
        break
      case 4:
        alert('星期四')
        break
      case 5:
        alert('星期五')
        break
      case 6:
        alert('星期六')
        break
      case 7:
        alert('星期日')
        break
    }
  </script>
</body>

</html>

4.6 存取款机

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    存取款机:
      用户卡里有100元
      弹出输入框 当用户输入数字
      1存钱: 再弹出输入框 输入存款金额 alert(显示余额)
      2取钱：用余额－取款金额  如果小于0则提示用户"哥没了～＂反之则正常相减再显示余额
  -->
  <script>
    let money = 100
    let num = +prompt(`
        请选择您的操作：
          1. 存钱
          2. 取钱
      `)
    switch (num) {
      case 1:
        let cun = +prompt('请输入存款金额')
        alert(`银行卡余额为${money + cun}`)
        break
      case 2:
        let qu = +prompt('请输入取款金额')
        if (money - qu < 0) {
          alert('滴滴--- 您卡内余额不足～ 取款失败')
        } else {
          alert(`银行卡余额为${money - qu}`)
        }
        break
      default:
        alert('请输入上述所提示的正确操作数字')
    }
  </script>
</body>

</html>