? 關于JS函數部分的學習和一個案例的練習
1 函數封裝
抽取相同部分代碼封裝
優點
- 提高代碼復用性:封裝好的函數可以在多個地方被重復調用,避免了重復編寫相同的代碼。例如,編寫一個計算兩個數之和的函數,在多個不同的計算場景中都可以調用這個函數。
- 增強代碼可維護性:當函數的功能需要修改或擴展時,只需要在函數內部進行修改,而不需要在所有調用該函數的地方都進行修改。比如,要修改計算兩個數之和的邏輯,只需要在封裝的函數內部修改,不會影響到其他調用該函數的代碼。
- 便于代碼閱讀和理解:通過函數的命名可以清晰地表達其功能,使代碼的可讀性更高。其他人在閱讀代碼時,只需要看函數名就能大致了解其功能,而不需要去查看函數內部的具體實現。
原則
- 單一職責原則:每個函數應該只負責一項特定的功能,功能要明確、簡潔。比如,一個函數只負責計算平均值,另一個函數只負責數據的排序,這樣可以避免函數功能過于復雜,提高代碼的可維護性和可讀性。
- 高內聚低耦合:函數內部的代碼應該緊密圍繞其核心功能,內部的各個部分之間有很強的關聯性;同時,函數與外部的其他代碼之間的耦合度要低,盡量減少對外部變量和函數的依賴。
2 函數使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width= , initial-scale=1.0"><title>Document</title>
</head>
<style>span{display: inline-block;width:fit-content;height:fit-content;text-align: center;line-height: 50px;border: 1px solid #000;margin-right: 10px;}
</style>
<body><script>// 函數聲明function sheet99(){for(let i = 1; i <= 9; i++){for(let j = 1; j <= i; j++){document.write('<span>'+ i +'×'+ j +'='+ (i*j) +'</span>');}document.write('<br>')}}// 函數調用sheet99();</script></body>
</html>
3 函數傳參
語法 function 函數名(參數列表) 參數逗號隔開 參數默認值 getsum(a = 0,b = 0)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function sum(n){var sum = 0;for(var i = 1; i <= n; i++){sum += i;}return sum;}console.log(sum(10));</script>
</body>
</html>
4 函數返回值
根據需求設置函數返回值
5 作用域
對于一個名稱的可用范圍 限定這個名字的代碼可用范圍就是作用域
提高了代碼的局部性 增強了程序的可靠性 減少了名字沖突
全局作用域 局部作用域
6 匿名函數?
function () {} 沒有名字的函數 無法直接使用 想要使用有兩種方式
6.1 函數表達式
將匿名函數賦值一個變量 通過變量名稱調用 使用前必須先聲明函數表達式
let fn =function(){}
6.2 立即執行函數?
立刻執行 不需要調用 用于避免全局變量的污染
立刻執行函數后必須加;?
(function(形參){})(實參);
(function(){}())
7 案例練習
?需求:完成一個用戶輸入秒數 自動轉換為時分的程序
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
<script>// var time = +prompt("請輸入秒數");// var hour = parseInt(time / 3600);// var minute = parseInt(time % 3600 / 60);// var second = time % 60;// alert(hour + "時" + minute + "分" + second + "秒");(function(time){var hour = parseInt(time / 3600);var minute = parseInt(time % 3600 / 60);var second = time % 60;alert(hour + "時" + minute + "分" + second + "秒");})(prompt("請輸入秒數"));</script>
</html>
學習時間 2025.01.22