关于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
