当前位置：首页 > article >正文

JavaScript 基础 - 7

article 2025/2/4 5:14:34

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

查看全文

http://www.kler.cn/a/530644.html