JavaScript-语句

最新推荐文章于 2024-07-09 10:38:13 发布

雪碧bibi是我的好大二

最新推荐文章于 2024-07-09 10:38:13 发布

阅读量744

点赞数 30

分类专栏： JavaScript基础知识文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/m0_64105917/article/details/139413843

版权

JavaScript基础知识专栏收录该内容

19 篇文章 0 订阅

订阅专栏

学习目标：

掌握语句

学习内容：

表达式和语句
程序三大流程控制语句
分支语句-if语句
分支语句-三元运算符
switch分支语句
断点调试
while循环

表达式和语句：

表达式
表达式是可以被求值的代码，JavaScript引擎会将其计算出一个结果。

    x = 7
    3 + 4
    num++

语句
语句是一段可以执行的代码。
比如：prompt()可以弹出一个输入框，还有if语句 for 循环语句等等。
区别

表达式	因为表达式可被求值，所以它可以写在赋值语句的右侧。
语句	而语句不一定有值，所以比如`alert()` `for` 和 `break`等语句就不能被用于赋值。

//表达式
num = 3 + 4

//语句
alert()  //弹出对话框
console.log()  //控制台打印输出

某些情况，也可以把表达式理解为表达式语句，因为它是在计算结果，但不是必须的成分。例如：continue语句。

程序三大流程控制语句：

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

分支语句-`if语句`：

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

单分支使用语法

if (条件） {
满足条件要执行的代码
}

1.括号内的条件为true时，进入大括号里执行代码。
2.小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型。
3.如果大括号只有一个语句，大括号可以省略，但是，我们不提倡这么做。

<title>if单分支语句</title>
</head>

<body>
  <script>
    // 单分支语句
    /* if (true) {
       console.log('执行语句')
     }
     */
    /*  if (false) {
      console.log('执行语句')
    }
    */
    /* if (3 > 5) {
       console.log('执行语句')
     }
     */
    // 1. 除了0 所有的数字都为真
    /* if (2) {
       console.log('执行语句')
     }
     */
    // 2. 除了 ''  所有的字符串都为真
    if ('雪碧宝宝') {
      console.log('执行语句')
    }
  </script>

</body>

案例代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习-if语句-单分支</title>
</head>

<body>
  <script>
    // 1.用户输入
    let score = +prompt('请用户输入高考成绩：')
    // 2.进行判断输出
    if (score >= 700) {
      alert('恭喜考入雪碧大学')

    }
  </script>

</body>

</html>

双分支使用语法

if (条件） {
满足条件要执行的代码
}else {
不满足条件要执行的代码
}

<title>练习-if语句-双分支</title>
</head>

<body>
  <script>
    // 1.用户输入
    let uname = prompt('请输入用户名：')
    let password = prompt('请输入密码:')
    // 2.判断输出
    if (uname === '雪碧宝宝' && password === '123456') {
      alert('登录成功')
    } else {
      alert('用户名或者密码错误')
    }
  </script>

</body>

案例代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习-判断闰年案例</title>
</head>

<body>
  <script>
    // 1.用户输入
    let year = +prompt('请输入年份：')
    // 2.判断输出
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
      alert(`${year}年是闰年`)
    } else {
      alert(`${year}年是平年`)
    }
  </script>

</body>

</html>

多分支
使用场景：适合于有多个结果的时候，比如学习成绩可以分为：优、良、中、差。

if (条件1） {
  代码1
}else if (条件2) {
  代码2
}else if (条件3) {
  代码3
}else {
  代码n
}

释义：
1.先判断条件1，若满足条件1就执行代码1，其他不执行。
2.若不满足则向下判断条件2，满足条件2就执行代码2，其他不执行。
3.若依然不满足继续往下判断，依次类推。
4.若以上条件都不满足，执行else里的代码n。
5.注:可以写N个条件，但这里演示只写2个。

<title>练习-多分支if语句</title>
</head>

<body>
  <script>
    // 1.用户输入
    let score = +prompt('请输入成绩：')
    //2.判断输出
    if (score >= 90) {
      alert('成绩优秀')
    } else if (score >= 70) {
      alert('成绩良好')
    } else if (score >= 60) {
      alert('成绩及格')
    } else {
      alert('成绩不及格')
    }
  </script>

</body>

分支语句-三元运算符：

使用场景：其实是比if双分支更简单的写法，可以使用三元表达式。
符号： ？与：配合使用。
语法

条件 ？ 满足条件执行的代码 ： 不满足条件执行的代码

一般用来取值。

<title>三元运算符</title>
</head>

<body>
  <script>
    // 三元运算符
    //条件 ？ 代码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)
  </script>

</body>

案例代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习-判断2个数的最大值</title>
</head>

<body>
  <script>
    // 1.用户输入
    let num1 = +prompt('请输入第一个数：')
    let num2 = +prompt('请输入第二个数：')
    // 2.判断输出
    let max = num1 > num2 ? num1 : num2
    alert(`两者那个最大的数是${max}`)
  </script>

</body>

</html>

switch分支语句：

1.switch case语句一般用于等值判断，不适合于区间判断。
2.switch case一般需要配合break关键字使用没有break会造成case穿透。

switch( 数据) {
      case 值1：
          代码1
          break
      case 值2：
          代码2
          break
       default:
          代码n
          break
    }

释义：
1.找到跟小括号里数据全等的case值，并执行里面对应的代码。
2.若没有全等===的则执行default里的代码。
3.例：数据若跟值2全等，则执行代码2。

<title>switch选择语句</title>
</head>

<body>
  <script>
    switch (1) {
      case 1:
        console.log('你选择的是1')
        break //退出switch
      case 2:
        console.log('你选择的是2')
        break //退出switch
      case 3:
        console.log('你选择的是3')
        break //退出switch
      default:
        console.log('没有符合条件的')
    }
  </script>

</body>

案例代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习-简单计算器</title>
</head>

<body>
  <script>
    //1.用户输入
    let num1 = +prompt('请输入第一个数字：')
    let num2 = +prompt('请输入第二个数字：')
    let symbol = prompt('请输入 + - * / 其中一个：')
    //2.判断输出
    switch (symbol) {
      case '+':
        alert(`两个数的加法操作是${num1 + num2}`)
        break
      case '-':
        alert(`两个数的减法操作是${num1 - num2}`)
        break
      case '*':
        alert(`两个数的乘法操作是${num1 * num2}`)
        break
      case '/':
        alert(`两个数的除法操作是${num1 / num2}`)
        break
      default:
        alert('请输入+ - * / ')

    }
  </script>

</body>

</html>

断点调试：

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug。

浏览器打开调试界面

1.按F12打开开发者工具。
2.点到sources一栏。
3.选择代码文件。

`while`循环：

循环：重复执行一些操作，while：在…期间，所以while循环就是在满足条件期间，重复执行某些代码。
比如我们运行相同的代码输出5次（输出5句“我学的很棒”）。

while循环基本语法

while (循环条件) {

      要重复执行的代码（带循环体）
}

释义:
1.跟if语句很像，都要满足小括号里的条件为true才会进入 循环体 执行代码。
2.while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出。

while循环三要素
循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。

变量起始值	let i = 1
终止条件	没有终止条件，循环会一直执行，造成死循环
变量变化量	用自增或者自减

<title>while循环</title>
</head>

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

  </script>

</body>

案例代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习-在页面中打印输出10句“雪碧最可爱”</title>
</head>

<body>
  <script>
    let i = 1
    while (i <= 10) {
      document.write('雪碧最可爱<br>')
      i++


    }
  </script>

</body>

</html>

while大练习

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

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

<body>
  <script>
    /*
    //1.页面输出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) {
       // sum = sum + i
       sum += i
       i++
     }
     console.log(sum)  //5050
     */

    //3.计算1-100之间的所有偶数和
    let i = 1
    let sum = 0
    while (i <= 100) {
      // 筛选偶数  只有偶数才累加
      if (i % 2 === 0) {
        sum = sum + i

      }
      // 每次循环都要自加
      i++
    }
    console.log(sum)

  </script>

</body>

</html>

循环退出

`break`	退出循环
`continue`	结束本次循环，继续下次循环

区别：
1.continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue。
2.break 退出整个循环，一般用于结果已经得到，后续的循环不需要的时候可以使用。

<title>循环退出</title>
</head>

<body>
  <script>
    //打印5句话
    // let i = 1
    // while (i <= 5) {
    //   if (i === 3) {
    //     break //退出整个循环
    //   }
    //   console.log(`我抢到${i}张票啦`)
    //   i++
    // }

    let i = 1
    while (i <= 5) {
      if (i === 3) {
        i++
        continue //结束本次循环   继续下一轮循环
      }
      console.log(`我抢到${i}张票啦`)
      i++

    }
  </script>

</body>

案例代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习-页面弹框</title>
</head>

<body>
  <script>
    while (true) {
      let str = prompt('你爱我吗')
      // 退出条件  爱
      if (str === '爱') {
        break
      }

    }
  </script>

</body>

</html>