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

古修蟑 发表于 2025-10-30 23:55:03

大纲 :
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
//if语句
/*
格式:if(条件){
<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 语句;
}else if(条件){
<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 语句;
}else{
<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 语句;
}
*/<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>输入年龄进行范围判断 <body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 判断语句：switch case
//switch语句 /* 意思:根据表达式的值匹配不同的case分支并执行相应的代码格式:switch(表达式的值){<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 比较的值:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 执行的语句;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>···<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>default:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 执行的语句;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>}*/<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>根据今天周几进行更换背景颜色 //switch语句 /* 意思:根据表达式的值匹配不同的case分支并执行相应的代码格式:switch(表达式的值){<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 比较的值:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 执行的语句;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>···<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>default:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 执行的语句;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>}*/ //根据今天周几进行更换背景颜色 var date = new Date(); var weekday = date.getDay();<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>//.getDay()获取今天是周几 switch (weekday) {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 0:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("7");<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 1:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("1");<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 2:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("2");<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 3:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("3");<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 4:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("4");<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 5:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("5");<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>default:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("6"); } colorselect = ["red", "green", "yellow", "blue", "purple", "pink"]; document.body.style.backgroundColor = colorselect;
循环语句/遍历语句
1.while循环
2.for循环

循环语句：while
//while语句 /* 格式: while(条件）{<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>语句; }*/<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>//示例一:
var liList = ["guohan","gh","gg","hh"];
var num = 0;
while (num<liList.length){
console.log(liList);
/*
console.log(liList);
num++;
*/
}
//示例二:
var number = 1;
while(number<=10){
console.log(number++);
}
异常处理和主动抛出异常
//异常处理 1.抛出内置异常格式: try{<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>代码; }catch(e){<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>代码;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>//如:console.log(`异常类型:${e.name},异常原因:${e.message}`); }2.主动抛出自定义异常 //自定义异常用函数定义 function 自定义异常函数名(message){<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>this.name = "(自定义的错误类型)";<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>this.message = message || ”默认信息错误";<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>//后面是防止 throw时忘记传入错误信息参数 } try {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>// 可能抛出异常的代码（包含 throw）<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>if (条件不满足) {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>throw 自定义异常函数名(message); // 主动抛出异常<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>}<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>// 正常逻辑（如果没抛异常，会执行这里） } catch (error) {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>// 捕获到异常后执行的处理逻辑<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.error("捕获到异常：", error.message); } finally {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>// 可选：无论是否抛出异常，都会执行的代码（如清理操作）<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("操作结束"); }*/
抛出异常 //抛出内置异常 try{<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log(num); }catch(e){<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log(e.name,e.message);<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>//e.name:异常类型<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>e.message:异常原因 }finally{<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("操作完毕") }<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>//主动抛出自定义异常<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> throw try {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log(num); } catch (e) {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log(`异常类型=${e.name},异常原因=${e.message}`);<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>//异常类型=ReferenceError,异常原因=num is not defined }//主动抛出自定义异常<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>throw function UserError(message) {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>this.name = "userException";<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>this.message = message || "默认错误信息"; }Person = {"name": "guohan", "age": 17}; try{<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>if (Person.age < 18){<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>throw new UserError("未成年禁止进入");<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>}<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("可以进入"); }catch(e){<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log(e.name,e.message); }finally{<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("操作完毕"); }

与python区别

时间相关

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

谅潭好 发表于 2025-11-23 19:33:28

感谢发布原创作品，程序园因你更精彩

厥轧匠 发表于 6 天前

热心回复！

页: [1]

程序园's Archiver

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