JavaScript（3）

最新推荐文章于 2024-11-13 15:29:17 发布

山i

最新推荐文章于 2024-11-13 15:29:17 发布

阅读量146

点赞数

分类专栏： JavaScript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/zxcWh/article/details/120551789

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的条件语句，包括if、if...else、if...else if...else和switch，以及循环结构如for、for/in、while和do/while。此外，还提到了break和continue语句的使用，以及错误处理中的try...catch、finally和throw语句。文章最后讨论了JavaScript中的变量提升和javascript:void(0)的作用。

摘要由CSDN通过智能技术生成

1.JavaScript条件语句

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成任务。

在JavaScript中，我们可以使用以下条件语句：

if...- 只有当指定条件为true时，使用该语句来执行代码

if..else 语句-- 当条件为true时执行代码，当条件为false时执行其他代码

if...else if..else 语句-- 使用该语句来选择多个代码块之一来执行

switch 语句-使用该语句来选择多个代码块之一来执行

if 语句

只有当指定条件为true时，该语句才会执行代码。

格式：

if（condition）{

当条件为true时，该语句才会执行代码。

}

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
 
        <script>
            //if 语句
            /*  if(判断条件){

                  需要被执行的javascript代码

              }
              */
            // 先执行判断条件 ---true --{需要被执行的javascript代码}
            //               ---false----什么都不干
            //执行true
            var age=18;
            if(age=18){
                alert("成年人!");
            } 
        </script>

    </body>
</html>

在这个格式中，没有...else...。您已经告诉浏览器只有在指定条件为true时才执行代码。

if...else 语句

请使用if...else语句在条件为true时执行代码，在条件为false时执行其他代码。

格式

if (condition){
当条件为 true 时执行的代码
}else{
当条件不为 true 时执行的代码
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
 
        <script>
         
            //if(){}else{}语句
           /* if(判断条件){
                true时需要被执行的javascript代码
            }else{
                false时需要被执行的javascript代码
            }*/
            //先执行判断条件，--true--{true时需要被执行的javascript代码}
            //              --flase--{false时需要被执行的javascript代码}
            //2选1
            var age=18;
            if(age>=18){
                alert("成年人")
            }else{
                alert("未成年")
            }
        </script>

    </body>
</html>

if...else if...else 语句

使用 if....else if...else 语句来选择多个代码块之一来执行。

格式:

if (condition1){
当条件 1 为 true 时执行的代码
}else if (condition2){
当条件 2 为 true 时执行的代码
}else{
当条件 1 和条件 2 都不为 true 时执行的代码
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
 
        <script>
        
           var num1=100;
           var num2=12.5;
           var op="-";
           if(op=="+"){
                alert(num1+"+"+num2+"="+(num1+num2));
           }else if(op=="-"){
                alert(num1+"-"+num2+"="+(num1-num2));
           }else if(op=="*"){
                alert(num1+"*"+num2+"="+(num1*num2));
           }else if(op=="/"){
                alert(num1+"/"+num2+"="+(num1/num2));
           }else{
               alert("没有对应的运算法则")
           }

        </script>

    </body>
</html>

switch语句

使用switch语句来选择要执行的多个代码块之一。

格式：

switch(n) {

case 1: 执行代码块 1 break;

case 2: 执行代码块 2 break;

default: 与 case 1 和 case 2 不同时执行的代码

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
 
        <script>
            var num1=100;
            var num2=200;
            var op="+";
            switch(op){
                case "+":alert(num1+"+"+num2+"="+(num1+num2));break;
                case "-":alert(num1+"+"+num2+"="+(num1-num2));
                case "*":alert(num1+"+"+num2+"="+(num1*num2));
                case "/":alert(num1+"+"+num2+"="+(num1/num2));
                default:alert("没有对应的运算法则！");

            }
        </script>
    <h5>选择结构--条件语句</h5>
    <h5> switch语句</h5>
    </body>
</html>

2.JavaScript 循环

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

JavaScript 支持不同类型的循环：

for--循环代码块一定的次数

for/in--循环遍历对象的属性

while--当指定的条件为true是循环指定的代码

do/while--同样当指定的条件为true时循环指定的代码块

for 循环

for 循环是您在希望创建循坏时会常用到的工具。下面是for循环的语法：

for(初始条件; 判断条件; 循环增量/减量){

被执行的代码块

}

初始条件----定义循环什么时候开始

判断条件 --- 控制循环什么时候结束

循环增量/减量 --- 修改初始条件数据值

先执行初始条件，在执行判断条件--true--{需要被循环执行的javascript代码}

----循环增量/减量---在执行判断条件--true--{需要被循环执行的javascript代码}

----在执行判断条件--false---结束

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
 
        <script>
       for(var i=1;i<6;i++){
            document.write("<h"+i+">测试for语句</h"+i+">");
       }
       for(var i=6;i>=1;i--){
           document.write("<h"+i+">测试for语句</h"+i+">");
       }
        </script>
   
    </body>
</html>

通常循环增量/减量会增加改变初始变量的值，循环增量/减量也是可选的。循环增量/减量有多种用法。可以是辅助 (i--)，或者更大 (i=i+15)。循环增量/减量也可以省略（比如当循环内部有相应的代码时）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
 
        <script>
       for(var i=1;i<6;){
            document.write("<h"+i+">测试for语句</h"+i+">");
            i++;
       }
       for(var i=6;i>=1;){
           document.write("<h"+i+">测试for语句</h"+i+">");
           i--;
       }
        </script>
   
    </body>
</html>

for/in 循环

JavaScript for/in语句循环遍历对象的属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>for/in 循环</h1>
        
        <!-- 将in后面的数组/对象中的数据取出赋值给in前面的变量，
             在需要被循环执行的javascript代码中使用从数组/对象中取出的数据 -->
        <script>
               var names=["zhangsan","lisi","wangwu"]
               for(var i in names){
                   document.write("<h1>"+names[i]+"</h1>")
               }
        </script>
   
    </body>
</html>

while 循环

while循环会在指定条件为真时循环执行代码块。

语法

while(条件){

需要执行的代码

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    
        <script>
           var i=1;
           while(i<6){
               document.write("<h"+i+">测试while循环语句</h"+i+">")
               i++;
           }
        </script>
   
    </body>
</html>

如果您忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃

do/whlie 循环

do/whlie 循环是while循环的变体。该循坏会在检查条件是否为真之前还行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法：

do{

需要执行的代码

}

while（条件）

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    
        <script>
            var i=1;
            do{
                document.write("<h"+i+">测试do{}while()循环</h"+i+">")
                i++;
            }while(i<6)
        </script>
   
    </body>
</html>

使用do/while循坏。该循坏至少会被执行一次，即使条件为false它也会执行一次，因为代码块会在条件被测试前执行。别忘记增加条件中所用变量的值，否则循环永远不会结束！

3.JavaScript break和continue语句

break语句用于跳出循环。

continue 用于跳过循坏中的一个迭代。

break语句

break可用于跳出循环。

break语句跳出循环后，会继续执行该循坏之后的代码（如果有的话）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    
        <script>
            var i=1;
            while(i<=6){
                if(i==3){
                    break;
                }
                document.write("<h"+i+">测试while循环语句--h"+i+"</h"+i+">")
                i++;
            }
          
        </script>
   
    </body>
</html>

continue 语句

continue 语句中断循环中的迭代，如果出现了指定事件，然后继续循环中的下一个迭代。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    
        <script>
        for(var i=1;i<6;i++){
            if(i==3){
                continue
            }
            document.write("<h"+i+">测试continue--h"+i+"</h"+i+">")
        }
        </script>
   
    </body>
</html>

4.JavaScript 错误

当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。

可能是语法错误，通常是程序员造成的编码错误或错别字。

可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。

可能是由于来自服务器或用户的错误输出而导致的错误。

当然，也可能是由于许多其他不可预知的因素。

JavaScript try 和 catch

try语句允许我们定义在执行是进行错误测试的代码块

catch语句允许我们定义当try代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

语法格式：

try {

... //异常的抛出

} catch(e) {

... //异常的捕获与处理

} finally {

... //结束处理

}

finally 语句

finally语句不论之前的try和catch中是否产生异常都会执行该代码块

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            try{
                    var num=1
                    var  res=num1/10;
                    alert(res);
            }
            catch(e){
                alert(e.message)
            }
            finally{
                alert("程序有无错误都要执行")
            }
        </script>
    </head>
    <body>
        

    </body>
</html>

Throw 语句

Throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常(exception)

如果把thorw与try和catch一起使用，那么您能够控制程序流，并生成自定义的错误消息。

thow exception

异常可以是JavaScript字符串、数字、逻辑值或对象。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
         function student(stu){
             try{
                 if(stu<0){
                    throw "指定存储空间不能为负数"; 
                 }
             }catch(e){
                 alert(e)
                 stu=0;
             }
             var arr=new Array(size);
                return arr;
         }
         var arrres= student(-4);
           alert(arrres.length);
        </script>
    </head>
    <body>
        

    </body>
</html>

5.JavaScript 变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>wangxing</title>
</head>
<body>
<p id="demo"></p>
<script>
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x
var x; // 声明 x
</script>
</body>
</html>

例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>wangxing</title>
</head>
<body>
<p id="demo"></p>
<script>
var x; // 声明 x
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x; 
</script>
</body>
</html>

JavaScript 初始化不会提升

JavaScript 只有声明的变量会提升，初始化的不会。

实例 1

var x = 5; -- 初始化 x
var y = 7; --初始化 y
elem = document.getElementById("demo");-- 查找元素
elem.innerHTML = x + " " + y; -- 显示 x 和 y

实例 2

var x = 5;   --初始化 x
elem = document.getElementById("demo");  --查找元素
elem.innerHTML = x + " " + y;            --显示 x 和 y
var y = 7;   -- 初始化 y

实例 2 的 y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。

将实例2修改为如下操作:

var x = 5; --初始化 xvar y; --声明 y

elem = document.getElementById("demo"); --- 查找元素

elem.innerHTML = x + " " + y; -- 显示 x 和 y

y = 7; 设置 y 为 7