JS - 分支结构、循环结构

news/2024/9/24 13:17:16/

关于JavaScript中的分支结构和循环结构,其实和其他编程语言区别也不是很大,只是js对这两种结构进行了相应的扩充,当然本质上并没有变化,本篇就是一篇记录博主在学习前端路上的总结和敲过的demo,实际上水份很大,但是保留博主在学习路上的笔记,对于大部分开发者而言,这些都是常识,大家都知道,但是对于博主而言,这些是博主成长路上的见证,是博主本人宝贵的财富。

JS中的分支结构

if

用于根据条件执行不同的代码块。

if (condition) {// 如果条件为真,执行这里的代码
}

if-else

if (condition) {// 如果条件为真,执行这里的代码
} else {// 如果条件为假,执行这里的代码
}

if - else if - else

用于根据多个条件执行不同的代码块。

if (condition1) {// 如果条件1为真,执行这里的代码
} else if (condition2) {// 如果条件2为真,执行这里的代码
} else {// 如果以上条件都为假,执行这里的代码
}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript">javascript">/**prompt()可以弹出一个提示框,该提示框中会带有一个文本框*用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数* 该字符串将会作为提示框的提示文字* 用户输入的内容将会作为函数的返回值返回,可以定义一个变量来接受该内容*///练习一/*var score = prompt("小明的期末考试成绩:");if(score == 100){document.write("奖励一辆BMW");}else if(score >=80 && score <=99){document.write("奖励一台iphone15s");}else if(score >=60 && score <80){document.write("奖励一本参考书");}else{document.write("无任何奖励");}*///练习二/*var height = prompt("男方身高为(单位cm):");var rich = prompt("男方家境情况(单位万):");var appearance = prompt("男方帅气值:");if(height >=180 && rich>=1000 && appearance >= 500){document.write("我一定要嫁给他");}else if(height >=180 || rich >= 1000 || appearance >= 500){document.write("嫁吧,比上不足,比下有余。");}else{document.write("不嫁");}*///练习三,prompt输入的变量类型是字符串,前面加个+让其变成Number类型var num1 = +prompt("请输入第一个整数:");var num2 = +prompt("请输入第二个整数:");var num3 = +prompt("请输入第三个整数:");var num4;console.log(typeof num1);/*if(num1 >= num2){num4 = num1;num1 = num2;num2 = num4;}if(num1 >= num3){num4 = num1;num1 = num3;num3 = num4;}if(num2 >= num3){num4 = num2;num2 = num3;num3 = num4;}document.write(num1 +"<" + num2 +"<" + num3);*/</script></head><body></body>
</html>

switch

用于根据不同的表达式值执行不同的代码块。

switch (expression) {case value1:// 如果表达式的值等于value1,执行这里的代码break;case value2:// 如果表达式的值等于value2,执行这里的代码break;default:// 如果表达式的值不匹配任何case,执行这里的代码
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript">javascript">/**对于成绩大于60分的,输出合格*低于60分的,输出不合格*/var score = +prompt("输入你的成绩:");switch(true){case score >=60:document.write("合格");break;default:document.write("不合格");break;}/*var num2= +prompt("输入一个数字(1~7):");switch(num2){case 1:document.write("星期一");break;case 2:document.write("星期二");break;case 3:document.write("星期三级");break;case 4:document.write("星期四");break;case 5:document.write("星期五");break;case 6:document.write("星期六");break;case 7:document.write("星期日");break;}*/</script>
</head>
<body></body>
</html>

三元运算符

let result = condition ? value1 : value2;

循环结构

循环结构用于重复执行一段代码,直到满足特定条件为止。循环结构可以解决需要重复执行相同或类似任务的问题。JavaScript中存在一些特殊的循环结构,当然本质上和其他语言的循环结构大致都是相同的,万变不离其宗,大体还是相同的。接下来跟着我一起来了解一下JavaScript的循环结构吧。

for循环

这个大众都知道,只要你从事编程,这个都不知道,那么你该恶补一下基础知识了,for循环是我们用的最多的一种循环结构。他用于指定初始条件,循环条件,和每次迭代后的操作

for (初始化; 循环条件; 迭代操作) {// 循环体中的代码
}
//for循环从0开始,每次迭代增加1,直到i小于5为止。循环体中的代码会被执行5次,分别输出0到4。
for (let i = 0; i < 5; i++) {console.log(i);
}

for循环适用于已知循环次数的情况,可以通过控制循环条件和迭代操作来控制循环的执行次数。

while循环

在循环开始之前检查循环条件,只要条件为true,那就会重复执行循环体中的代码。注意:使用不当容易造成死循环,建议结合break使用

while (循环条件) {// 循环体中的代码
}
//while循环会在每次迭代之前检查条件i是否小于5。只要条件为真,循环体中的代码会被执行。循环体中的代码会被执行5次,分别输出0到4。
let i = 0;
while (i < 5) {console.log(i);i++;
}

while循环适用于未知循环次数的情况,只要条件为真,就会一直执行循环体中的代码。

do - while循环

do-while循环:先执行循环体中的代码,然后再检查条件。只要条件为真,就会重复执行循环体中的代码。

do {// 循环体中的代码
} while (循环条件);
//do-while循环会先执行循环体中的代码,然后再检查条件i是否小于5。只要条件为真,循环体中的代码会被执行。循环体中的代码会被执行5次,分别输出0到4。
let i = 0;
do {console.log(i);i++;
} while (i < 5);

do-while循环与while循环类似,但它保证循环体至少执行一次,即使条件一开始就为假。

for … in 循环

用于遍历对象中的可枚举属性

for (变量 in 对象) {// 循环体中的代码
}
//for...in循环会遍历person对象的每个可枚举属性,并将属性名赋值给变量key。循环体中的代码会被执行3次,分别输出"name: John"、"age: 30"和"city: New York"。
const person = {name: "John",age: 30,city: "New York"
};
for (let key in person) {console.log(key + ": " + person[key]);
}

for…in循环会遍历对象的每个可枚举属性,并将属性赋值给变量,然后执行循环体中的代码。

for … of 循环

用于遍历可迭代对象(如数组、字符串等)的元素。

for (变量 of 可迭代对象) {// 循环体中的代码
}
//for...of循环会遍历colors数组的每个元素,并将元素值赋值给变量color。循环体中的代码会被执行3次,分别输出"red"、"green"和"blue"。
const colors = ["red", "green", "blue"];
for (let color of colors) {console.log(color);
}

for…of循环会遍历可迭代对象的每个元素,并将元素赋值给变量,然后执行循环体中的代码。

break和continue

break:用于立即终止循环,并跳出循环体。当执行到 break 关键字时,循环会立即停止,不再执行循环体中剩余的代码,然后程序会继续执行循环之后的代码。

continue:用于跳过当前迭代,继续执行下一次迭代。当执行到 continue 关键字时,循环会跳过当前迭代剩余的代码,直接进入下一次迭代。

//当 i 的值等于 3 时,break 语句会被执行,循环会立即终止,输出结果为 0、1、2。
for (let i = 0; i < 5; i++) {if (i === 3) {break;}console.log(i);
}
//当 i 的值等于 2 时,continue 语句会被执行,当前迭代的剩余代码会被跳过,直接进入下一次迭代,输出结果为 0、1、3、4。
for (let i = 0; i < 5; i++) {if (i === 2) {continue;}console.log(i);
}

http://www.ppmy.cn/news/1426002.html

相关文章

C++实战——日期类的实现

日期类的实现 前言一、日期类概念实现运用场景 二、日期类的具体实现代码构造函数拷贝构造函数获取日期&#xff08;内联函数&#xff09;赋值加等减等加减小于小于等于大于大于等于相等不相等前置后置前置- -后置- -关于类里重载的比较运算符为什么要加外部const示例 Date.hDa…

matlab多核程序如何共享内存和数据

在MATLAB中&#xff0c;多核程序共享内存和数据主要依赖于MATLAB的并行计算工具箱&#xff08;Parallel Computing Toolbox&#xff09;。这个工具箱提供了多种机制来在多个工作进程&#xff08;workers&#xff09;之间共享数据&#xff0c;这些工作进程可能运行在同一台机器的…

用mySql设计一个在线简易在线交易平台数据库

设计需求 当设计一个在线交易商店的数据库架构时&#xff0c;需要考虑多个方面&#xff0c;包括产品信息、订单管理、用户信息、支付信息等。以下是一个简单的数据库架构示例&#xff1a; 产品信息表 (Products) ProductID (主键)ProductNameDescriptionPriceStockQuantity 订…

利用vue3SeamlessScroll 简单实现列表的无限循环滚动

Vue3SeamlessScroll 该组件用于实现列表的无限循环滚动 1、安装 npm i vue3-seamless-scroll 2、导入及基本使用 <!--组件.vue--> <script setup>import { Vue3SeamlessScroll } from vue3-seamless-scroll;import {ref} from vue//vue3导入组件是不需要用com…

MacOS Github Push项目 精简版步骤

大白菜教程&#xff1a;小白菜 macOS github提交代码-CSDN博客 步骤1&#xff1a;git init步骤2&#xff1a; touch .gitignore 创建ignore文件 open .gitignore 打开ignore文件 编写ignore文件.idea/ 是文件夹的意思.git/ 也是自动生成的文件夹 也不上传.DS_St…

Day07 React——第七天 (18新特性 hook)

React 18引入了hooks&#xff0c;这是一种让函数组件拥有类组件的功能的方式。使用hooks&#xff0c;函数组件可以拥有状态管理、生命周期方法、副作用处理等功能&#xff0c;使得函数组件具有了和类组件类似的能力。hooks可以让函数组件更加灵活和易于管理&#xff0c;同时也减…

Jenkins的安装和部署

文章目录 概述Jenkins部署项目的流程jenkins的安装启动创建容器进入容器浏览器访问8085端口 Jenkins创建项目创建example项目 概述 Jenkins&#xff1a;是一个开源的、提供友好操作界面的持续集成&#xff08;CLI&#xff09;工具&#xff0c;主要用于持续、自动构建的一些定时…