javaScript 03 分享

Amani
115 阅读2分钟

JavaScript 基础 （03）

运算符

算术运算符

  • **+：**加法运算

     console.log(num1 + num2);

  • -：减法运算

    console.log(num1 - num2);

  • ***：**乘法运算

    console.log(num1 * num2);

  • **/：**除法运算

    console.log(num1 / num2);

  • %：除余

    1. 求余 = 取模 获取整数
    2. 除法运算 获取除法元素后 剩下的余数
    console.log(50 % 5);

计算圆的面积

  • π *r的平方

  • 在js中通过 ：Math.PI

    

        let r = prompt('请输入圆的半径' )
        console.log(Math.PI * r * r);

赋值运算符

  • 等号右边的值赋予给左边，要求左边必须是一个变量

  • +=

    nun1 += 6

  • -=

    nun1 -=2

  • *=

    nun1 *=8

  • /=

    nun1 /=3

  • 赋值运算符 += 他们不能用空格隔开

一元运算符

  • 自增 ++ 让变量的值**+1**

      let i1 = 1
        console.log(i1++ + 2 ) // 3

  • 自减 -- 让变量的值**-1**

    let i1 = 6
        console.log(i1-- + 2 )// 5

  • 前置自增 ++i 先自己加在使用

        
        let i = 1
        console.log(++i + 2); // 4
        //i+1 先自加
        //i + 2 然后在使用

面试易出提

1648380307222.png

      let i =1
        console.log(i++ + ++i + i)
        //                  3   3
        //先不管 i++  然后拿i来计算
        //i+2 = 3  输出 3
        //i + 3 + 3 =7

比较运算符

  • console.log(3 > 2)// 左边大于右边
  • console.log(3 < 2)// 左边小于右边
  • console.log(3 >= 2)// 左边大于或者等于右边
  • console.log(3 <= 2)// 左边小于或者等于右边
  • console.log(3 == 2)// 左边右边是相等
  • console.log(3 == =2)// 左右两边是否类型和值都相等
  • console.log(3 ！== 2)// 左边两边是否不全等
  • 比较结构为boolean类型 ，只会得到true 或 false

逻辑运算符

符号名称日常读法特点口诀
&&逻辑与并且符号两边都为true结果才为true一假则假
||逻辑或或者符号两边有一个true就为true一真则真
！逻辑非取反true变false false变true真变假，假变真

逻辑运算符里的短路

  • 只存在与 && 和 || 中，当满足一定条件会让右边代码不执行

    符号短路条件
    &&左边为false就短路
    ||左边为true就短路
console.log(false && 20) //false
小案例 练习
  • 判断一个数是4的倍数， 且不是100的倍数
  • 需求：用户输入一个，判断这个数能被4整除，但是不能被100整除
<!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 th = prompt('输入一个数')
        console.log((th % 4 ===0) && (th % 100 !==0) );



        //要知道 逻辑与 还是 逻辑或  
        //数一数有几个条件   2
        //console.log((条件一)&&(条件二))
    </script>
</body>
</html>
思维导图

1648386849725.png

1648386872184.png

运算符优先级

1648384880612.png

语句

分支语句

程序三大流程控制语句

  • 以前我们写的代码， 写几句就从上往下执行几句，这种叫顺序结构
  • 有的时候要根据条件选择执行代码， 这就叫分支结构
  • 某段代码被重复执行，就叫循环结构

1648385645159.png

分支语句

  • if 语句

  • 单分支使用语法

    括号内的条件为true ， 进入大括号里执行代码

    小括号内的结果若不是布尔类型是，会发生隐式转换转为布尔类型

<!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 num = +prompt('请输入你的分数')
        if(num > 700){
            alert('老板老板，恭喜恭喜')
        }
      
    </script>
</body>
</html>

  • 双分支 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>
        let num =+prompt("你的分数")
        if(num > 700){
            alert('清华欢迎你')
        }else{
            alert('不配')
        }
    </script>
</body>
</html>

  • 多分支 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>

        

        let time = +prompt('今天星期几')
        if(time===1){
            alert('吃海鲜')
        } else if(time ===2){
            alert('吃席')
        }
         else if(time ===3){
            alert('牛排')
        }
         else if(time ===4){
            alert('吃软饭')
        }
        else if(time ===5){
            alert('吃老虎')
        }
        else{
            alert('吃土')
        }
    
    </script>
</body>
</html>
三元运算符

  • 比 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>
       let num1 = 99
       let num2 = 50
       num1 <99 ? console.log(num1) : console.log(num2)
        
    </script>
</body>
</html>

综合小案例

  • 数字补0案例 需求：用户输入1个数，如果数字小于10，则前面进行补0， 比如 09 03 等

    <!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>
        //数字补0案例
        let num = +prompt('输入一个数')
        num < 10 ?console.log("0"+num) : console.log(num)
    </script>
</body>
</html>

  • 简易计算器 小案例

  • 需求：用户输入2个数字，然后输入 + - * / 任何一个，可以计算结果

<!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 num1= prompt('请输入一个数字')
        let num2= prompt('请输入第二个个数字')
        let num3= prompt('请输入符号')
        if(num3 === '-' ){
            console.log(num1 - num2);
        }else if(num3 ==='+'){
            console.log(num1 + num2);
        }
        else if(num3 ==='*'){
            console.log(num1 * num2);
        }
        else if(num3 ==='/'){
            console.log(num1 / num2);
        }

    </script>
</body>
</html>

思维导图

1648386953630.png

avatar
文章
阅读
粉丝