javaScript(三):javaScript流程控制

简介: JavaScript是一种广泛应用于Web开发的编程语言。它被用于为网页添加交互性和动态功能。JavaScript可以在浏览器中直接运行,而不需要任何编译过程。它是一种弱类型、基于对象的脚本语言,具有跨平台性和灵活性。JavaScript可以用于处理网页上的各种操作和事件,比如表单验证、动态内容加载、用户交互等等。它还可以通过与HTML DOM(文档对象模型)和CSS(层叠样式表)的交互,改变网页的外观和行为。除了在网页开发中使用外,JavaScript也可以用于其他环境,例如服务器端的开发(使用Node.js)和移动应用程序开发。

1、if条件判断语句

if语句是一种在编程中用于进行条件判断的控制结构

它的基本形式是:

if (条件表达式) {
   
// 代码块;
}
let age = 23;
if (age >= 18){
   
    document.write("成年人" + "<br/>");
}

这里的"条件"是一个布尔表达式,用于判断是否满足某个条件。如果条件为真,那么执行代码块中的语句;如果条件为假,则跳过代码块。

除了基本的if语句外,还可以使用if-else结构和if-elif-else结构来进行更复杂的条件判断。

if-else结构的语法如下:

if (条件表达式) {
   
// 代码块;
} else {
   
// 代码块;
}

let age = 23;
if (age >= 18){
   
    document.write("成年人" + "<br/>");
} else {
   
    document.write("未成年人" + "<br/>");
}

在这种情况下,如果条件为真,则执行代码块1;如果条件为假,则执行代码块2。

if-elif-else结构是在if-else结构的基础上增加了多个elif条件,用于进行更多的条件判断。

它的语法如下:

if (条件表达式) {
   
    // 代码块;
} else if(条件表达式) {
   
    // 代码块;
} else {
   
    // 代码块;
}

在这种情况下,如果条件1为真,则执行代码块1;如果条件1为假,而条件2为真,则执行代码块2;如果既条件1又条件2都为假,则执行代码块3。

通过if语句,可以根据不同的条件执行不同的代码,从而实现更灵活的控制流程。

if语句条件表达式除了支持boolean类型表达式,还支持非boolean类型表达式

数据类型 为真 为假
number 非0 0
string 非空字符串 空字符串
undefined
NaN(Not a Number)
object 对象不为null null

2、switch选择语句

switch 语句是一种在多种情况下执行不同操作的条件语句

它通常用于替代一系列的 if 语句。语法格式如下

switch (变量名) {
   
   case 常量值:
      break;
   case 常量值:
      break;
   default:
       break;
}

==代码演示:==

// switch: 判断分数: 10分优良,9分及格,8分以下不及格
let score = 8;
switch (score){
   
    case 10:
        document.write("优良" + "<br/>");
        break;
    case 9:
        document.write("及格" + "<br/>");
        break;
    default:
        document.write("不及格" + "<br/>");
        break;
}

3、循环结构

什么是循环结构

循环结构是程序设计中一种重要的控制结构,它用于反复执行特定的代码块,直到满足某个条件才停止循环。常见的循环结构有以下几种:

  1. for 循环:for 循环是最常用的循环结构之一,它通过指定循环变量的初始值、终止条件和每次迭代时的变化步长来控制循环次数。例如,可以使用 for 循环遍历数组或执行特定次数的操作。
  2. while 循环:while 循环在执行循环体之前先判断一个条件表达式,只有当条件表达式为真时,才会执行循环体,否则跳出循环。这种循环适用于在未知条件下循环执行操作,直到条件满足为止。
  3. do-while 循环:do-while 循环与 while 循环类似,但它的判断条件在循环体执行之后进行判断。也就是说,无论条件是否满足,循环体至少会执行一次。

在使用循环结构时,需要注意循环条件的设置以及在循环体内部对循环变量的操作,以确保循环能够正确执行并避免死循环的发生。

3.1、while循环语句

while循环语句语法(条件为 true 时循环)

语句格式:

while (条件表达式) {
   
    需要执行的代码;
}

// while: 打印1-10
let num = 1;
while (num <= 10){
   
    document.write(num + "<br/>")
    num++;    //要注意这个++,不然会进入死循环
}

3.2、do...while循环语句

do-while循环语法(最少执行1次循环)

JavaScript的do...while循环是一种基本的循环语句,它的语法结构是:

do {
  // 循环体
} while (condition);

do...while循环先执行一次循环体内的代码,然后判断condition条件是否为真,如果为真,则继续执行循环体内的代码,以此类推,直到condition的值为假才结束循环。

do...while 循环和 while 循环的区别在于,do...while 循环体内的代码至少会执行一次,即使循环条件的判断结果为 false。

下面是一个简单的例子,使用 do...while 循环来计算1到10的和:

var sum = 0;
var i = 1;
do {
   
  sum += i;
  i++;
} while (i <= 10);
console.log(sum); // 输出55

在上面的例子中,do...while 循环会至少执行一次,即先执行 sum += i;i++; 语句,然后再判断 i 的值是否小于等于 10,只要满足条件就继续执行循环体的代码,直到 i 的值大于 10 时,do...while 循环结束。

3.3、for循环

JavaScript的for循环是一种最常用的循环结构

它具有灵活、简洁、高效等特点,通常用于循环次数已知的情况。其语法结构如下:

for (initialization; condition; increment) {
  // 循环体
}

for 循环的执行过程如下:

  1. 执行一次初始化表达式 initialization,一般用于初始化循环计数器等变量;
  2. 判断循环条件 condition 是否为真,如果为真,则执行循环体内的代码,否则结束循环;
  3. 执行一次增量表达式 increment,一般用于增加循环计数器等变量的值;
  4. 再次判断循环条件 condition 是否为真,如果为真,则重复执行循环体内的代码,否则结束循环。

下面是一个简单的例子,使用 for 循环来计算1到10的和:

var sum = 0;
for (var i = 1; i <= 10; i++) {
  sum += i;
}
console.log(sum); // 输出55

在上面的例子中,for 循环的 initialization 表达式初始化了一个循环计数器变量 icondition 表达式判断循环计数器变量 i 是否小于等于 10,increment 表达式用于将循环计数器 i 的值加一,每次执行循环体内的 sum += i; 语句,最终输出 sum 的值为 55。

3.4、break和continue

breakcontinue 都是用于控制循环执行流程的关键字。

break关键字通常用于在循环内部某个条件满足时,强制跳出循环,不再执行循环内下面的语句,执行后面的代码

var num = 1;

while (true) {
   
  if (num % 3 === 0) {
   
    console.log("找到了能被3整除的第一个正整数:" + num);
    break;
  }
  num++;
}

在这个例子中,我们使用 while 循环来递增地尝试每一个正整数,如果找到了能被3整除的第一个正整数,使用 break 跳出循环并输出结果。注意到循环条件为 true,所以该循环会一直执行下去,直到找到满足条件的数才跳出。

使用 continue来忽略一些特定条件的情况

以输出 1 至 10 之间的奇数为例,我们可以使用 continue 来跳过偶数:

for (var i = 1; i <= 10; i++) {
   
  if (i % 2 === 0) {
   
    continue; // 如果 i 是偶数,则跳过当前循环的剩余部分
  }
  console.log(i); // 这行代码只有 i 是奇数时才会执行
}

在这个例子中,我们使用 for 循环从 1 遍历到 10。当 i 为偶数时(即 i 除以 2 的余数为 0),continue 语句将被执行,这会导致循环立即继续至下一次迭代,忽略 console.log(i) 语句。所以,只有当 i 是奇数时,console.log(i) 语句才会被执行,并且输出 i 的值。

相关文章
|
7月前
|
JavaScript 前端开发 算法
设计一个简单的JavaScript版“俄罗斯方块”游戏的基本逻辑流程。
```md 设计JavaScript版俄罗斯方块游戏涉及初始化环境、创建游戏容器、管理变量、加载音效。游戏循环中生成方块、键盘控制移动与旋转、碰撞锁定、行消除及分数更新。当游戏区域填满时结束游戏,显示结束画面。还包括暂停、重置等辅助功能。伪代码示例展示了核心逻辑,实际实现需考虑更多细节和用户体验增强。 ```
159 3
|
7月前
|
Web App开发 JavaScript 前端开发
Node.js 的事件循环原理、工作流程
Node.js 的事件循环原理、工作流程
117 0
|
7月前
|
JavaScript 前端开发 开发者
从0开始学习JavaScript--JavaScript 流程控制
JavaScript中的流程控制结构是编写结构化、可读性强的代码的关键。本文将深入研究JavaScript中的流程控制,包括条件语句、循环结构、跳转语句等,并通过丰富的示例代码来更全面地了解和运用这些概念。
|
7月前
|
Android开发
Autox.js 脚本开发环境搭建,从案例到打包apk(详细流程)
Autox.js 脚本开发环境搭建,从案例到打包apk(详细流程)
2120 0
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-流程控制之while循环
这篇文章介绍了JavaScript中的while循环和do...while循环的基础知识,并通过一个实际案例演示了如何使用while循环计算投资增长到特定金额所需的年数。
64 2
JavaScript基础知识-流程控制之while循环
|
1月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
71 3
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-流程控制之for循环
这篇文章讲解了JavaScript中的for循环的基础知识,并通过一个实例演示了如何使用for循环来找出所有的三位水仙花数。
64 6
JavaScript基础知识-流程控制之for循环
|
4月前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
59 0
|
4月前
|
JavaScript 安全 数据安全/隐私保护
深入Node.js与Express:从表单接收到数据验证的完整指南——实战技巧揭秘后端开发中的表单处理流程
【8月更文挑战第31天】在Web开发中,处理表单数据至关重要。本文通过实例详细讲解了如何利用Node.js与Express框架接收和验证表单数据。首先,搭建环境并初始化一个简单的Express应用;接着,演示如何接收用户注册表单中的`username`和`email`字段;最后,引入`joi`模块进行数据验证,确保数据安全准确。掌握这些技能有助于开发者构建更安全、友好的Web应用。随着Node.js和Express的不断进步,未来将有更多高级功能值得期待。
135 0