前端三劍客——javascript流程控制與異常處理
大綱 :
????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語句
??3.三元表達式
??判斷語句：if else 和 if else if?else ??
//if語句
/*
格式:if(條件){
語句;
}else if(條件){
語句;
}else{
語句;
}
*/輸入年齡進行范圍判斷
<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">
<script>
/*
//判斷語句
1.if語句
2.switch語句
*/
//if語句
//根據用戶輸入的年齡進行判斷
var btn = document.querySelector('#btn');
btn.onclick = function () {
let age = parseInt(document.querySelector('input[name="age"]').value); //document.querySelectorAll()獲取多個html標簽
if (age < 18) {
console.log("未成年");
} else if (age <= 35) {
console.log("中年");
} else {
console.log("老年人");
}
}
/*
//出現的錯誤 :
1.btn.onclick最開始寫成:btn.onclick(判斷語句),#onclick不是函數,而是事件處理屬性（事件監聽器屬性）
,需要把一個函數（事件處理函數）賦值給onclick這樣當元素被點擊時就執行對應函數
2.通過document.querySelector獲取的是-->使用該選擇器的標簽而不是用戶輸入的值,且用戶輸入的是字符串未進行對其進行轉換
,否則導致一直是進行else語句塊
*/
</script>
</body>??判斷語句：switch case??
//switch語句
/*
意思:根據表達式的值匹配不同的case分支并執行相應的代碼
格式:switch(表達式的值){
case 比較的值:
執行的語句;
break;
···
default:
執行的語句;
}
*/根據今天周幾進行更換背景顏色
//switch語句
/*
意思:根據表達式的值匹配不同的case分支并執行相應的代碼
格式:switch(表達式的值){
case 比較的值:
執行的語句;
break;
···
default:
執行的語句;
}
*/
//根據今天周幾進行更換背景顏色
var date = new Date();
var weekday = date.getDay(); //.getDay()獲取今天是周幾
switch (weekday) {
case 0:
console.log("7");
break;
case 1:
console.log("1");
break;
case 2:
console.log("2");
break;
case 3:
console.log("3");
break;
case 4:
console.log("4");
break;
case 5:
console.log("5");
break;
default:
console.log("6");
}
colorselect = ["red", "green", "yellow", "blue", "purple", "pink"];
document.body.style.backgroundColor = colorselect[weekday];??三元表達式
//三元表達式
/*
js:條件？真時返回的結果:假時返回的結果
py:真時的返回結果 if 條件 else 假時返回的結果
*/
//js
age = 18;
var ret = age>=20?"成年人":"未成年人";
console.log(ret);
//py
age = 18
ret = "成年人" if age>=18 else "未成年人"
print(ret)循環語句/遍歷語句
??1.while循環
??2.for循環
??循環語句：while
//while語句
/*
格式:
while(條件）{
語句;
}
*///示例一:
var liList = ["guohan","gh","gg","hh"];
var num = 0;
while (num<liList.length){
console.log(liList[num++]);
/*
console.log(liList[num]);
num++;
*/
}
//示例二:
var number = 1;
while(number<=10){
console.log(number++);
}??循環語句：for
//for循環
/*
//三種格式:
1.循環代替while:
for(變量初始化;判斷條件;步進器){
語句;
}
2.遍歷數組成員的下標或對象屬性
for(變量（成員下標）in 數組){
語句;
}
3.遍歷數組成員的值或對象屬性的值
for(變量（成員的值） of 數組){
語句;
}
*/for循環3種方法
//循環代替while
//示例一單個變量
for (let num=1;num<=10;num++){
console.log(`num=${num}`);
}
//示例二多個變量
for (let num=1,number=10;num*3<=number;num++,number+=2){
console.log(`num=${num},number=${number}`);
}
//遍歷數組成員下標
var obj = ["guohan","gh","gg","hh"];
for (let idx in obj){
console.log(idx);
}
//遍歷數組成員
for (let index of obj){
console.log(index);
}
補充：forEach(數組的內置方法）: 遍歷數組的每個元素并對每個元素進行一次指定的函數（回調函數）
//數組.forEach((當前元素，當前下標，原數組)=>{函數代碼語句;});var obj = ["guohan","gh","gg","hh"];
obj.forEach((item,key)=>{console.log(item)}) //數組.forEach((當前元素，當前下標，原數組)=>{函數代碼語句;});//里面是匿名函數新寫法
//obj.forEach(item=>{console.log(item)});
異常處理和主動拋出異常
//異常處理
1.拋出內置異常
格式:
try{
代碼;
}catch(e){
代碼; //如:console.log(`異常類型:${e.name},異常原因:${e.message}`);
}
2.主動拋出自定義異常
//自定義異常用函數定義
function 自定義異常函數名(message){
this.name = "(自定義的錯誤類型)";
this.message = message || ”默認信息錯誤"; //后面是防止 throw時忘記傳入錯誤信息參數
}
try {
// 可能拋出異常的代碼（包含 throw）
if (條件不滿足) {
throw 自定義異常函數名(message); // 主動拋出異常
}
// 正常邏輯（如果沒拋異常，會執行這里）
} catch (error) {
// 捕獲到異常后執行的處理邏輯
console.error("捕獲到異常：", error.message);
} finally {
// 可選：無論是否拋出異常，都會執行的代碼（如清理操作）
console.log("操作結束");
}
*/
拋出異常
//拋出內置異常
try{
console.log(num);
}catch(e){
console.log(e.name,e.message); //e.name:異常類型 e.message:異常原因
}finally{
console.log("操作完畢")
}
//主動拋出自定義異常 throw
try {
console.log(num);
} catch (e) {
console.log(`異常類型=${e.name},異常原因=${e.message}`); //異常類型=ReferenceError,異常原因=num is not defined
}
//主動拋出自定義異常 throw
function UserError(message) {
this.name = "userException";
this.message = message || "默認錯誤信息";
}
Person = {"name": "guohan", "age": 17};
try{
if (Person.age < 18){
throw new UserError("未成年禁止進入");
}
console.log("可以進入");
}catch(e){
console.log(e.name,e.message);
}finally{
console.log("操作完畢");
} 
與python區別
時間相關
浙公網安備 33010602011771號