登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›前端三剑客——javascript流程控制与异常处理 ...

前端三剑客——javascript流程控制与异常处理

古修蟑 6 天前
    大纲 :
    1.判断语句/分支语句:
      if  else if  else
      switch case
    2.循环语句/遍历语句
      while
      for循环/for遍历
    3.补充：forEach(数组的内置方法）
    4.异常处理和主动抛出异常
    5.时间相关
 
判断语句/分支语句
  1.if  else 和  if   else if else语句 
  2.switch  case语句
 
  判断语句：if  else   和   if   else if else   
  1. //if语句
  2. /*
  3. 格式:if(条件){
  4. <body>
  5. <input type="text" name="age"><input type="button" id="btn" value="提交">
  7. </body> 语句;
  8. }else if(条件){
  9. <body>
  10. <input type="text" name="age"><input type="button" id="btn" value="提交">
  12. </body> 语句;
  13. }else{
  14. <body>
  15. <input type="text" name="age"><input type="button" id="btn" value="提交">
  17. </body> 语句;
  18. }
  19. */
复制代码
<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>输入年龄进行范围判断
  1. <body>
  2. <input type="text" name="age"><input type="button" id="btn" value="提交">
  4. </body>
复制代码
  判断语句：switch  case  
  1. //switch语句 /* 意思:根据表达式的值匹配不同的case分支并执行相应的代码 格式:switch(表达式的值){<body>
  2. <input type="text" name="age"><input type="button" id="btn" value="提交">
  4. </body><body>
  5. <input type="text" name="age"><input type="button" id="btn" value="提交">
  7. </body><body>
  8. <input type="text" name="age"><input type="button" id="btn" value="提交">
  10. </body>case 比较的值:<body>
  11. <input type="text" name="age"><input type="button" id="btn" value="提交">
  13. </body><body>
  14. <input type="text" name="age"><input type="button" id="btn" value="提交">
  16. </body><body>
  17. <input type="text" name="age"><input type="button" id="btn" value="提交">
  19. </body><body>
  20. <input type="text" name="age"><input type="button" id="btn" value="提交">
  22. </body> 执行的语句;<body>
  23. <input type="text" name="age"><input type="button" id="btn" value="提交">
  25. </body><body>
  26. <input type="text" name="age"><input type="button" id="btn" value="提交">
  28. </body><body>
  29. <input type="text" name="age"><input type="button" id="btn" value="提交">
  31. </body><body>
  32. <input type="text" name="age"><input type="button" id="btn" value="提交">
  34. </body> break;<body>
  35. <input type="text" name="age"><input type="button" id="btn" value="提交">
  37. </body><body>
  38. <input type="text" name="age"><input type="button" id="btn" value="提交">
  40. </body><body>
  41. <input type="text" name="age"><input type="button" id="btn" value="提交">
  43. </body>···<body>
  44. <input type="text" name="age"><input type="button" id="btn" value="提交">
  46. </body><body>
  47. <input type="text" name="age"><input type="button" id="btn" value="提交">
  49. </body><body>
  50. <input type="text" name="age"><input type="button" id="btn" value="提交">
  52. </body>default:<body>
  53. <input type="text" name="age"><input type="button" id="btn" value="提交">
  55. </body><body>
  56. <input type="text" name="age"><input type="button" id="btn" value="提交">
  58. </body><body>
  59. <input type="text" name="age"><input type="button" id="btn" value="提交">
  61. </body><body>
  62. <input type="text" name="age"><input type="button" id="btn" value="提交">
  64. </body> 执行的语句;<body>
  65. <input type="text" name="age"><input type="button" id="btn" value="提交">
  67. </body><body>
  68. <input type="text" name="age"><input type="button" id="btn" value="提交">
  70. </body><body>
  71. <input type="text" name="age"><input type="button" id="btn" value="提交">
  73. </body>}  */
复制代码
<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>根据今天周几进行更换背景颜色
  1. //switch语句 /* 意思:根据表达式的值匹配不同的case分支并执行相应的代码 格式:switch(表达式的值){<body>
  2. <input type="text" name="age"><input type="button" id="btn" value="提交">
  4. </body><body>
  5. <input type="text" name="age"><input type="button" id="btn" value="提交">
  7. </body><body>
  8. <input type="text" name="age"><input type="button" id="btn" value="提交">
  10. </body>case 比较的值:<body>
  11. <input type="text" name="age"><input type="button" id="btn" value="提交">
  13. </body><body>
  14. <input type="text" name="age"><input type="button" id="btn" value="提交">
  16. </body><body>
  17. <input type="text" name="age"><input type="button" id="btn" value="提交">
  19. </body><body>
  20. <input type="text" name="age"><input type="button" id="btn" value="提交">
  22. </body> 执行的语句;<body>
  23. <input type="text" name="age"><input type="button" id="btn" value="提交">
  25. </body><body>
  26. <input type="text" name="age"><input type="button" id="btn" value="提交">
  28. </body><body>
  29. <input type="text" name="age"><input type="button" id="btn" value="提交">
  31. </body><body>
  32. <input type="text" name="age"><input type="button" id="btn" value="提交">
  34. </body> break;<body>
  35. <input type="text" name="age"><input type="button" id="btn" value="提交">
  37. </body><body>
  38. <input type="text" name="age"><input type="button" id="btn" value="提交">
  40. </body><body>
  41. <input type="text" name="age"><input type="button" id="btn" value="提交">
  43. </body>···<body>
  44. <input type="text" name="age"><input type="button" id="btn" value="提交">
  46. </body><body>
  47. <input type="text" name="age"><input type="button" id="btn" value="提交">
  49. </body><body>
  50. <input type="text" name="age"><input type="button" id="btn" value="提交">
  52. </body>default:<body>
  53. <input type="text" name="age"><input type="button" id="btn" value="提交">
  55. </body><body>
  56. <input type="text" name="age"><input type="button" id="btn" value="提交">
  58. </body><body>
  59. <input type="text" name="age"><input type="button" id="btn" value="提交">
  61. </body><body>
  62. <input type="text" name="age"><input type="button" id="btn" value="提交">
  64. </body> 执行的语句;<body>
  65. <input type="text" name="age"><input type="button" id="btn" value="提交">
  67. </body><body>
  68. <input type="text" name="age"><input type="button" id="btn" value="提交">
  70. </body><body>
  71. <input type="text" name="age"><input type="button" id="btn" value="提交">
  73. </body>}  */ //根据今天周几进行更换背景颜色 var date = new Date(); var weekday = date.getDay();<body>
  74. <input type="text" name="age"><input type="button" id="btn" value="提交">
  76. </body>  //.getDay()获取今天是周几 switch (weekday) {<body>
  77. <input type="text" name="age"><input type="button" id="btn" value="提交">
  79. </body>  case 0:<body>
  80. <input type="text" name="age"><input type="button" id="btn" value="提交">
  82. </body><body>
  83. <input type="text" name="age"><input type="button" id="btn" value="提交">
  85. </body><body>
  86. <input type="text" name="age"><input type="button" id="btn" value="提交">
  88. </body>console.log("7");<body>
  89. <input type="text" name="age"><input type="button" id="btn" value="提交">
  91. </body><body>
  92. <input type="text" name="age"><input type="button" id="btn" value="提交">
  94. </body><body>
  95. <input type="text" name="age"><input type="button" id="btn" value="提交">
  97. </body>break;<body>
  98. <input type="text" name="age"><input type="button" id="btn" value="提交">
  100. </body>  case 1:<body>
  101. <input type="text" name="age"><input type="button" id="btn" value="提交">
  103. </body><body>
  104. <input type="text" name="age"><input type="button" id="btn" value="提交">
  106. </body><body>
  107. <input type="text" name="age"><input type="button" id="btn" value="提交">
  109. </body>console.log("1");<body>
  110. <input type="text" name="age"><input type="button" id="btn" value="提交">
  112. </body><body>
  113. <input type="text" name="age"><input type="button" id="btn" value="提交">
  115. </body><body>
  116. <input type="text" name="age"><input type="button" id="btn" value="提交">
  118. </body>break;<body>
  119. <input type="text" name="age"><input type="button" id="btn" value="提交">
  121. </body>  case 2:<body>
  122. <input type="text" name="age"><input type="button" id="btn" value="提交">
  124. </body><body>
  125. <input type="text" name="age"><input type="button" id="btn" value="提交">
  127. </body><body>
  128. <input type="text" name="age"><input type="button" id="btn" value="提交">
  130. </body>console.log("2");<body>
  131. <input type="text" name="age"><input type="button" id="btn" value="提交">
  133. </body><body>
  134. <input type="text" name="age"><input type="button" id="btn" value="提交">
  136. </body><body>
  137. <input type="text" name="age"><input type="button" id="btn" value="提交">
  139. </body>break;<body>
  140. <input type="text" name="age"><input type="button" id="btn" value="提交">
  142. </body>  case 3:<body>
  143. <input type="text" name="age"><input type="button" id="btn" value="提交">
  145. </body><body>
  146. <input type="text" name="age"><input type="button" id="btn" value="提交">
  148. </body><body>
  149. <input type="text" name="age"><input type="button" id="btn" value="提交">
  151. </body>console.log("3");<body>
  152. <input type="text" name="age"><input type="button" id="btn" value="提交">
  154. </body><body>
  155. <input type="text" name="age"><input type="button" id="btn" value="提交">
  157. </body><body>
  158. <input type="text" name="age"><input type="button" id="btn" value="提交">
  160. </body>break;<body>
  161. <input type="text" name="age"><input type="button" id="btn" value="提交">
  163. </body>  case 4:<body>
  164. <input type="text" name="age"><input type="button" id="btn" value="提交">
  166. </body><body>
  167. <input type="text" name="age"><input type="button" id="btn" value="提交">
  169. </body><body>
  170. <input type="text" name="age"><input type="button" id="btn" value="提交">
  172. </body>console.log("4");<body>
  173. <input type="text" name="age"><input type="button" id="btn" value="提交">
  175. </body><body>
  176. <input type="text" name="age"><input type="button" id="btn" value="提交">
  178. </body><body>
  179. <input type="text" name="age"><input type="button" id="btn" value="提交">
  181. </body>break;<body>
  182. <input type="text" name="age"><input type="button" id="btn" value="提交">
  184. </body><body>
  185. <input type="text" name="age"><input type="button" id="btn" value="提交">
  187. </body>case 5:<body>
  188. <input type="text" name="age"><input type="button" id="btn" value="提交">
  190. </body><body>
  191. <input type="text" name="age"><input type="button" id="btn" value="提交">
  193. </body><body>
  194. <input type="text" name="age"><input type="button" id="btn" value="提交">
  196. </body>console.log("5");<body>
  197. <input type="text" name="age"><input type="button" id="btn" value="提交">
  199. </body><body>
  200. <input type="text" name="age"><input type="button" id="btn" value="提交">
  202. </body><body>
  203. <input type="text" name="age"><input type="button" id="btn" value="提交">
  205. </body>break;<body>
  206. <input type="text" name="age"><input type="button" id="btn" value="提交">
  208. </body>  default:<body>
  209. <input type="text" name="age"><input type="button" id="btn" value="提交">
  211. </body><body>
  212. <input type="text" name="age"><input type="button" id="btn" value="提交">
  214. </body><body>
  215. <input type="text" name="age"><input type="button" id="btn" value="提交">
  217. </body>console.log("6"); } colorselect = ["red", "green", "yellow", "blue", "purple", "pink"]; document.body.style.backgroundColor = colorselect[weekday];
复制代码
 
 循环语句/遍历语句
  1.while循环
  2.for循环
 
  循环语句：while
  1. //while语句 /* 格式: while(条件）{<body>
  2. <input type="text" name="age"><input type="button" id="btn" value="提交">
  4. </body>  语句; }  */
复制代码
<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>
  1. //示例一:
  2. var liList = ["guohan","gh","gg","hh"];
  3. var num = 0;
  4. while (num<liList.length){
  5.     console.log(liList[num++]);
  6.     /*
  7.     console.log(liList[num]);
  8.     num++;
  9.      */
  10. }
  11. //示例二:
  12. var number = 1;
  13. while(number<=10){
  14.     console.log(number++);
  15. }
复制代码
 
 异常处理和主动抛出异常
  1. //异常处理 1.抛出内置异常 格式: try{<body>
  2. <input type="text" name="age"><input type="button" id="btn" value="提交">
  4. </body>  代码; }catch(e){<body>
  5. <input type="text" name="age"><input type="button" id="btn" value="提交">
  7. </body>  代码;<body>
  8. <input type="text" name="age"><input type="button" id="btn" value="提交">
  10. </body>  //如:console.log(`异常类型:${e.name},异常原因:${e.message}`); }  2.主动抛出自定义异常 //自定义异常用函数定义 function 自定义异常函数名(message){<body>
  11. <input type="text" name="age"><input type="button" id="btn" value="提交">
  13. </body>  this.name = "(自定义的错误类型)";<body>
  14. <input type="text" name="age"><input type="button" id="btn" value="提交">
  16. </body>  this.message = message || ”默认信息错误";<body>
  17. <input type="text" name="age"><input type="button" id="btn" value="提交">
  19. </body>  //后面是防止 throw时忘记传入错误信息参数 } try {<body>
  20. <input type="text" name="age"><input type="button" id="btn" value="提交">
  22. </body>// 可能抛出异常的代码（包含 throw）<body>
  23. <input type="text" name="age"><input type="button" id="btn" value="提交">
  25. </body>if (条件不满足) {<body>
  26. <input type="text" name="age"><input type="button" id="btn" value="提交">
  28. </body>  throw 自定义异常函数名(message); // 主动抛出异常<body>
  29. <input type="text" name="age"><input type="button" id="btn" value="提交">
  31. </body>}<body>
  32. <input type="text" name="age"><input type="button" id="btn" value="提交">
  34. </body>// 正常逻辑（如果没抛异常，会执行这里） } catch (error) {<body>
  35. <input type="text" name="age"><input type="button" id="btn" value="提交">
  37. </body>// 捕获到异常后执行的处理逻辑<body>
  38. <input type="text" name="age"><input type="button" id="btn" value="提交">
  40. </body>console.error("捕获到异常：", error.message); } finally {<body>
  41. <input type="text" name="age"><input type="button" id="btn" value="提交">
  43. </body>// 可选：无论是否抛出异常，都会执行的代码（如清理操作）<body>
  44. <input type="text" name="age"><input type="button" id="btn" value="提交">
  46. </body>console.log("操作结束"); }  */
复制代码
 
  抛出异常
  1. //抛出内置异常 try{<body>
  2. <input type="text" name="age"><input type="button" id="btn" value="提交">
  4. </body>  console.log(num); }catch(e){<body>
  5. <input type="text" name="age"><input type="button" id="btn" value="提交">
  7. </body>  console.log(e.name,e.message);<body>
  8. <input type="text" name="age"><input type="button" id="btn" value="提交">
  10. </body><body>
  11. <input type="text" name="age"><input type="button" id="btn" value="提交">
  13. </body>//e.name:异常类型<body>
  14. <input type="text" name="age"><input type="button" id="btn" value="提交">
  16. </body>e.message:异常原因 }finally{<body>
  17. <input type="text" name="age"><input type="button" id="btn" value="提交">
  19. </body>  console.log("操作完毕") }<body>
  20. <input type="text" name="age"><input type="button" id="btn" value="提交">
  22. </body>//主动抛出自定义异常<body>
  23. <input type="text" name="age"><input type="button" id="btn" value="提交">
  25. </body><body>
  26. <input type="text" name="age"><input type="button" id="btn" value="提交">
  28. </body><body>
  29. <input type="text" name="age"><input type="button" id="btn" value="提交">
  31. </body> throw try {<body>
  32. <input type="text" name="age"><input type="button" id="btn" value="提交">
  34. </body>  console.log(num); } catch (e) {<body>
  35. <input type="text" name="age"><input type="button" id="btn" value="提交">
  37. </body>  console.log(`异常类型=${e.name},异常原因=${e.message}`);<body>
  38. <input type="text" name="age"><input type="button" id="btn" value="提交">
  40. </body><body>
  41. <input type="text" name="age"><input type="button" id="btn" value="提交">
  43. </body>  //异常类型=ReferenceError,异常原因=num is not defined }  //主动抛出自定义异常<body>
  44. <input type="text" name="age"><input type="button" id="btn" value="提交">
  46. </body>  throw function UserError(message) {<body>
  47. <input type="text" name="age"><input type="button" id="btn" value="提交">
  49. </body>  this.name = "userException";<body>
  50. <input type="text" name="age"><input type="button" id="btn" value="提交">
  52. </body>  this.message = message || "默认错误信息"; }  Person = {"name": "guohan", "age": 17}; try{<body>
  53. <input type="text" name="age"><input type="button" id="btn" value="提交">
  55. </body>  if (Person.age < 18){<body>
  56. <input type="text" name="age"><input type="button" id="btn" value="提交">
  58. </body><body>
  59. <input type="text" name="age"><input type="button" id="btn" value="提交">
  61. </body><body>
  62. <input type="text" name="age"><input type="button" id="btn" value="提交">
  64. </body>throw new UserError("未成年禁止进入");<body>
  65. <input type="text" name="age"><input type="button" id="btn" value="提交">
  67. </body>  }<body>
  68. <input type="text" name="age"><input type="button" id="btn" value="提交">
  70. </body>  console.log("可以进入"); }catch(e){<body>
  71. <input type="text" name="age"><input type="button" id="btn" value="提交">
  73. </body>  console.log(e.name,e.message); }finally{<body>
  74. <input type="text" name="age"><input type="button" id="btn" value="提交">
  76. </body>  console.log("操作完毕"); }
复制代码
 
1.png
                   
2.png

 
 与python区别
3.png

 
 时间相关
4.png

5.png

 
 
 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
前端三剑客javascript流程控制

使用道具 举报

相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
古修蟑
6 天前

0

粉丝关注

15

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫