【js】学习笔记-流程控制结构(5)

简介: 【js】学习笔记-流程控制结构(5)

个人名片:

😊作者简介:一名大一在校生,web前端开发专业

🤡 个人主页:python学不会

🐼第一次写博客,写的不好望指正
🎅
学习目标: 坚持每一次的学习打卡


什么是流程控制?

流程控制就是对这种做事情的步骤性给予安排与管理,按步骤进行。比如说做一个学习规划表把每天需要做的学习任务依次列下来并按每一个做好,这样不仅可以提高你的学习效率,也可以帮助自己进步。

javascript的三大结构:

⏺️顺序结构 :按照程序书写的先后顺序浏览器依次执行每条语句

⏺️选择结构:根据程序条件输出相应的数据,并做出判断

⏺️循环结构:重复做的一件事

什么是顺序结构?

顺序结构:按照程序书写的先后顺序浏览器依次执行每条语句。

举个🍐

//顺序结构
//向浏览器输出标题和段落
document.write("<h1>This is a header </h1>");
document.write("<p>This is a pig </p>");
document.write("<h2>This is a anothor paragraph </h2>");

输出结果如下:

✨表达式语句:可以理解成javascript中某些需要语句的地方,可以使用一个表达式来代替。

✨声明语句:包括变量声明和函数声明,分别使用var和function关键字

⏺️var语句用来表明一个或者多个变量,关键字var之后跟随的是要声明的变量,每一个变量都带有初始化表达式

var i;

var j = 0;

var p , q;

var x = 2, y= r;

⏺️关键字function用来定义函数

选择结构

选择结构分为

⏺️if分支语句

⏺️switch分支语句

1.1 if语句

✨if条件判断语句被称为单分支语句,当满足某种条件时,就执行程序。

举个🍐只有年龄大于18周岁,才输出已成年,否则无输出。

if(age>=18){
alert('已成年');
}

1.2 if-else 双分支语句

✨if …else语句被称为双分支语句,当满足判断条件时,就执行条件1,否则则执行条件2。

举个🍐判断一个学生年龄大于等于18岁则是成年人,才输出已成年,否则未成年。

//只有年龄大于等于18周岁才输出已成年,否则无输出
var age=20;
if(age>=18){
alert('已成年');
} else{
alert('未成年');
}

1.3 if-else if-else 多分支语句

✨if-else if-else 多分支语句根据不同情况进行不同处理

举个🍐

//学习成绩
var score=80;
if(score>=90){
alert('优秀');
}else if(score>=80){
    alert('良好');
}else if(score>=60){
    alert('及格');
}else {
    alert('不及格');
}

注意: “ if-else if-else “ 语句在使用时。“else if”中间要有空格,否则程序会报语法错误

2.1 switch-case 多分支语句

✨switch语句也是多分支语句,功能与if系列条件语句相同,不同的是它只能针对某个表达式的值做出判断,从而决定执行那一段程序

举个🍐 使用new Date() .getDay() 方法获取系统日期,显示当天星期名称,0代表星期天

//判断星期几
var day=new Date().getDate();
switch(day)
{
    case 0:alert("今天是星期日");
    break;
    case 1:alert("今天是星期一");
    break;
    case 2:alert("今天是星期二");
    break;
    case 3:alert("今天是星期三");
    break;
    case 4:alert("今天是星期四");
    break;
    case 5:alert("今天是星期五");
    break;
    case 6:alert("今天是星期六");
    break;
    default:alert("无");
}

2.2 switch-case 与 if-else if-else 的区别

⏺️switch-case 与 if-else if-else一样,都是逐个分支进行判断,性能上差不多

⏺️Switch结构:主要是将变量或表达式的值于某个case值进行比较,而case值通常是一个 确定值

⏺️if else:if结构域中的条件可以匹配一个确定值的布尔表达式,也可以匹配一个范围的布尔表达式

注意:switch-case一帮用于等值判断,if-else不仅可以用于等值判断,还可用于范围判断

循环结构

3.1 while 循环

✨while循环语句根据循环条件判断是否重复执行一段程序

举个🍐 输出5次“你好”

//使用while循环语句 输出5次“你好”
var num=0;
while(num<5){
    document.write("你好"+"<br>");
    num++;
}

举个🍐 使用while 循环计算1到100的值

//计算1到100的值
var num=1,sum=0;
while(num<=100){
sum+=num;
num++;
}
alert(sum);
//输出结果5050

3.2 do-while 循环

do-while 循环语句的功能与while循环语句类似,唯一区别在于,while先判断条件后执行循环体,而do while会无条件执行一次循环体后在判断条件

举个🍐 使用do-while循环计算到1到100的值

//do-while 循环 计算1到100
var sum=0;
num = 1;
do{
    sum+=num;
    num++;
}while(num<=100);
alert("sum");

死循环注意:若循环条件永远为TRUE时,则会出现死循环,因此根据实际需要,在循环体中设置循环出口,即循环结束的条件

3.3 for 循环

✨for循环语句是最常用的循环语句,他适合循环次数已知的情况

for 循环包括三部分:

  1. 初始化表达式
  2. 循环条件
  3. 操作表达式 他们之间用“ ;” 分隔

举个🍐 使用for循环输出**“*”**

//for 循环
for(var i=0;i<5;++i){
    document.write('*');
}
//输出 *****

注意:for循环语句小括号“( )”内每个表达式都可以为空,但必须保留分号分隔符。当每个表达式为空时,表示该for循环语句的循环条件永远满足,会进入无限循环状态,此时如果要结束无限循环,可在for循环体中用跳转语句进行控制。

3.4 for-in循环

✨for-in循环语句用于对数组的元素或者对象的属性进行遍历操作(遍历指访问数组的每一个元素)

学习总结:这次学习的内容稍有些复杂,需要多进行项目练习进行理解加深,大家有什么疑问或是我做错的地方都可以指出来,下一章分享案例,谢谢大家观看☺️😊😘

目录
相关文章
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-流程控制之while循环
这篇文章介绍了JavaScript中的while循环和do...while循环的基础知识,并通过一个实际案例演示了如何使用while循环计算投资增长到特定金额所需的年数。
55 2
JavaScript基础知识-流程控制之while循环
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
66 3
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-流程控制之for循环
这篇文章讲解了JavaScript中的for循环的基础知识,并通过一个实例演示了如何使用for循环来找出所有的三位水仙花数。
61 6
JavaScript基础知识-流程控制之for循环
|
2月前
|
JavaScript 前端开发
【干货分享】JavaScript学习笔记分享
【干货分享】JavaScript学习笔记分享
58 0
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
4月前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
51 0
|
4月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
50 0
|
5月前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
6月前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
45 1