JavaScript控制语句和函数的使用

喵果森森2024-09-13 11:47

文章目录

前言

JavaScript 的控制语句和函数的使用，基本上同理于 Java。该篇文章主要展示如何将这些内容以实操的形式展示出来，JavaScript 和 Java 之间的应用场景还是有所不同的。

一、控制语句

流程控制语句对于任何一门编程语言都是十分重要的。

1.if条件语句

if 条件判断语句是最基本、最常用的流程控制语句，可以根据条件表达式的值来执行相应的处理。语法格式如下：

javascript 复制代码 
<script>
    if(expression){
        statement 1
    }else{
        statement 2
    }
</script>

express ：必填项，用于指定表达式，可以使用逻辑运算符。

statement 1 ：用于指定要执行的语句序列，当 express 的值为 true 时，执行该语句。

statement 2 ：用于指定要执行的语句序列，当 express 的值为 false 时，执行该语句。

这里就不多介绍了，Java的各种 if 语句格式，在这里完全适用。

**需求：**在界面中输入用户的账号和密码时，验证用户的登陆信息。

实操：

javascript 复制代码 
<form name="form1" method="post" action="">
    用户名：<input name="user" type="text" id="user">
    密码：<input name="pwd" type="text" id="pwd">
    <input name="Button" type="button" class="btn_grey" value="登录" onclick="check()">
    <input name="Submit2" type="reset" class="btn_grey" value="重置">
</form>
      
<script>
    function check(){
        if(form1.user.value==""){
            //判断用户名是否为空
            alert("请输入用户名！");
            form1.user.focus();
            return;  
        }else if(form1.pwd.value==""&&form1.user.value!=""){
            //判断密码是否为空
            alert("请输入密码！");
            form1.pwd.focus();
        }else{
            from1.submit();
        }
    }
</script>

构造了一个 check() 函数使用了 if 语句。

运行结果：

同Java语言一样，JavaScript 的 if 语句也可以嵌套使用。

2.switch多分支语句

switch 是典型的多分支语句，其用法和嵌套使用 if 语句基本相同，但 switch 语句比 if 语句更加具有可读性，而且 switch 语句允许找不到一个匹配条件的情况下执行默认的一组语句。语句的语法格式如下：

javascript 复制代码 
switch(expression){
    case judgement1:
            statement1;
            break;
    case judgement2:
            statement2;
            break;
    ...
    case judgementn:
            statementn;
            break;
    default:
            statement;
            break;
}

expression：任意的表达式或变量。

judgement：任意的常数表达式。当 expression 的值与某个 judgement 的值相等时，就执行此 case 后的 statement 语句；如果与所有的 judgement 都不相等，则执行 default 后面的 statement 语句。

break：用于结束 switch 语句。

**需求：**如同下方壁纸，在不同的时间点，提示用户不同的消息。例如，时间为早上，输出早上好等消息，可自定义。

**实操：**在模拟的工作网站上方添加一个小机器人根据时间来给打工人解闷。

javascript 复制代码 
<script>
    var robot = "小浩机器人：";
    var date = new Date();
    document.write("当前时间是：" + date + "<br><br>");
    var value = date.getHours();
    
    switch (true) {
        case (value >= 6 && value < 10):
            document.write(robot + "早上好！");
            break;
        case (value >= 10 && value < 12):
            document.write(robot + "在认真上班吗？");
            break;
        case (value >= 12 && value < 14):
            document.write(robot + "你吃了吗？");
            break;
        case (value >= 14 && value < 18):
            document.write(robot + "忙起来就快下班了，加油！");
            break;
        default:
            document.write(robot + "看看是哪个大怨种还在加班 :p");
            break;
    }
</script>

运行结果：

在程序开发的过程中，使用 if 语句还是使用 switch 语句可以根据实际情况而定，尽量做到因地适宜。不要因为 switch 语句的效率高，或者 if 语句最常用而对某个语句厚此薄彼。

3.for循环语句

for 循环语句也称为计次循环语句，一般用于循环次数已知的情况，在 JavaScript 中应用比较广泛。语法格式如下：

javascript 复制代码 
for(initialize;test;increment){
    statement
}

initialize：初始化语句，用于对循环变量进行初始化赋值。

test：循环条件，一个包含比较运算符的表达式，用于限定循环变量的边界。超过边界，则停止循环。

increment：用来指定循环变量的步幅。

statement：用于指定循环体，test的条件判断为 true ，则重复执行该 statement语句。

**需求：**某小区有五百个停车位，为了避讳，除去车位中所有含 4 的车位号（删除后多出空余车位无号不用管）。

实操：

javascript 复制代码 
<html>
    <head>
        <title>网站</title>
    </head>
    <body>
        <script>
            var x = 0;
            var y = 0;
            var z = 0;
            var h = 0;
            document.write("删掉含" 4 "的车位号如下：<br>");
            for (x = 0; x <= 5; x++) {
                for (y = 0; y <= 9; y++) {
                    for (z = 1; z <= 9; z++) {
                        h = 100 * x + 10 * y + z;
                        if (y != 4 && z != 4 && h < 100) {
                            document.writeln("0" + y + z);
                        } else if (x != 4 && y != 4 && z != 4 && h <= 500) {
                            document.writeln(h);
                        }
                    }
                }
            }
            document.write("\n 500");
        </script>
    </body>
</html>

在使用 for 语句时，一定要保证循环可以正常结束，即保证循环条件的结果有中止的情况，否则循环体将无休止地执行下去，从而形成死循环。

for(int i=1;i>=1;i++){

alert(i);

}

//i本身大于1，一直自增，只会不断循环。

运行结果：

4.while循环语句

while循环语句也被称为前测试循环语句（先判断后执行），该语句通过一个条件来控制是否要继续重复执行这个语句。该语句的语法格式如下：

javascript 复制代码 
while(expression){
    statement
}

expression：一个包含比较运算符的条件表达式，用于指定循环条件。

statement：用来指定循环体，在循环条件的结果为true时，重复执行。

**需求：**列举10以内的质数。

实操：

javascript 复制代码 
<script>
    var i = 0;
    document.write("10以内的质数：<br>");
    while(i<10){
        i++;
        if(i%2!=0 && i%3!=0 && i%5!=0 && i!=1 || i==2 || i==3 || i==5){
            document.writeln(i);
        }
    }
</script>

使用 while 语句时，也要保证循环可以正常结束，即必须保证条件表达式的值存在中止的情况，否则将出现死循环。

var i=1;

while(i<=100){

alert(i);

}

//i值一直是小于100的定值，该循环会不断循环。

运行结果：

5.do...while循环语句

do...while 循环语句也被称为后测试循环语句（先执行后判断）。和 while 循环语句不同的是，该语句会先执行一次循环语句，然后再去像 while 语句一样判断是否继续循环执行语句。该语句的语法格式如下：

javascript 复制代码 
do{
    statement;
}while(expression);

statement：用来指定循环体，循环体首先被执行一次，之后循环条件为 true 时，重复执行。

expression：一个包含比较运算符的条件表达式，用来指定循环条件。

**需求：**列举10以内的质数。

实操：

javascript 复制代码 
<script>
    var i = 0;
    document.write("10以内的质数：<br>");
    do{
        i++;
        if(i%2!=0 && i%3!=0 && i%5!=0 && i!=1 || i==2 || i==3 || i==5){
            document.writeln(i);
        }
    }while(i<10);
</script>

do...while 循环语句中的循环体至少被执行一次。

运行结果：

6.break 与 continue 关键字

break 与 continue 关键字都可以用于跳出循环。不同的是，在非嵌套语句的情况下，break 是终止当前所在的循环，并且程序会继续执行循环之后的代码；continue 是中止此次循环，该循环语句开始下一轮循环。

（1）break 关键字

javascript 复制代码 
break;

break 语句通常用在 for、while、do...while 或 switch 语句中。

**实操：**使用 break 关键字中断循环。

javascript 复制代码 
<script>
    var i = 0;
    document.write("10以内的质数：<br>");
    do{
        i++;
        if(i%2!=0 && i%3!=0 && i%5!=0 && i!=1 || i==2 || i==3 || i==5){
            document.writeln(i);
        }
        if(i==5){
            break;
        }
    }while(i<10);
</script>

i 值为 5 时中止了循环。

运行结果：

（2）continue 关键字

javascript 复制代码 
continue;

continue 语句只能应用在 while、for、do...while 和 switch 语句中。

**实操：**使用 continue 关键字中断循环。

javascript 复制代码 
<script>
    var i = 0;
    document.write("10以内的质数：<br>");
    do{
        i++;
        if(i==5){
            continue;
        }
        if(i%2!=0 && i%3!=0 && i%5!=0 && i!=1 || i==2 || i==3 || i==5){
            document.writeln(i);
        }
        
    }while(i<10);
</script>

当 i 值等于 5 时，continue中断了此次循环，开启了下一次循环。 但如果循环条件的结果是 false，则退出循环。

运行结果：

二、函数

函数的实质，就相当于 Java 的方法。通过调用函数（方法）可以使代码更加简洁，提高代码的重用性。

1.函数的定义

JavaScript 的函数由关键字 function、函数名加上一组参数以及放置于大括号中需要执行的代码组成。函数的基本语法如下：

javascript 复制代码 
function functionName(parameter1,parameter2,...){
    statements;
    return expression;
}

functionName：函数名。在同一页面中，函数名必须是唯一的，并且区分大小写。

parameter：参数列表。当使用多个参数时，参数间使用逗号进行分隔。一个函数最多可有255个参数。

statement：函数体。用于实现函数功能的语句。

expression：返回函数值。expression 为任意表达式、变量或常量（该 return 语句可不写）。

**举例：**定义一个计算某个商品的总价的函数，两个参数，指定单价和商品个数，返回值为总价。

javascript 复制代码 
function account(price,number){
    var sun=price*number;
    return sum;
}

2.函数的调用

不带参数的函数，使用函数名加上括号即可；如果要调用的函数带参数，则在括号中加上需要传递的参数；如果包含多个参数，各个参数用逗号分隔。

如果函数有返回值，可以使用赋值语句将函数值赋给一个变量。

**需求：**创建一个自定义函数 check() ，让用户在输入账号和密码的时候，若没有填写进行提示。

实操：

javascript 复制代码 
<form name="form1" method="post" action="">
    用户名：<input name="user" type="text" id="user">
    密码：<input name="pwd" type="text" id="pwd">
    <input name="Button" type="button" class="btn_grey" value="登录" onclick="check()">
    <input name="Submit2" type="reset" class="btn_grey" value="重置">
    <!--onclick属性调用了 check() 函数-->
</form>
    
      
<script>
    function check(){
        if(form1.user.value==""){
            //判断用户名是否为空
            alert("请输入用户名！");
            form1.user.focus();
            return;  
        }else if(form1.pwd.value==""&&form1.user.value!=""){
            //判断密码是否为空
            alert("请输入密码！");
            form1.pwd.focus();
        }else{
            from1.submit();
        }
    }
</script>

该实例中，input 标签中的 onclick 属性调用了 check() 函数。JavaScript 中，由于函数名区分大小写，在调用函数时也要注意区分函数名的大小写。

运行结果：

没有输入密码， onclick 属性调用了 check() 函数，做出了相应的反馈。

总结

以上就是 JavaScript 的控制语句和函数的介绍，本文供要回顾使用 JavaScript 代码同学简单看一眼，有补充或者指正的内容，欢迎在评论区中留言。

相关推荐
小马哥编程1 小时前
Function.prototype和Object.prototype 的区别
javascript
小白学前端6661 小时前
React Router 深入指南：从入门到进阶
前端·react.js·react
web130933203981 小时前
前端下载后端文件流，文件可以下载，但是打不开，显示“文件已损坏”的问题分析与解决方案
前端
王小王和他的小伙伴1 小时前
解决 vue3 中 echarts图表在el-dialog中显示问题
javascript·vue.js·echarts
学前端的小朱1 小时前
处理字体图标、js、html及其他资源
开发语言·javascript·webpack·html·打包工具
outstanding木槿1 小时前
react+antd的Table组件编辑单元格
前端·javascript·react.js·前端框架
好名字08212 小时前
前端取Content-Disposition中的filename字段与解码(vue)
前端·javascript·vue.js·前端框架
摇光932 小时前
js高阶-async与事件循环
开发语言·javascript·事件循环·宏任务·微任务
隐形喷火龙2 小时前
element ui--下拉根据拼音首字母过滤
前端·vue.js·ui
m0_748241122 小时前
Selenium之Web元素定位
前端·selenium·测试工具
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）