web前端技术之JavaScript基础分支循环转移语句和函数

文章目录

---

前言

本文内容为if条件语句、switch多分支语句、while循环、do while循环、for循环、 for in循环、break语句、 continue语句、return语句、with语句、预定义函数和自定义函数。

走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流，一起努力一起成长！

笔芯

---

6.4流程控制

分支结构(if和switch)

JavaScript中的分支结构有以下两种:

if条件语句

当condition值设为0、null、" "、false、undefined或NaN时，不执行相应的程序分支部分。当condition值为true、非空字符串（包括”false”字符串）或非null对象时，执行相应的程序分支部分。

<script> if (condition1){ statement1;//语句执行块 } else if (condition2){//else if可有也可无，根据需要来用，else也是。 statement2; } else { statement3; } </script>

例：

<script type="text/javascript">
    var s=1;
    if(null){
        console.log("s......");}
    else if(s==1){
        console.log("s");}
    else{
        console.log("s...");}
</script>

switch多分支语句

switch语句是由控制表达式和case标签共同构成。其中，控制表达式的数据类型可以是字符串、整型、对象类型等任意类型。

<script type="text/javascript">
    var score=65;
    switch(score/10) {
        case 6:
            console.log("及格");
            break ;
        case 8:
            console.log("良好");
            break ;
        case 9:
            console.log("优秀");
            break ;
            default:
                break;
    }
</script>

循环结构

while循环

又称前测试循环，是指在执行循环代码之前判断条件是否满足;当条件满足时执行循环体部分，否则结束循环，

while(expression){

statement;}

do while循环

do while循环又称后测试循环，与while循环有一定的区别。

while循环是先判断循环条件，符合条件后进行循环。do while是先执行循环体，然后判断条件是满足进入下一次循环的条件

do{

statement;

}while(expression);

for循环

for循环也是一种前测试循环，一般用于循环次数已知的情况。

for(initialization; expression; post-loop-expression){

statement;}

** for in循环**

是JavaScript提供的一种特殊循环，可以对字符串、数组、对象集合、对象属性等进行遍历。

for in循环多用于对集合的遍历，由于部分浏览器对for in数组遍历的支持不够好，可能出现未知错误，建议尽量不使用for in循环对数组进行遍历。

for (property in object){

statement;

}

转移语句

使用转移语句来控制程序的执行方向，包括break语句、continue语句和return语句。

break语句

在switch结构中，遇到break语句时，就会跳出switch分支结构

在循环结构中，遇到break语句时，立即退出循环，不再执行循环体中的任何代码

** continue语句**

当程序执行过程中遇到continue时，仅仅退出当前本次循环,然后判断是否满足继续下一次循环的条件

return语句

在执行函数体时，遇到return语句便会退出当前函数，不再执行该函数return语句之后的代码

<script type="text/javascript">
    function count(){
var sum=0;
for(var i=100;i<1000;i++){
sum+=i;
if(sum<10000){
document.write("<br/>已统计到:"+i);
continue;
}
if(i>200){
break;
}
return sum;
}
document.write("不会被执行到的代码!");
    }document.write("<br/>统计结果为:"+count());
</script>

with语句

在JavaScript中，使用with语句可以简化对象操作，使代码更加简洁with语句虽然可以精简代码，但其运行效率相对缓慢。一般情况下，尽量避免使用with语句

<script type="text/javascript">
    with(document){
        write("<table border='1'>");
        write("<tr>");
        write("<th>ID</th><th>商品编号</th><th>价格</th>");
        write("</tr>");
        var i=1;
        while(i<=4){
            write("<tr>");
            write("<td>"+i+"</td>");
            write("<td>FZO0"+i+"</td>");
            write("<td>"+(Math.random()*100).toFixed(2)+"</td>");write("</tr>");
            i++;
        }
        write("</table>");
    }
</script>

6.5函数

函数可分为预定义函数和用户自定义函数。

预定义函数

是指在JavaScript引擎中预先定义的内建函数，用户无需定义便可直接使用。

parselnt()函数

将字符串转换成整型，即解析字符串，从中返回一个整数。

当字符串中存在除了数字、符号、小数点和指数符号以外的字符时，parselnt()函数就停止转换，返回已有的结果。

当第一个字符就不能转换时，函数将返回“NaN”(即Not a Number，不是一个数字)。

parselnt(string,[radix])

parsefloat()函数

将字符串转换成浮点型，用于解析字符串，从中返回一个浮点数。

parseFloat(string)

isNaN()函数

测试是否不是一个数字(全称: is not a number)，当参数是一个数字时，返回一个false;否则返回true。用于检查其参数是否是一个非数字值。

isNaN(value)

eval()函数

测试是否是一个无穷。如果是，返回一个false，否则返回true。将JavaScript中的字符串作为脚本代码来执行。

eval(string)

escape()函数:

将字符转换成Unicode码

unescaped()函数:

解码由escape函数编码的字符

alert()函数

用于弹出一个提示对话框

confirm()函数

用于弹出一个确认对话框，在确认对话框中，点击“确定”时返回true，点击“取消”时返回false

prompt()函数

用于接收用户输入的输入框

注：函数alert()、confirm()、 prompt()实际上是window对象的方法，用来弹出对话框与用户实现交互。在使用时，window对象可以省略。

自定义函数

在自定义函数时既不需要声明函数的参数类型，也不需要声明函数的返回类型

JavaScript目前支持的自定义方式有命名函数、匿名函数、对象函数和自调用函数

命名函数

函数是由函数定义和函数调用两部分组成。在使用函数时，应先定义函数，然后再进行调用。function funcName([parameters]){ //parameters参数可选，当提供多个参数时参数之间使用逗号(，)隔开

statementes;

[return expression]; //return语句可选，用于返回函数的返回值;当return缺省时，函数将返回undefined

}

完成函数的定义后，函数并不会自动执行，只有通过事件或脚本调用时才会执行。

在同一个<script></script>标签中，函数的调用可以在函数定义之前，也可以在函数定义之后。在不同的<script></script>标签中时，函数的定义必须在函数的调用之前，否则调用无效。

匿名函数

通过表达式的形式来定义一个函数。

function([parameters]){

statementes;

[return expression];

};

匿名函数的定义格式与命名函数基本相同，只是没有提供函数的名称，且在函数结束位置以分号;)结束。

由于没有函数名字，所以需要使用变量对匿名函数进行接收，方便后面函数的调用。

<script type="text/javascript">
  var f=function(user){
    alert("欢迎"+user+"下次光临！");
  }
  var test=f;
  f("admin");
  test("admin");//f("admin")与test("admin")调用的结果完全一样。
</script>

对象函数

提供了Function类，用于定义函数。Function是用来定义函数的关键字，首字母必须大写。var funcName=new Function([parameters],statements;);

<script type="text/javascript">
    var showinfo=new Function("name","age" ,"authority" ,"address"；
       );
</script>

自调用函数

函数本身不会自动执行，只有调用时才会被执行。

在JavaScript中，提供了一种自调用函数，将函数的定义与调用一并实现。(function([parameters]){

statementes;[return表达式];

})([params]);

自调用函数是指将函数的定义使用小括号“()”括起来，通过小括号说明此部分是一个函数表达式;函数表达式之后紧跟一对小括号“()”，表示该函数将被自动调用;

<script type="text/javascript">
    var user=" admin";
    (function(userData) {
        alert("欢迎" + userData + "光临！");
    } )(user);
    </script>