经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JSJS库框架 » JavaScript » 查看文章
Javascript 流程控制
来源：cnblogs　　作者：bignewbie　　时间：2018/10/21 20:21:11　　对本文有异议

流程控制

JavaScript通过流程语句来执行程序流，程序流有若干语句组成。在正常情况下，程序中 的语句时按照书写顺序执行的，这种结构称为顺序结构。除了顺序结构之外还有选择结构和循环结构。

 

1.选择结构

（1）if-else语句

语法：

if（condition）{

　　statementS;

}else{

　　statements;

}

 

(2)if-else if-else语句

语法：

if（condition）{

　　statementS;

}else if{

　　statements;

}

……

else{

　　statements;

}

例如：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <meta charset="GB2312">
  6.     <title>选择结构</title>
  7.     <script language="JavaScript">
  8.         function  max() {
  9.             var fist=parseInt(form1.fist.value);
  10.             var secod=parseInt(form1.secod.value);
  11.             if(isNaN(fist)){
  12.                 alert("第一个数不是数值类型");
  13.                 form1.fist.value="";
  15.             }
  16.             else if (isNaN(secod)) {
  17.                 alert("第二个数不是数值类型");
  18.                 form1.secod.value="";
  19.             }else{
  20.                 var max=(fist>=secod?fist:secod);
  21.                 document.write("两个数之间较大的数为："+max);
  22.             }
  24.         }
  25.     </script>
  26.  
  27. </head>
  28. <body>
  29. <form name="form1">
  30.     请输入第一个数（数值型）:
  31.     <input type="text" name="fist" />
  32.     <br>
  33.     请输入第二个数（数值型）：
  34.     <input type="text" name="secod" />
  35.     <br>
  36.     <input type="button" ONCLICK="max()" value="选择较大值" />&nbsp;&nbsp;
  37.     <input type="reset" value="重填" />
  38. </form>
  39. </body>
  40. </html>

（3）switch语句([ ]中为可选)

语法：

switch（expression）{

　　case value1：

　　　　statement；

　　　　break；

　　case value2：

　　　　statement2；

　　　　break；

　　……

　　case valueN;

　　　　statementN；

　　　　break；

　　[defalut:

　　　　defalutStatements;]

}

例如：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <meta charset="GB2312">
  6.     <title>switch语句</title>
  7. </head>
  8. <body>
  9. <script language="JavaScript">
  10.     var day= new Date().getDay();
  11.     switch (day){
  12.         case 0:
  13.             title="今天是星期日";
  14.             break;
  15.         case 1:
  16.             title="今天是星期一"
  17.             break;
  18.         case 2:
  19.             title="今天是行权期二";
  20.             break;
  21.         case 3:
  22.             title="今天是星期三";
  23.             break;
  24.         case 4:
  25.             title="今天是星期四";
  26.             break;
  27.         case 5:
  28.             title="今天是星期五";
  29.             break;
  30.         case 6:
  31.             title="今天是星期六";
  32.             break;
  33.     }
  34.     document.write(title);
  35. </script>
  36.  
  37. </body>
  38. </html>

 

 

2.循环语句

（1）for循环（循环次数已知的循环）

语法：

for（inintal-condition;conditin;increment）{

　　statements;

}

例子：

输出九九乘法表

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <title>循环结构</title>
  6. </head>
  7.  
  8. <body>
  9. <font size="-1" color="blue">
  10.     <script language="JavaScript">
  11.         var i,j;
  12.         for(i=1;i<=10;i++){
  13.             for(j=1;j<=i;j++){
  14.                 document.write(j+"*"+i+"="+i*j);
  15.                 document.write("&nbsp;&nbsp;");
  16.             }
  17.         document.write("<br>");
  18.         }
  19.     </script>
  20. </font>
  21.  
  22.  
  23. </body>
  24. </html>

 

（2）for-in语句（通常用来遍历数组）

语法：

for（elements in object）{

　　statement；

}

例如：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <meta charset="GB2312">
  6.     <title>for-in</title>
  7. </head>
  8. <body>
  9. <script language="JavaScript">
  10.     var student=new Object();
  11.     student.name="王明明";
  12.     student.no="20120156";
  13.     student.addreess="山东济南";
  14.     for(e in student){
  15.         document.write(e+":"+student[e]+"<br>");
  16.     }
  17. </script>
  18. </body>
  19. </html>

（3）while语句（次数未知的循环）

语法：

while（condition）{

　　statement；

}

例如：

输出1-100中3的倍数

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <meta charset="GB2312">
  6.     <title>while循环</title>
  7. </head>
  8. <body>
  9. <script language="JavaScript">
  10.     var i=1;
  11.     while(i<100){
  12.         if(i%3==0){
  13.             document.write(i+"&nbsp");
  14.         }
  15.         i++;
  16.     }
  17. </script>
  18.  
  19. </body>
  20. </html>

（4）do-while语句（该语句最少执行一次）

语法：

do{

　　statement；

}

while(conditions);

例如：

计算1-100的和

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <meta charset="GB2312">
  6.     <title>do-while语句</title>
  7. </head>
  8. <body>
  9. <script language="JavaScript">
  10.     var i = 1;
  11.     var num = 0;
  12.     do {
  13.         sum+=i;
  14.         i++
  15.     }while(i<=100);
  16.     document.write("1-100的和是："+sum);
  17. </script>
  18. </body>
  19. </html>

 

 

转移语句

（1）break语句

break语句用于switch语句和for语句等循环语句中。用来中止switch语句，执行switch语句后的语句。

（2）continue语句

continue语句用于for，while，do-while，for-in语句中，用来结束本次循环，执行下一次循环，一般与if语句一起使用。

（3）return语句

return语句一般在函数中使用，可以使用return语句表达式的格式返回任意类型的函数值，返回的函数值可以用变量接受。

 

 

 

  1. 特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号