• JavaScript函数

    目录

    函数的概念

    在JS中，可能会定义许多相同的代码或者功能相似的代码，这些代码可能需要大量重复使用。
    虽然for循环也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数。
    函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复。

    函数的使用

    函数在使用时被分为两步：声明函数和调用函数。

    声明函数

    //声明函数
    function 函数名(){
    //函数体代码
    }

    function是声明函数的关键字，必须小写
    由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如getSum

    调用函数

    //调用函数
    函数名 ();//通过调用函数名来执行函数体代码

    调用的时候一定不要忘记加小括号

    函数的封装

    • 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外提供一个简单的函数接口。
    • 类似于快递打包
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 函数分为两步：声明函数和调用函数
        // 1.声明函数
        /* function 函数名(){
            // 函数体
        } */
        function sayHi(){
            console.log('hi');
        }
        // (1)function  声明函数的关键字全部小写
        // (2)函数时做某件事情，函数名一般是动词
        // (3)函数不调用，自己不执行
        // 2.调用函数
        // 函数名();
        sayHi();
        // 调用函数的时候千万不要忘记加小括号
    </script>
</head>
<body>
    
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    函数的使用

    1-100累加和

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getSum(number1,number2){
            for(var i=number1;i<=number2;i++){
                var sum=0;
                sum+=i;
            }
            console.log(sum);
        }
        getSum(1,100);
    </script>
</head>
<body>
    
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    函数的参数

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* // 1.函数可以重复相同的代码
        function cook(){
            console.log('炸串');
        }
        cook();
        cook();
        // 2.我们可以利用函数的参数实现函数重复不同的代码
        function 函数名(形参1,形参2...){//在声明函数的小括号里是形参(形式上的参数)

        }
        函数名(实参1,实参2);//在函数调用的小括号里是实参 (实际的参数) */
        //3.形参和实参的执行过程
        function cook(aru){//形参是接受实参的 aru='炸串' 形参类似于一个变量
            console.log(aru);
        }
        cook('炸串');
        // 4.函数的参数可以有，也可以没有，个数不限
    </script>
</head>
<body>
    
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    利用函数求任意两个数的和以及累加和

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.利用函数求任意两个数的和
        function getSum(num1,num2){
            var sum=0;
            sum=num1+num2;
            console.log(sum);
        }
        getSum(5,10);
        getSum(5,-2);
        // 2.利用函数求任意两个数之间的和
        function getSums(start,end){
            var sum1=0;
            for(var i=start;i<=end;i++){
                sum1+=i;
            }
            console.log(sum1);
        }
        getSums(1,100);
        getSums(1,10);
        // 3.注意点
        // (1)多个参数之间用逗号隔开
        // (2)形参可以看作是不用声明的变量
    </script>
</head>
<body>
    
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    函数形参和实参匹配问题

    • 实参个数等于形参个数：输出正确结果
    • 实参个数多余形参个数：只取到形参的个数
    • 实参个数小于形参个数：多的定义undefined，结果为NaN
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 函数形参实参个数匹配问题
        function getSum(num1,num2){
            console.log(num1+num2);
        }
        // 1.如果形参的个数与实参的个数一致  则正常输出结果
        getSum(1,2);
        // 2.如果实参的个数多余形参的个数 会取到形参的个数
        getSum(1,2,3);
        // 3.如果实参的个数小于形参的个数 多余的形参定义为undefined 最终的结果是NaN
        // 形参可以看作是不用声明的变量 num2是一个变量但是没有接受值 结果就是undefined
        getSum(1);//NaN
        //建议 我们尽量让实参的个数与形参的个数相匹配
    </script>
</head>
<body>
    
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    注意：在JavaScript中，形参的默认值是undefined

    函数的返回值

    • return 语句
      有的时候我们希望函数将值返回给调用者，此时通过return语句就可以实现
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.函数是做某件事或者实现某种功能
        /* function cook(aru){
            console.log(aru);
        }
        cook('大肘子'); */
 /*        function cook(aru){
            return aru;
        }
        console.log(cook('大肘子')); */
        // 2.函数的返回值格式 
        /* function 函数名(){
            return 需要返回的结果;
        }
        函数名(); */    //调用者
        // (1)我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return 实现的
        // (2)只要函数遇到return 就把的结果 返回给函数的调用者 函数名()=return后面的结果
        // 3.代码验证
        function getResult(){
            return 666;
        }
        getResult();//getResult()=666
        console.log(getResult());
        // 4.求任意两个数的和
        function getSum(num1,num2){
            return num1+num2;
        }
        console.log(getSum(4,5));
    </script>
</head>
<body>
    
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    案例

    • 求两个数的最大值(用函数法)
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 利用函数 求两个数最大值
        function getMax(num1,num2){
            // if (num1>=num2){
            //     return num1;
            // }else{
            //     return num2;
            // }
            return num1>num2?num1:num2;
        }
        console.log(getMax(2,3));
    </script>
</head>
<body>
    
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 求数组中的最大值(函数法)
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getArrMax(arr){
            var max=arr[0];
            for(var i=1;i<=arr.length;i++){
                if(arr[i]>max){
                    var max=arr[i];
                }
            }
            return max;
        }
        var re=getArrMax([1,66,88,10,99,100]);
        console.log(re);
    </script>
</head>
<body>
    
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    函数返回值注意事项

    • return终止函数
      return语句之后的代码不被执行
    • return的返回值
      return只能返回一个值。如果用逗号隔开多个值，以最后一个为准
    • 函数没有return返回undefined
    1. 如果有return则返回return后面的值
    2. 如果没有return则返回undefined
    • break,continue,return的区别
      break:结束当前循环体(如：for、while)
      continue:跳出本次循环，继续执行下次循环(如：for、while)
      return:不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 函数返回值注意事项
        // 1. return终止函数
        function getSum(num1,num2){
            return num1+num2;
            alert('我是不会被执行的哦');//return后面的代码不会被执行
        }
        console.log(getSum(1,2));
        // 2.return只能返回一个值
        function fn(num1,num2){
            return num1,num2;//返回的结果是最后一个值
        }
        console.log(fn(1,2));

        // 3.我们求任意两个数的加减乘除结果
        function getResult(num1,num2){
            return [num1+num2,num1-num2,num2*num1,num1/num2];
        }
        var re=getResult(1,2);//返回的是数组
        console.log(re);
        // 4.我们的函数如果有return 则返回的是 return 后面的值，如果函数没有return ,则返回undefined
        function fun1(){
            return 666;
        }
        console.log(fun1());//返回666
        function fun2(){

        }
        console.log(fun2());
    </script>
</head>
<body>
    
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
  • 相关阅读:
    还在封装 xxxForm，xxxTable 残害你的同事？试试这个工具
    有监督学习——高斯过程
    git 批量clone，pull 项目
    Parallels Desktop 20破解版(Mac虚拟机) v20.0.0 for Mac 最新商业版(支持M系列)
    爬虫技术之正则提取静态页面数据
    #案例：演示map函数的使用！和#案例：演示迭代器的使用、生成器函数的使用、生成器表达式的使用！
    TDengine 3.0 重磅发布，首届开发者大会圆满结束
    高防服务器是怎样进行防御的？
    Kafka 知识点分析
    神经网络参数相关性测试,神经网络是参数模型吗
  • 原文地址：https://blog.csdn.net/weixin_46574200/article/details/126453826