6.前端笔记-JS-流程控制

已于 2022-12-30 18:04:38 修改
阅读量542 收藏 1
点赞数
分类专栏： js 文章标签： 前端 javascript 开发语言
于 2022-12-27 23:53:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ambition_ZM/article/details/128461010
版权

1、流程控制

通过控制代码的执行顺序实现我们要完成的功能。控制代码按照什么结构顺序执行
有三种结构：顺序结构、分支结构、循环结构

1.1 顺序流程控制

最简单、最基本的流程控制。程序按照代码的先后顺序，依次执行

1.2 分支流程控制

从上到下执行代码的过程中，根据不同的条件，执行不同的代码，从而得到不同的结果
js中提供了两种分支结构的语句

  • if语句、if-else语句
  • switch语句

1.2.1 if语句

//条件表达式1结果为真，就执行语句1.否则就跳过if执行下边的语句
if(条件表达式1){
//执行语句1
}

进入网吧案例：

<!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>
        //如果输入年龄>=18就输出可以进入网吧
        var age=prompt('请输入年龄：');
        if(age>=18){
            alert("可以进入");
        }
    </script>
</head>
<body>
    
</body>
</html>

键盘输入19
在这里插入图片描述

1.2.2 if-else语句

条件表达式结果为真，执行语句1，否则执行语句2

if(条件表达式）{
//执行语句1
}else{
//执行语句2
}

案例2：大于等于18，进入网吧。小于18,去学习

<!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>
        //如果输入年龄>=18就输出可以进入网吧
        var age=prompt('请输入年龄：');
        if(age>=18){
            alert("可以进入");
        }else{
            alert("请回去学习");
        }
    </script>
</head>
<body>
    
</body>
</html>

案例3：判断闰年
闰年：能被4整除且不能被100整除的是闰年，或者能被400整除的也是闰年

<!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>
        var year=prompt("请输入年份：");
        if(year%4==0&&year%100!=0||year%400==0){
            alert(year+"年是闰年");
        }else{
            alert(year+"年不是闰年");
        }
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

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

if(表达式1){
//执行语句1；
}else if(表达式2){
//执行语句2；
}else{
//执行语句3；
}

1.2.3 三元表达式

一元表达式：++num;
二元表达式：n+m
三元表达式：如果条件表达式结果为真，则返回表达式1的值，否则返回表达式2的值

条件表达式?表达式1：表达式2；

<!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>
        var num=10;
        var res=num>10?"是":"否";
        alert(res);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
案例：
用户输入数字，如果数字小于10，就在前面补0，比如01，09.如果数字大于10，就不需要补，比如20

<!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>
        var num=prompt("请输入0~59之间的数字");
        var res=num<10?'0'+num:num;
        alert(res);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

1.2.4 switch语句

//表达式的值与case后的值进行匹配，匹配上就执行该case里的语句，都没有匹配上就执行default的语句
switch(表达式){
	case value1:
		执行语句1;
		break;
	case value2:
		执行语句2;
		break;
	default:
		执行最后的语句;
}

注意：

  • 表达式经常写的是变量名
  • 变量值和case里的值进行匹配时是全等匹配的，就是变量值===value
  • break一定要写，否则会穿透，比如已经满足条件执行了语句1，但因为case语句1后边没有写break，还会依次执行语句2…
<!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>
        var num=3;
        switch(num){
            case 1:
                console.log(1);
                break;
            case 2:
                console.log(2);
                break;
            default:
                console.log(3);
        }
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

1.2.5 if-else-if与switch的区别

  • 一般情况下，两个语句可以相互替换’
  • switch语句通常处理case为比较确定值的情况，而if-else-if语句更加灵活，常用于范围判断（大于等于某个范围）
  • siwtch条件判断后直接执行到程序的条件语句，效率更高，而if-else语句有几种条件就要判断几次

2、循环

目的：可以重复执行某些代码和操作

2.1 for循环

循环体：一组被重复执行的语句
循环终止条件：决定是否继续重复执行的条件
循环语句：由循环体和循环终止条件组成的语句

2.1.1 语法结构

for循环主要用于把某些代码循环若干次，通常跟计数有关系。

for(初始化变量;条件表达式;操作表达式){
	//循环体
}
断点调试：

浏览器-F12-sources-page-找到需要调试的文件-在程序的某一行设置断点-刷新浏览器
在这里插入图片描述

例子：

练习1：

<!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>
        for(var i=1;i<3;i++){
            console.log("第"+i+"次循环");
        }
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
练习2：

<!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>
//  1.1-100平均值
        var total=0;
        for(var i=1;i<=100;i++){
            total+=i;
        }
        var average=(total/100);
        console.log("1-100平均值="+average);
        // 2.1-100所有偶数和奇数的和
        var odd=0;
        var even=0;
        for(var i=1;i<=100;i++){
            if(i%2==0){
                even+=i;
            }else{
                odd+=i;
            }
        }
        console.log("1-100所有奇数和="+odd+"所有偶数和="+even);
        // 3.1-100所有能把3整除的数字的和
        var res3=0;
        for(var i=1;i<=100;i++){
            if(i%3==0){
                res3+=i;
            }
        }
        console.log("1-100能被3整除的数字的和="+res3);


    </script>
    

</head>
<body>
    
</body>
</html>

在这里插入图片描述
练习3：

<!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>
        var num=prompt("班级人数：");
        var sum=0;
        for(var i=1;i<=num;i++){
            var score=prompt("第"+i+"学生成绩是：");
            sum+=parseFloat(score);
        }
        var average=sum/num;
        alert("学生平均成绩是="+average);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2.2 双重for循环

2.2.1 语法结构

外部的循环执行一次，里边的循环执行全部

for(外层初始化变量;外层的条件表达式;外层的操作表达式){
	for(里层初始化变量;里层的条件表达式;里层的操作表达式){
		//里层循环体；
	}
	//外层循环体;
}
案例：
打印倒三角：

第1行打印10个，第2行8个…第10行1个

<!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>
        var str='';
        for(var i=1;i<=10;i++){
            for(var j=i;j<=10;j++){
                str+='♥';
            }
            str+='\n';
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

九九乘法表
<!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>
        var str='';
        for(var i=1;i<=9;i++){
            for(var j=1;j<=i;j++){
                var tmp=j+'*'+i+'='+j*i;
                str=str+tmp+' ';
            }
            str+='\n';
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2.3 while循环

当条件表达式结果为true，就执行循环体
先判断后执行，所以循环体有可能一次也执行不了

while(条件表达式){
	//循环体
}

2.4 do while循环

先执行一次循环体，再判断条件
表达式结果是否为true,如果为真继续执行循环体，否则推出循环
所以do while循环体至少会执行一次

do{
//循环体
}while(条件表达式)


<!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>
        // <!-- 计算1-100的和 -->
        var sum = 0;
        var i=1;
        do{
            sum+=i;
            i++;
        }while(i<=100)
        alert("1-100之和="+sum);

    </script>
</head>

<body>


</body>

</html>

在这里插入图片描述

2.4 continue和break

2.4.1 continue

用于跳出本次循环，继续进入下次循环

<!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>
        var sum=0;
        for(var i=1;i<=100;i++){
            if(i%7==0){
                continue;
            }
            sum+=i;
        }
        alert("sum="+sum);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2.4.2 break

用于立即跳出整个循环（循环结束）

<!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>
        for(var j=1;j<=5;j++){
            if(j==3){
                break;
            }
            alert("我在吃第"+j+"个包子");
        }
    </script>
</head>
<body>
    
</body>
</html>
MY Daisy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS流程图JS流程图
12-21
JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图
前端学习之JavaScript（流程控制）
qq_45839045的博客
01-14 316
流程控制概念 在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。 简单理解：**流程控制就是来控制代码按照一定结构顺序来执行** 流程控制主要有三种结构，分别是**顺序结构**、**分支结构**和**循环结构**，代表三种代码执行的顺序。 顺序流程控制 ​ ​ 顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。 ​
JavaScript前端流程控制
SHANYULOU的博客
03-24 455
流程控制 一、选择结构 （1）、选择结构 单分支： if（）{ } 双分支： if（）{ }else{ } 多分支： if（）{ }elseif（）{ }else{ } （2）、switch语句 switch()语句可以使用任何数据类型，如：字符串、对象等。 每个case的值不一定是常量，可以是变量，甚至是表达式。 switch语句在比较值时使用的是恒等操作符。 switch(...
前端学习笔记-JS-流程控制
qq_36434637的博客
09-09 172
流程控制 流程控制就是用来控制我们的代码按照什么顺序来执行的 顺序结构 从上到下执行的代码就是顺序结构 程序默认就是由上到下顺序执行的 分支结构 从上到下执行的代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果。 1.if语句 语法结构 if (/* 条件表达式 */) { // 执行语句 } ​ if (/*...
前端学习之JavaScript——流程控制 分支
Jane_xxxxxy的博客
08-02 698
1、流程控制 在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。 简单理解： 流程控制就是来控制我们的代码按照什么结构顺序来执行 流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。 2、顺序流程控制 顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。 3、分支流程控制 if 语句 3.1 分支结构 由
frontend-notes:前端学习笔记
05-24
包含 JS 数据类型、闭包、原型链、JS 继承、执行上下文、事件循环和异步 title details 计算机网络 包含五层协议栈、TCP、HTTP、Ajax 通信和跨域等 title details 浏览器 包含浏览器多进程架构、网络请求和页面渲染...
White-Jotter-Vue:白笔记本的前端
03-08
这是一个简单的前初步分离项目，主要采用Vue.js + SpringBoot技术栈开发。 除了使用入门练习，我还希望该项目可以作为一些常见的Web项目的脚手架，帮助大家简化构建网站的流程。之所以叫白卷，是因为它从0开始，会...
整理Javascript流程控制语句学习笔记
11-24
例子：假设你应聘web前端技术开发岗位，如果你会HTML技术，你面试成功，欢迎加入公司。 [removed] var mycarrer = "HTML"; if (mycarrer == "HTML"){ [removed]("你面试成功，欢迎加入公司。"); } [removed] ...
JavaScript流程控制.xmind
09-12
自己总结的JavaScript流程控制的笔记，绘制了详细的思维导图，每个思维导图中均有详细的博文解释，方便大家学习和理解，免费分享给大家。适合网页前端的爱好者和学习者
vue.js的笔记讲解
04-16
Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们...本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通过Vue.js来构建一个中大型的前端项目，同时做好相应的部署与优化工作。
流程图Js插件
06-13
流程图Js插件，多种模板，可进行二次开发，基本覆盖各行业使用
JS 流程图 流程图插件
06-11
 跨浏览器，可兼容IE7--IE10， FireFox， Chrome， Opera等几大内核的浏览器，且不需要浏览器再加装任何控件。  多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上，流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/接收能被本插件解析的JSON格式数据即可.所以本插件可用于不同的服务器语言建立的后台上.  跨领域:流程图设计器不止用在电信领域,在其它需要IT进行技术支持的领域中都有重大作用.  以下从纯技术实现层面具体描述:  页面顶部栏、左边侧边栏均可自定义；  当左边的侧边栏设为不显示时，为只读状态，此时的视图区可当作是一个查看器而非编辑器。  侧边工具栏除了基本和一些流程节点按钮外，还自定义新的节点按钮，自定义节点都可以有自有的图标、类型名称，定义后在使用可可在工作区内增加这些自定义节点。  顶部栏可显示流程图数据组的标题，也可提供一些常用操作按钮。  顶部栏的按钮，除了撤销、重做按钮外，其余按钮均可自定义点击事件。  可画直线、折线；折线还可以左右/上下移动其中段。  具有区域划分功能，能让用户更直观地了解哪些节点及其相互间的转换，是属于何种自定义区域内的。  具有标注功能，用橙红色标注某个结点或者转换线，一般用在展示流程进度时。  能直接双击结点、连线、分组区域中的文字进行编辑  在对结点、连线、分组区域的各种编辑操作，如新增/删除/修改名称/重设样式或大小/移动/标注时，均可捕捉到事件，并触发自定义事件，如果自定义事件执行的方法返回FALSE，则会阻止操作。  具有操作事务序列控制功能，在工作区内的各种有效操作都能记录到一个栈中，然后可以进行撤销（undo()）或重做（redo()），像典型的C/S软件一样。  0.4版中，加入了只导出在初始载入后被编辑的流程图中,只作了增删改等变更的元素，这样可用于用户快速存储，只保存本次变更过的内容，不用重新保存整个流程。  0.5版中，结点的样式不再受到原有程序的限制，所有样式均默认为淡蓝色长方形；如果要指定为圆形，可在初始化时定义结点类型为”原有类型”+” round”；如果要指定为复合结点，则可在初始化时定义结点类型为”原有类型”+” mix”。”原有类型”+” myType”:myType可为自己写的一种特殊样式类.  0.6版中，修正了一些BUG，改善了用户操作体验，并增加在可编辑状态下时，能用键盘上DELETE按键对元素进行删除功能。  0.7版中，修正了一些BUG，增加了连线变更要连的起始结点或结束结点的功能。  0.8版，取消原来的拟物化页面，变成如今的扁平化页面，并且支持主要位置的颜色自定义功能（如果想沿用原来老版本中的拟物化页面，只需保留原来的GooFlow.css文件即可）；修正0.7版中的画线BUG。
Web流程图制作（基于js）
04-30
基于js的流程图制作！可以用于毕业设计，生成XML供别的程序调用
异步流程控制
weixin_34268753的博客
06-29 163
单线程与异步Javascript是单线程运行、支持异步机制的语言。进入正题之前，我们有必要先理解这种运行方式。以「起床上班」的过程为例，假设有以下几个步骤：起床（10min）洗刷（10min）换衣（5min）叫车（10min）上班（15min）最简单粗暴的执行方式就是按顺序逐步执行，这样从起床到上班共需50分钟，效率较低。如果能在「洗刷」之前先「叫车」，就可以节省10分钟的等车时间。这样一来「叫车...
前端系列之JavaScript（流程控制语句）
十二指环的博客
01-23 486
JS的分支语句：条件语句if语法一：if(condition){ statement1; }语法二：if(condition){ statement1; }else{ statement2; }语法三：if(condition){ statement1; }else if{ statement2; }...else{ statement3; }var age = prompt
一道前端流程控制面试题
铁臂阿凡达的博客
08-14 304
最近在面试时遇到这样一道笔试题，觉得很有意思，拿出来分享一下。 看题目： 实现一个 LazyMan，按照以下方式调用时，得到相关输出： LazyMan("Hank") // Hi! This is Hank!   LazyMan("Hank").sleep(10).eat("dinner") // Hi! This is Hank! // *等待 10 秒.. // Wake up after 10 // Eat dinner~   LazyMan("Hank").eat("dinner").eat("
流程控制
从零开始的web前端工程师生活
11-18 532
一、流程控制 在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。 简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行。 流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。 二、顺序流程控制 顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代...
【前端进阶】前端工作流程详解，如何构建高效、可靠的前端工作流程
weixin_55846296的博客
06-27 2151
随着Web技术的不断发展，前端开发越来越受到关注和重视。然而，前端开发本身就十分复杂，如果没有一个规范的工作流程和有效的工具支持，就会导致项目的延期、出现重复的错误以及代码难以维护等问题。本文将分享如何构建一个高效、可靠的前端工作流程，帮助前端开发者在开发中提高效率和代码质量，并适应快速迭代和高质量代码交付的要求。前端工作流程可以解释为一系列从需求分析到代码上线的标准化流程。前端开发者需要遵循这些流程，并且遵守团队内部的规范，来确保代码的质量和项目的交付质量。
js流程控制
释怀°Believe的博客
01-26 672
一、顺序流程控制 程序按照代码的先后顺序进行依次执行 二、分支流程控制 再执行代码过程中，根据不同的条件，执行不同的路径代码，从而得到不同的结果； 1.语法结构否则什么也不做 条件成立，执行代码， var year = prompt('请输入年份'); if(year % 4 == 0 && year % 100 != 0 || year % 400 ==0){ alert('你输入的年份是闰年'); }else{
x.unsqueeze(-1)
最新发布
08-16
- *2* [PyTorch版《动手学深度学习》学习笔记 Task.4](https://download.csdn.net/download/weixin_38695773/14034979)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值