JavaScript函数

编程小白！！

于 2022-09-02 23:00:20 发布

阅读量335

点赞数

分类专栏：前端文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_46574200/article/details/126453826

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

函数的概念

在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-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>

函数的参数

<!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>

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

<!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>

函数形参和实参匹配问题

实参个数等于形参个数：输出正确结果
实参个数多余形参个数：只取到形参的个数
实参个数小于形参个数：多的定义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>

注意：在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>

案例

求两个数的最大值(用函数法)

<!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>

求数组中的最大值(函数法)

<!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>

函数返回值注意事项

return终止函数
return语句之后的代码不被执行
return的返回值
return只能返回一个值。如果用逗号隔开多个值，以最后一个为准
函数没有return返回undefined

如果有return则返回return后面的值
如果没有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>