首页 > 编程语言 >前端基础之JavaScript流程控制

前端基础之JavaScript流程控制

时间:2024-03-21 16:23:57浏览次数:38  
标签:语句 ... 流程 代码 JavaScript else case 循环 前端

一、if判断

在 JavaScript 中,if 语句是一种常见的条件语句,用于根据条件执行不同的代码块。除了基本的 if 语句外,还有 if...elseif...else if...else 等变体,用于处理多个条件的情况。

1. if 语句

if 语句用于在条件为真时执行特定的代码块。

语法:

if (condition) {
    // 当条件为真时执行的代码
}

2. if...else 语句

if...else 语句用于在条件为真时执行一个代码块,否则执行另一个代码块。

语法:

if (condition) {
    // 当条件为真时执行的代码
} else {
    // 当条件为假时执行的代码
}

3. if...else if...else 语句

if...else if...else 语句用于处理多个条件的情况,根据不同的条件执行不同的代码块。

语法:

if (condition1) {
    // 当条件1为真时执行的代码
} else if (condition2) {
    // 当条件2为真时执行的代码
} else {
    // 当所有条件都不为真时执行的代码
}

示例:

let num = 10;

if (num > 0) {
    console.log("Number is positive");
} else if (num < 0) {
    console.log("Number is negative");
} else {
    console.log("Number is zero");
}

在上面的示例中,根据 num 的值,会执行不同的代码块输出不同的结果。

二、循环语句

在 JavaScript 中,有几种常见的循环语句,包括 for 循环、while 循环、do...while 循环。下面详细解释这些循环语句的用法:

1. for 循环

for 循环用于重复执行特定代码块,通常在已知循环次数或需要迭代数组等情况下使用。

语法:

for (initialization; condition; increment) {
    // 在条件为真时执行的代码
}
  • initialization:在循环开始前执行的表达式,一般用于初始化计数器。
  • condition:在每次循环迭代前检查的条件,如果为 true,则继续循环;如果为 false,循环结束。
  • increment:在每次循环迭代之后执行的表达式,一般用于递增或递减计数器。

2. while 循环

while 循环在每次迭代之前检查条件,只有在条件为真时才执行循环体内的代码。

语法:

while (condition) {
    // 在条件为真时执行的代码
}
  • condition:在每次循环迭代前检查的条件,如果为 true,则继续循环;如果为 false,循环结束。

3. do...while 循环

do...while 循环先执行循环体内的代码,然后检查条件,只有在条件为真时才继续执行下一次循环。

语法:

do {
    // 先执行一次,然后在条件为真时重复执行的代码
} while (condition);
  • condition:在每次循环迭代前检查的条件,如果为 true,则继续循环;如果为 false,循环结束。

示例

// for 循环示例
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while 循环示例
let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

// do...while 循环示例
let k = 0;
do {
    console.log(k);
    k++;
} while (k < 5);

这些循环语句在 JavaScript 中用于不同的情况,根据具体需求选择合适的循环结构来实现所需的逻辑。

三、switch - case

在 JavaScript 中,switch 语句提供了一种根据不同条件执行不同代码块的方式。switch 语句通常用于替代多个连续的 if...else if...else 语句,使代码更简洁易读。

switch 语句的语法

switch (expression) {
    case value1:
        // 当 expression 等于 value1 时执行的代码
        break;
    case value2:
        // 当 expression 等于 value2 时执行的代码
        break;
    // 可以有更多的 case
    default:
        // 如果 expression 不等于任何 case 中的值时执行的代码
}
  • expression 是需要进行比较的表达式或值。
  • 每个 case 后面跟着一个值(value1, value2 等),表示 expression 可能的取值。
  • break 语句用于退出 switch 语句,防止继续执行后续的 case
  • default 关键字用于指定当 expression 不匹配任何 case 时要执行的代码块。default 是可选的。

示例:

let day = 3;
let dayName;

switch (day) {
    case 1:
        dayName = "Monday";
        break;
    case 2:
        dayName = "Tuesday";
        break;
    case 3:
        dayName = "Wednesday";
        break;
    case 4:
        dayName = "Thursday";
        break;
    case 5:
        dayName = "Friday";
        break;
    default:
        dayName = "Weekend";
}

console.log(dayName); // 输出: Wednesday

在上面的示例中,根据 day 的值,switch 语句会匹配相应的 case,执行对应的代码块。

switch 语句在需要根据一个表达式的值来执行不同代码块时非常有用,尤其是当有多个条件需要处理时。但需要注意,每个 case 后面都需要加上 break,否则会继续执行下一个 case 直到遇到 break 或者结束。

四、 跳转语句

(1)break 语句

用于跳出循环或 switch 语句。

(2)continue 语句

用于跳过当前循环中的剩余代码,进入下一次循环。

(3)return 语句

用于从函数中返回一个值。

五、 其他控制语句

(1)try...catch 语句

用于捕获和处理异常。

(2)throw 语句

用于抛出一个异常。

(3)finally 语句

无论是否发生异常,都会执行的代码块。

标签:语句,...,流程,代码,JavaScript,else,case,循环,前端
From: https://www.cnblogs.com/xiao01/p/18087638

相关文章

  • 前端基础之JavaScript对象
    一、什么是对象现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的实物。例如,一本书、一辆汽车、一个人可以是“对象”,一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字......
  • 前端基础之JavaScript函数
    一、什么是函数在JavaScript中,函数是一种可重复使用的代码块,用于执行特定任务或计算。函数可以接受参数,执行特定的操作,并返回一个值。二、函数的声明函数可以通过函数声明、函数表达式或箭头函数来定义。函数声明:functionfunctionName(parameters){//函数体......
  • JavaScript 实现通过 id 数组获取可展示的 name 拼接字符串
    JavaScript实现通过id数组获取可展示的name拼接字符串场景有一个包含许多对象的数组,每个对象都包含了一个标识(id)和一个名称(name)。想要从这个数组中选出特定的一些对象,这些对象的标识(id)在另一个数组中已经给出。然后,想把这些选出来的对象的名称(name)连接成一个字符串,用逗号分......
  • 测试面经 之 如何判断 Bug 是前端问题还是后端问题
    常见软件测试问题,如何判断一个Bug是Bug,并且如何判断该bug是前端问题还是后端问题。1.记录Bug:首先,作为一个专业的测试,无论该bug怎样,是否太浅显,都需要及时记录该问题。将该问题的标题,问题描述,复现步骤,环境版本,测试环境,测试账号,服务器端日志,报错截图,接口入参和......
  • 项目流程
     电商系统的终端访问方式-------pc端,移动app,移动web,微信小程序前后端分离的开发模式,基于ajax负责调接口 用到的技术:vue         vue-router         element-ui         axios         echart......
  • [踩坑回顾]前端项目打包编译之后,页面访问异常:exports is not defined.
    周一遇到的问题,是qiankun框架的一个vue2子项目,使用yudao开源框架二次开发。 排查:1.开发环境正常。2.项目迁移前使用的babel、package配置均未被使用过。3.考虑打包使用的命令错误。发现未按照官方教程使用npm进行编译,后端同事用pom.xml文件使用pnpm命令进行编译。 解......
  • 流程管理、审批流程在公司的重要性?
    时代在进步有些理念就当参考、扩充知识面;大多各种流程规范管理等等都是对大公司的发展超级有帮助;对小公司来说见效未必很明显;也可能各种受到限制不够灵活;但是公司大了没规范的管理就是各种乱套,各种贪污腐败、各种管理漏洞可能会导致公司重大的损失。  1:防止乱来、乱......
  • 关于tomcat打不开 跳出弹窗显示指定服务未安装解决方法详细流程
    关于tomcat打不开跳出弹窗显示指定服务未安装解决方法详细流程:https://blog.csdn.net/ttwxd/article/details/126771143?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171098615116777224466432%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&re......
  • 使用appuploder流程笔记
     1.如何没有账号去apple官网注册一个,地址:https://developer.apple.com/account2.下载解压appuploder,双击打开,用刚刚注册的账号登录,下载地址:http://www.applicationloader.net/(使用第一次后,可以点击记住密码即可一键登录)注意:未支付apple的账号需要勾选“未付苹果688”  ......
  • 前端学习-vue学习009-侦听器
    官方教程链接侦听器:import{ref,watch}from'vue'constcount=ref(0)watch(count,(newCount)=>{console.log(`newcountis:${newCount}`)})pre标签:识别json对象中的\n\t等转义字符,展示原始的JSON对象结构。v-ifv-elseasyncawaitfetch<template>......