JavaScript函数及其应用

最新推荐文章于 2025-03-30 20:34:08 发布

枕頭說他不想醒

最新推荐文章于 2025-03-30 20:34:08 发布

阅读量472

点赞数 6

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_52984349/article/details/126246530

版权

JavaScript 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了JavaScript函数的概念、使用、参数、形参与实参匹配、返回值及其注意事项。通过实例解析函数的封装、参数传递及返回值的使用，帮助读者掌握JavaScript中函数的核心应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：

在js里面，可能会地定义非常多的相同代码或者功能相似的代码，这些代码肯需要大量重复使用肃然for循环语句也能实现一些简单重复的操作，但是比较有局限性，此时我们就可以使用js中的函数

一：函数的概念

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用

二、函数的使用

函数使用分为两步：声明函数和调用函数

1、声明函数

格式：

function 函数名(){
            //函数体
}

代码展示：

function sayHi(){;
        }
   console.log('hello~');

结果展示：

注意：

(1) function 声明函数的关键字，全部小写

(2) 函数是做某件事情，函数名一般是动词

(3) 函数不调用，自己不执行

2、调用函数
格式：

函数名();
sayHi();

注意：

调用函数的时候千万不要忘记加小括号

3、函数的封装：函数的封装就是把一个或者多个功能通过函数的方式封装以来，对外只提供一个简单的函数接口

4、具体案例

要求：利用函数计算1-100之间的和

（1）声明函数

  function getSum(){
            var sum = 0;
            for (var i = 1; i <= 100; i++){
                sum += i;
            }
            console.log(sum);
        }

（2）调用函数

 getSum();

结果展示：

三、函数的参数

1、函数可以重复相同是代码

代码展示：

 function cook(){
            console.log('酸辣土豆丝');
        }
        cook();
        cook();

结果展示：

酸辣土豆丝打印了两遍

2、利用函数的参数实现函数重复不同的代码

格式：

 function 函数名(形参1,形参2...){ //在声明函数的小括号里面是形参 （形式上的参数）

        }
        函数名(实参1,实参2...) //在函数调用的小括号里面是实参(实际的参数)

3、形参和实参的执行过程

 function cook(aru) {
            console.log(aru);
        }
        cook('酸辣土豆丝');
        cook('猪蹄')

形参是接收实参，相当于aru = '酸辣土豆丝' 形参类似于一个变量

4、函数的参数可以有，也可以没有，个数不限

四、函数形参和实参个数不匹配

  function getSum(num1, num2) {
            console.log(num1 + num2);
        }

1、如果实参的个数和形参的个数一致，则正常输出结果

    getSum(1,2);

结果展示：

2、如果实参的个数多于形参的个数,会取到形参的个数

   getSum(1,2,3);

结果展示：

3、如果实参的个数小于形参的个数,多于的形参定义为undefined 最终的结果就是NaN

形参可以看做是不用声明的变量 num2是一个变量没有接收值，结果就是undefined

 getSum(1); //1 + undefined = NaN

结果展示：

因此我们建议：我们尽量让实参的个数和形参的个数相匹配

五、函数的返回值

1、函数是做某件事或者实现某种功能

  function cook(aru) {
            console.log(aru);
        }
        cook('猪蹄')

这种只是将函数返还给了自己，并没有返回给调用者，那么如果我们需要将结果返回给调用者呢？

2、return语句

有时候，我们会希望函数将值返回给调用者，此时通过使用return语句就可以实现

3、语法格式

 function 函数名(){
             return 需要返回的结果
         }
         函数名();

注意：

（1）我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名（）通过return实现的

(2) 只要函数遇到return 就把后面的结果返回给函数的调用者函数名（） = return 函数名后面的结果

4、代码验证

要求：求任意两个数的和

代码展示：

 function getSum(num1, num2) {
            return num1 + num2; 
        }
        console.log(getSum(1, 2));

结果展示：

六、函数返回值注意事项

1、return 终止函数

代码展示：

function getSum(num1 ,num2) {
            return num1 + num2  //return后面的代码不会被执行
            alert('你看不到我的')
        }
        console.log(getSum(1,2));

return后面的代码不会被执行

结果展示：

2、return只能返回一个值

代码展示：

function fn(num1 ,num2) {
            return num1 , num2  //返回的结果是最后一个值
        }
        console.log(fn(1,2));

结果展示：

3、那如果我们像返回多个值，就用数组实现

代码展示：

 function getResult(num1,num2) {
            return [num1 + num2,num1 - num2,num1 * num2, num1 / num2];
        }
        var re = getResult(1,2); //返回的是一个数组
        console.log(re);
        for(i=0; i<4; i++){
            console.log(re(i));
        }

结果展示:

然后我们在用数组的遍历将里面的元素去除即可

4、我们的函数如果有return 则返回的是return后面的值，如果函数没有return 则返回undefined

代码展示：

 function fun1() {
            return 666;
        }
        console.log(fun1());  //返回666
        function fun2() {
        }
        console.log(fun2());  //如果函数没有return 则返回undefined

结果展示：