JavaScript入门中-流程控制语句

news2025/1/15 13:19:57

在这里插入图片描述

本文转载自:https://fangcaicoding.cn/article/52

大家好!我是方才,目前是8人后端研发团队的负责人,拥有6年后端经验&3年团队管理经验,截止目前面试过近200位候选人,主导过单表上10亿、累计上100亿数据量级的业务系统的架构和核心编码。

“学编程,一定要系统化” 是我一直坚持的学习之道。目前正在系统化分享从零到一的全栈编程入门以及项目实战教程

无论你是编程新手,还是有经验的开发者,我都愿意与你分享我的学习方法、项目实战经验,甚至提供学习路线制定、简历优化、面试技巧等深度交流服务。

我创建了一个编程学习交流群(扫码关注后即可加入),秉持“一群人可以走得更远”的理念,期待与你一起 From Zero To Hero!

茫茫人海,遇见即是缘分!希望这篇文章对你有所帮助!

JavaScript入门-流程控制语句

流程控制语句是编程语言非常重要的内容,复杂功能的实现,本质就是单个简单功能、按不同条件或不同顺序进行组合而成。
编程是需要有流程的思维的。

image-20241021224007387

流程控制语句用于根据条件执行不同的代码块,或多次重复执行某个代码块。

条件语句

if语句

if根据条件表达式的结果,确定是否执行某个代码块。代码示例:

let age = 16;

if (age < 18) {
    console.log("年轻真好!");
} 
console.log("快乐就好!");

输出:

年轻真好!
快乐就好!

看流程图:

image-20241021223901352

if/else 语句

if/else 语句根据表达式的结果(truefalse)来决定执行哪个代码块。

let age = 20;

if (age < 18) {
    console.log("年轻真好!");
} else {
    console.log("长大了也挺幸福!");
}
 console.log("活着就好!");

输出:

长大了也挺幸福!
活着就好!

结合流程图理解:

image-20241021225019783

if-else-if 语句

当有多个条件时,可以使用 else if 来进行多级判断。

let score = 85;

if (score >= 90) {
    console.log("优秀");
}  else if (score >= 80) {
    console.log("良好");
}  else if (score >= 60) {
    console.log("及格");
}  else {
    console.log("不及格");
}

输出:

良好

流程示例:

image-20241021225853769

switch 语句

switch 语句用于针对多个可能的值执行不同的代码块。相比 if/else,它可以在多个可能的值之间进行选择。

let fruit = "香蕉";

switch (fruit) {
    case "苹果":
        console.log("你选择了苹果");
        break;
    case "香蕉":
        console.log("你选择了香蕉");
        break;
    default:
        console.log("未知的水果");
}

输出:

你选择了香蕉

流程图示例:

image-20241021230741057

注意:每个 case 语句的代码块,都建议加上break关键字,若没有break关键字,会执行匹配成功的代码块和之后的所有代码块。

let fruit = "苹果";

switch (fruit) {
    case "苹果":
        console.log("你选择了苹果");
    case "香蕉":
        console.log("你选择了香蕉");
    default:
        console.log("未知的水果");
}

输出:

你选择了苹果
你选择了香蕉
未知的水果

流程图就会变成这样:

image-20241021231541150

循环与迭代

for 循环

for 循环是一种常用的迭代方式,它允许你指定初始值、条件表达式和变量运算(一般是自增或自减)操作。语法规则:

for(初始变量;条件表达式;变量运算){  
// 循环体
}

示例:

for (let i = 0; i < 5; i++) {
    console.log("当前计数:" + i);
}for (let i = 0; i < 5; i = i+1) {
    console.log("当前计数:" + i);
}

输出:

当前计数:0
当前计数:1
当前计数:2
当前计数:3
当前计数:4

image-20241022225959691

whiledo...while 循环

流程上和 for循环是一样的,只是在语法上有所区别。

while 循环在条件为 true 时会不断执行循环体代码。

let count = 0;

while (count < 3) {
    console.log("循环次数:" + count);
    count++;
}

do...while 循环则会先执行一次代码块,然后再判断条件是否继续循环。

let count = 0;

do {
    console.log("循环次数:" + count);
    count++;
} while (count < 3);

for...infor...of 循环

  • for...in:遍历对象的属性。
  • for...of:遍历数组或可迭代对象的值。
let person = { name: "Alice", age: 25 };

for (let key in person) {
    console.log(key + ": " + person[key]); // 遍历对象属性
}

let numbers = [1, 2, 3];

for (let num of numbers) {
    console.log(num); // 遍历数组元素
}

breakcontinuereturn

在编写 JavaScript 程序时,控制代码的执行流程非常重要。breakcontinuereturn 是三个常见的关键字,它们用于改变循环或函数的默认行为。下面我们将详细解释这三个关键字的用法:

  • break 用于退出循环或 switch 语句**,立即终止循环执行。**
  • continue 用于跳过当前循环的剩余部分,继续下一次迭代
  • return 用于在函数中返回值,并终止函数的执行。

break 关键字:

break 关键字用于立即退出当前的循环或 switch 语句,不再继续执行剩下的循环或判断。通常在需要提前终止循环或跳出多重判断时使用。

  • 使用场景 1:跳出循环
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;  // 当 i 等于 5 时,立即跳出循环
  }
  console.log(i);  // 输出 0, 1, 2, 3, 4
}

在上面的示例中,当 i 等于 5 时,break 会停止整个循环,不再执行后面的迭代。

  • 使用场景 2:用于 switch 语句

break 还用于 switch 语句中的每个 case,以防止执行落入下一个 case 中。

let day = 3;
switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;  // 遇到 break 立即结束,避免执行后面的 case
  default:
    console.log("Invalid day");
}

continue 关键字

continue 关键字**用于跳过当前循环的剩余代码,立即进入下一次迭代。**与 break 不同的是,continue 不会退出循环,只是跳过本次循环中的后续代码。

  • 使用场景 :跳过某些迭代
for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue;  // 跳过 i 等于 2 的这一轮
  }
  console.log(i);  // 输出 0, 1, 3, 4
}

在上面的示例中,当 i 等于 2 时,continue 会跳过当前迭代,因此不会输出 2,而是直接进入下一次迭代。

return 关键字

return 关键字用于在函数中返回一个值,并立即停止函数的执行。return 是函数中结束函数执行的方式。

  • 使用场景 :返回值并结束函数
function sum(a, b) {
  return a + b;  // 返回两个参数相加的结果
}

let result = sum(3, 5);
console.log(result);  // 输出 8

在这个示例中,returna + b 的结果返回给调用该函数的地方,并停止执行函数。

  • 使用场景 2:提前结束函数
function checkAge(age) {
  if (age < 18) {
    return "Not allowed";  // 如果条件满足,函数立即返回并停止
  }
  return "Welcome";  // 如果条件不满足,执行这行
}

console.log(checkAge(16));  // 输出 "Not allowed"
console.log(checkAge(21));  // 输出 "Welcome"

return 也可以用于提前结束函数执行,如上例中如果 age 小于 18,函数会立即返回 “Not allowed”,不再执行后面的代码。


近期更新计划

近期更新计划(有需要的小伙伴,记得点赞关注哟!)

  1. 零基础前端入门系列,预计10月底更新完成;
  2. 博客系统功能完善,实现注册登录、评论系统等功能,预计11月开源;

“学编程,一定要系统化”——若你也是系统学习的践行者,记得点赞关注,期待与你一起 From Zero To Hero!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2225807.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++ 日志管理 spdlog 使用笔记

文章目录 Part.I IntroductionChap.I 预备知识Chap.II 常用语句 Part.II 使用Chap.I 简单使用Chap.II 自定义日志格式 Part.III 问题&解决方案Chap.I 如果文件存在则删除 Reference Part.I Introduction spdlog 是一个开源的 C 日志管理工具&#xff0c;Git 上面的地址为 …

Ovis原理解读: 多模态大语言模型的结构嵌入对齐

论文&#xff1a;https://arxiv.org/pdf/2405.20797 github:https://github.com/AIDC-AI/Ovis 在多模态大语言模型 (MLLM) 中&#xff0c;不同的嵌入策略有显著的区别。以下是使用基于连接器的方法与 Ovis 方法的比较&#xff1a; 基于连接器的方法-优缺点(connector-based …

WPF+MVVM案例实战(十)- 水波纹按钮实现与控件封装

文章目录 1、运行效果1、封装用户控件1、创建文件2、依赖属性实现 2、使用封装的按钮控件1.主界面引用2.按钮属性设置 3 总结 1、运行效果 1、封装用户控件 1、创建文件 打开 Wpf_Examples 项目&#xff0c;在 UserControlLib 用户控件库中创建按钮文件 WaterRipplesButton.x…

产品结构设计(五):结构设计原则

1. 产品结构设计总原则 1.1 合理选用材料 1、根据产品应用场所来选择 如果为日常消费类电子产品&#xff0c;产品材料就应选用强度好、表面容易处理、不容易氧化生锈、不容易磨伤、易成型的材料&#xff0c;如塑胶材料选用 PC、ABS、PCABS 等&#xff0c;金属材料选用不锈钢、…

一些待机电流波形特征

一、待机电流波形 最干净的待机电流波形应该只有paging&#xff0c;不过需要注意2点&#xff1a; 每个paging的间隔&#xff0c;不同网络可能不一样&#xff0c;有可能是320ms, 640ms 待机网络 paging 间隔 1分钟的耗电量 单个耗电量 单个待机电流 单个波形时长 4G 64…

你了解kafka消息队列么?

消息队列概述 一. 消息队列组件二. 消息队列通信模式2.1 点对点模式2.2 发布/订阅模式 三. 消息队列的优缺点3.1 消息队列的优点3.2 消息队列的缺点 四. 总结 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&…

uniapp使用easyinput文本框显示输入的字数和限制的字数

uniapp使用easyinput文本框显示输入的字数和限制的字数 先上效果图&#xff1a; 整体代码如下&#xff1a; <template><view class"nameInfoContent"><uni-easyinput class"uni-mt-5" suffixIcon"checkmarkempty" v-model&quo…

Linux云计算 |【第五阶段】CLOUD-DAY4

主要内容&#xff1a; Linux容器基础、安装Docker、镜像管理、容器管理、容器部署应用 一、容器介绍 容器&#xff08;Container&#xff09; 是一种轻量级的虚拟化技术&#xff0c;用于在操作系统级别隔离应用程序及其依赖项。容器允许开发者在同一台主机上运行多个独立的应…

MaskGCT,AI语音克隆大模型本地部署(Windows11),基于Python3.11,TTS,文字转语音

前几天&#xff0c;又一款非自回归的文字转语音的AI模型&#xff1a;MaskGCT&#xff0c;开放了源码&#xff0c;和同样非自回归的F5-TTS模型一样&#xff0c;MaskGCT模型也是基于10万小时数据集Emilia训练而来的&#xff0c;精通中英日韩法德6种语言的跨语种合成。数据集Emili…

《数字图像处理基础》学习03-图像的采样

在之前的学习中我已经知道了图像的分类&#xff1a;物理图像和虚拟图像。《数字图像处理基础》学习01-数字图像处理的相关基础知识_图像处理 数字-CSDN博客 目录 一&#xff0c;连续图像和离散图像的概念 二&#xff0c;图像的采样 1&#xff0c; 不同采样频率采样同一张图…

SSA-CNN-LSTM-MATT多头注意力机制多特征分类预测

SSA-CNN-LSTM-MATT多头注意力机制多特征分类预测 目录 SSA-CNN-LSTM-MATT多头注意力机制多特征分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现SSA-CNN-LSTM-MATT麻雀算法优化卷积神经网络-长短期记忆神经网络融合多头注意力机制多特征分类预测&…

ComfyUI - 视觉基础任务 检测(Detection) 和 分割(Segmentation) 的 Impact-Pack 流程 教程

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/141140498 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 在 Com…

【音视频 | ADPCM】音频编码ADPCM详细介绍及例子

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

租房市场新动力:基于Spring Boot的管理系统

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

深入理解数据链路层:以太网帧格式、MAC地址、交换机、MTU及ARP协议详解与ARP欺骗探究

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;Linux从入门到进阶 欢迎大家点赞收藏评论&#x1f60a; 目录 数据链路层 认识以太网以太网帧格式 认识 MAC 地址交换机与碰撞域的划分认识 MTUMTU 对 IP 协议的影响MTU 对 UDP 协议的影响 MTU 对…

SolidWorks 导出 URDF 中的惯性矩阵错误问题

系列文章目录 前言 一、 dsubhasish09于2021年5月23日发表评论 在装配体中定义由多个零件组成的 link 时&#xff0c;单个零件质心处各自的惯性值&#xff08;在使用相似性变换使其与关节坐标系平行后&#xff09;会直接相加&#xff0c;从而得到净惯性矩阵&#xff0c;而不是…

使用linuxdeployqt打包Qt程序问题及解决方法

dpkg: 处理归档 libmysqlclient18_5.6.25-0ubuntu1_amd64.deb (--install)时出错: 预依赖问题 - 将不安装libmysqlclient18:amd64 在处理时有错误发生: libmysqlclient18_5.6.25-0ubuntu1_amd64.deb下载libmysqlclient18/5.6.25 libmysqlclient18/5.6.25-0ubuntu1 安装 s…

如何把图片转换成pdf?这几种转换方法看了就能学会!

如何把图片转换成pdf&#xff1f;在当今这个高度数字化的世界里&#xff0c;图片文件和PDF文件无疑是我们日常生活中最常接触到的两种文件格式&#xff0c;它们各自拥有独特的特性和功能&#xff0c;为我们的工作与生活带来了诸多便利&#xff0c;图片文件&#xff0c;以其卓越…

Android Activity SingleTop启动模式使用场景

通知栏 当用户点击通知栏中的通知时,可以使用单顶启动模式来打开对应的活动,并确保只有一个实例存在。 简单集成极光推送 创建应用 获取appkey参数 切换到极光工作台 极光sdk集成 Project 根目录的主 gradle 配置 Module 的 gradle 配置 Jpush依赖配置 配置推送必须…

乐维网管平台(一):如何精准掌控 IP 管理

业网络已成为支撑业务运转的关键基础设施&#xff0c;而在企业网络管理中&#xff0c;IP 管理至关重要&#xff0c;它就像是网络秩序的守护者&#xff0c;确保网络的高效运行、安全可靠。 一、为什么企业要进行 IP 管理 1. 优化资源分配 IP 地址作为网络中的重要资源&#xf…