Web前端开发笔记——第四章 JavaScript程序设计 第四节 条件语句和循环语句

简介: Web前端开发笔记——第四章 JavaScript程序设计 第四节 条件语句和循环语句

一、if条件语句


在JavaScript中,if-else语句的格式如下:

if(表达式)
{语句1}
else
{语句2}

若要进行多个判断条件,可以通过if-else if-else语句,else-if可以为多个,当if里面的表达式1不成立时,执行表达式2,若表达式2不成立则执行语句3,格式如下:

if(表达式1)
{语句1}
else if(表达式2)
{语句2}
...
else
{语句3}


例如下列HTML代码,判断a的值然后通过alert()警告框输出a的值的判断情况,由于只有一条语句所以可以省略花括号,如下:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a = -2;
    if (a == 0)
    alert("a的值等于0!")
    else if (a < 0)
    alert("a的值小于0!")
    else
    alert("a的值大于0!")
  </script>
  </body>
</html>

运行结果如下:

1667130415639.jpg


二、while循环语句


(一)while()语句


while循环语句是while()条件表达式为正确时,则重复执行代码块中的内容,直到表达式为错误时退出程序,不再执行循环中的代码。

例如下列代码,通过while循环计算1+2+3+…+100的值,并在控制台中输出:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a = 1;
    var sum = 0;
    while (a <= 1000) {
    sum = a + sum;
    a+=1;
    }
    console.log("1+2+3+...+1000=",sum);
  </script>
  </body>
</html>


运行结果如下:

1667130449502.jpg


(二)do……while语句


另外还有do……while语句,该循环在每次检查表达式是否成立之前都会执行一次代码块(即do……while语句至少执行一次),若表达式为成立则重复循环,直到表达式不成立时退出循环,格式如下:

例如下列代码,并在控制台中输出:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var i = 0;
    do {
    i++;
    console.log(i);
    }
    while (i < 10)
  </script>
  </body>
</html>

运行结果如下:

1667130473844.jpg


三、for循环语句


例如下列代码,利用for循环输出1!+2!+3!+……+10!的结果,直接让for循环执行10次,并在控制台中输出:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>条件语句</title>
  </head>
  <body>
  <script type="text/javascript">
    var i, j, sum;
    j = 1;
    sum = 0;
    for (i = 1; i <= 10; i++) {
    j *= i;
    sum += j;
    }
    console.log("1!+2!+3!+...+10!=",sum);
  </script>
  </body>
</html>

运行结果如下:

1667130498939.jpg

另外,for循环语句中还有一个for…in循环语句,它用于枚举对象的属性,即循环遍历对象,例如下列代码,循环遍历number[]数组,并在控制台中输出:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>条件语句</title>
  </head>
  <body>
  <script type="text/javascript">
    var number = [0, 1, 2, 3, 4, 5];
    for (var i in number)
    console.log(number[i]);
  </script>
  </body>
</html>


运行结果如下:

1667130517676.jpg


四、switch语句


例如下列代码,学生成绩为80分,判断该学生的成绩等级并在控制台中输出(60分以下不及格,60-70分为及格,70-80分为良好,80-100分为优秀),其中switch(true)表示与case中表达式与其成立时匹配:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>条件语句</title>
  </head>
  <body>
  <script type="text/javascript">
    var score = 80;
    switch (true){
    case score < 60:
      console.log("不及格!");
      break;
    case score >= 60 && score < 70:
      console.log("及格!");
      break;
    case score >= 70 && score < 80:
      console.log("良好!");
      break;
    default:
      console.log("优秀!");
    }
  </script>
  </body>
</html>


运行结果如下:

1667130543964.jpg


五、break语句和continue语句


与其他语言中的break语句和continue语句一样,break语句用于退出整个循环,continue语句用于退出本次循环。


相关文章
|
1月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
|
11天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
19 1
|
11天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
30天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(六)
JavaScript高级笔记-coderwhy版本
74 0
|
30天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(一)
JavaScript高级笔记-coderwhy版本
34 0
JavaScript高级笔记-coderwhy版本(一)
|
1月前
|
JSON JavaScript 前端开发
Node.JS第二讲笔记
Node.JS第二讲笔记
32 0
|
1月前
|
JSON JavaScript 前端开发
Node.js:前端开发的后端利器
Node.js作为一种运行在服务器端的JavaScript环境,为前端开发者打开了后端开发的大门。它以其高效的事件驱动、非阻塞I/O模型以及强大的npm生态,使得前端开发者能够轻松构建服务器端应用,实现前后端的全栈开发。本文将探讨Node.js的核心优势、应用场景以及在前端开发中的重要性。
|
1月前
|
前端开发 JavaScript 数据可视化
JavaScript:前端开发的灵魂与动力
JavaScript(JS)作为前端开发的核心语言,赋予了网页交互性和动态性。通过JS,开发者可以实现复杂的用户交互、数据操作以及动画效果,为用户带来丰富而流畅的网页体验。本文将介绍JS的基本概念、应用场景以及在前端开发中的重要性。
|
Web App开发 JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
超越Web,Javascript在物联网的应用
引子 Patrick Catanzariti 是一名Web开发工程师,最近他在 sitepoint 发表了《JavaScript Beyond the Web in 2014》,介绍了JavaScript在物联网中的应用,非常有意思。
1572 0