【前端-初阶】JS函数

我自闭了？

已于 2023-03-22 21:52:53 修改

阅读量148

点赞数

分类专栏： JavaScript 前端学习日记文章标签： javascript 前端 vue.js

于 2023-03-19 16:21:49 首次发布

本文链接：https://blog.csdn.net/qq_48234463/article/details/129652153

版权

前端学习日记同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

JavaScript

19 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的函数，包括函数的概念，如何声明和调用函数，函数的封装，以及函数参数的形参和实参概念。还探讨了函数的返回值，使用return语句返回结果，并通过示例展示了如何处理参数个数不匹配的情况。此外，文章还讨论了break、continue和return的区别，并提供了编写函数的实例，如求和、找最大值、判断闰年等。

摘要由CSDN通过智能技术生成

1.函数的概念

封装了一段可被重复调用执行的代码块，通过函数可以实现大量代码的重复使用。函数是一种数据类型。

虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数

2.函数的使用

2.1 声明函数

function 函数名(){

//函数体

}

例：

 <script>
     function sayHi() {
         console.log('Hi');
     }
     //function声明函数的关键字 全部小写
     //函数是做某些事情，函数名一般是动词
     //函数不调用自己不执行
 </script>

2.2 调用函数

sayHi();

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

注：声明函数本身并不执行代码，只有调用函数时才会执行函数体代码。

2.3 函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
简单理解：封装就类似于将电脑配件整合组装到机箱中（类似快递打包）

案例：利用函数计算1-100之间的累加和

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

提问：

1、函数是做什么的？

大量代码重复使用，封装大量代码方便使用

2、声明函数用什么关键字？

function

3、如何调用函数？

函数名加上小括号。

4、封装是什么意思？

打包，将函数整合成一个整体。

3.函数的参数

3.1 形参和实参

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

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

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

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

}

函数名(形参1,形参2,形参3...);//在函数电泳的小括号里面是实参（实际的参数）

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

 <script>
     function cook(aru) {//实参是接收实参的 aru='酸辣土豆丝'
         console.log(aru);
     }
     cook('酸辣土豆丝');//'酸辣土豆丝'实参
     cook('红烧肉');
 </script>

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

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称之为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称之为实参。

参数	说明
形参	形式上的参数，函数定义时传递的参数，当前并不知道是什么
实参	实际上的参数，函数调用时，函数用的时候传递的参数，实参是传递给形参的

参数的主要作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

3.2 练习：求和

 <script>
 //求两个数的和
     function getSum(num1, num2) {
         var num1 = prompt('请输入第一个数：');
         var num2 = prompt('请输入第二个数：');
         alert(parseFloat(num1) + parseFloat(num2));
     }
     getSum();
     
     //求两个数之间的和
     function getSum(num1, num2) {
         var num1 = prompt('请输入第一个数：');
         var num2 = prompt('请输入累加的最后一个数：');
         var sum = 0;
         for (var i = parseFloat(num1); i <= parseFloat(num2); i++) {
             sum += i;
         }
         alert(sum);
     }
     getSum();
 </script>

注：

多个参数之间用逗号隔开
形参可以看做是不用声明的变量

3.3 函数形参和实参个数不匹配的问题

 <script>
     function getSum(num1, num2) {
         console.log(num1 + num2);
     }
     //1.实参个数与形参一致 正常输出
     getSum(1, 2);//3
     //2.实参个数多于形参 会取到形参的个数
     getSum(1, 2, 3);//3
     //3.实参个数小于形参 多余的形参定义就是undefined 最终的结果就是NaN
     // 形参可以看做是不用声明的变量 num2是一个变量但没有接收值 结果就是undefined
     getSum(1);//NaN
 </script>

参数个数	说明
实参个数等于形参个数	输出正确结果
实参个数多于形参个数	只取到形参的个数
实参个数小于形参	多的形参定义为undefined,结果为NaN

注：尽量让实参与形参的个数相匹配

3.4 小结

函数可以带参数也可以不带参数
声明函数的时候，函数名括号里面的是形参，形参的默认值为undefined
调用函数的时候，函数括号里面的是实参
多个参数之间用逗号分隔
形参和实参的个数可以不匹配，但是结果不可预计，我们尽量匹配

4.函数的返回值

4.1 return语句

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

返回值：函数调用整体代表的数据；函数执行完成后可以通过return语句将指定数据返回。

函数的返回值格式

function 函数名(){

return 需要返回的结果;

}

函数名();

函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名（）通过return实现的
只要函数遇到return 就把后面的结果返回给函数的调用者函数名()=return后面的结果
代码验证：

 <script>
     function getResult() {
         return 666;
     }
     // getResult();//getResult =666
     console.log(getResult());
 
     //大肘子逻辑正确时的输出写法
     function cook(aru) {
         return aru;
     }
     console.log(cook('大肘子'));
 
     //求任意两个值的和
     function getSum(num1, num2) {
         return num1 + num2;
     }
     console.log(getSum(1, 2));
 </script>

案例1：利用函数求任意两个数的最大值

 <script>
     // function getMax(num1, num2) {
     //     if (num1 > num2) {
     //         return num1;
     //     } else {
     //         return num2;
     //     }
     // }
     // console.log(getMax(1, 2));
 
     function getMax(num1, num2) {
         return num1 > num2 ? num1 : num2;
     }
     console.log(getMax(1, 2));
 </script>

案例2：利用函数求任意一个数组中的最大值

求数组[5,2,99,101,67,77]中的最大值

<script>
    function getMax(arr) {//接收一个数组
        var max = arr[0];
        for (var i = 1; i <= arr.length; i++) {
            if (arr[i] > max) {
                var max = arr[i];
            }
        }
        return max;
    }
    re = getArrMax([5, 2, 99, 101, 67, 77]);//实参是一个数组送过去
    //实际开发中，我们经常用一个变量来接收函数的返回结果 使用简单
    console.log(re);//实参是一个数组
</script>

4.2 return 终止函数

return语句之后的代码不被执行。

<script>
    function getSum(num1, num2) {
        return num1 + num2;//return后面的代码不会被执行
        alert('我是不会被执行的哦！');
    }
    console.log(getSum(1, 2));
</script>

return只能返回一个值，如果用逗号隔开多个值，以最后一个为准。

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

求任意两个数的加减乘除结果

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

4.3 函数没有return返回undefined

<script>
    function fun1() {
        return 666;
    }
    console.log(fun1());//返回 666
    function fun2() {
    }
    console.log(fun2());//返回undefined
</script>

4.4 break、continue、return的区别

break：结束当前的循环体（如for、while）
continue：跳出本次循环，继续执行下次循环（如for、while）
return：不仅可以退出循环，还能返回return语句中的值，同时还可以结束当前的函数体内的代码

通过榨汁机看透函数

作业：

1、写一个函数，用户输入任意两个数字的任意算数运算（简单的计算器小功能），并能弹出运算后的结果

<script>
    var sever = prompt('1、两数相加\n2、两数相减\n3、两数相乘\n4、两数相除\n5、两数相余\n6.退出\n请输入序号：');
    function getResult(num1, num2) {
        var num1 = prompt('请输入一个数字：');
        var num2 = prompt('请再输入一个数字：');
        num1 = parseFloat(num1);
        num2 = parseFloat(num2);
        switch (sever) {
            case '1':
                result = num1 + num2;
                break;
            case '2':
                result = num1 - num2;
                break;
            case '3':
                result = num1 * num2;
                break;
            case '4':
                result = num1 / num2;
                break;
            case '5':
                result = num1 % num2;
                break;
            case '6':
                break;
        }
        alert(result);
        sever = prompt('1、两数相加\n2、两数相减\n3、两数相乘\n4、两数相除\n5、两数相余\n6.退出\n请输入序号：');
    }
    while (1 == 1) {
        if (sever == '1') {
            getResult('1');
        }
        if (sever == '2') {
            getResult('2');
        }
        if (sever == '3') {
            getResult('3');
        }
        if (sever == '4') {
            getResult('4');
        }
        if (sever == '5') {
            getResult('5');
        }
        if (sever == '6') {
            break;
        }
    }
</script>

2、写一个函数，用户输出任意两个数，弹出输出最大值

<script>
    function getMax(num1, num2) {
        var num1 = prompt('请输入一个数字：');
        var num2 = prompt('请输入另一个数字：');
        num1 = parseFloat(num1);
        num2 = parseFloat(num2);
        if (num1 > num2) {
            return num1;
        } else {
            return num2;
        }

    }
    alert(getMax());
    
	//方法二
    function getMax(num1, num2) {
        var num1 = prompt('请输入一个数字：');
        var num2 = prompt('请输入另一个数字：');
        num1 = parseFloat(num1);
        num2 = parseFloat(num2);
        return num1 > num2 ? num1 : num2;

    }
    alert(getMax());
</script>

3、写一个函数，用户输入任意三个不同数字，求最大值，并能弹出结果

<script>
    function getMax(num1, num2, num3) {
        var num1 = prompt('请输入第一个数字：');
        var num2 = prompt('请输入第二个数字：');
        var num3 = prompt('请输入第三个数字：');
        num1 = parseFloat(num1);
        num2 = parseFloat(num2);
        num3 = parseFloat(num3);
        if (num1 > num2 && num1 > num3) {
            return num1;
        } else if (num2 > num3) {
            return num2;
        } else {
            return num3;
        }
    }
    alert(getMax());
</script>

4、写一个函数，用户输入一个数判断是否为素数，并弹出值（又叫质数，只能被1和自身整除的数）

<script>
    function getNum(num1) {
        var num1 = prompt('请输入一个数字：');
        if (num1 == 1) {
            return num1 + '不是质数';
        }
        if (num1 == 2) {
            return num1 + '是质数';
        }
        for (var i = 2; i <= num1; i++) {
            if (num1 % i == 0) {
                return num1 + '不是质数';

            } else {
                return num1 + '是质数';
            }
        }
    }
    alert(getNum());
</script>

5.arguments的使用

当不确定有多少个参数传递的时候，可以用 arguments 来获取。JS中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组，因此可以进行遍历。

5.1arguments的使用

<script>
    //只有函数才有arguments对象 而且是每个函数都内置好了arguments
    function fn() {
        console.log(arguments);//里面存储了所有传递过来的实参
        console.log(arguments.length);
        console.log(arguments[2]);
        //我们可以按照数组的方式遍历arguments
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    }
    fn(1, 2, 3);
</script>

arguments具有伪数组，伪数组不是真正意义上的数组，伪数组具有以下特点：

具有length属性
按索引方式存储数据
不具有数组的push()，pop()等一些方法

案例：利用函数求任意个数的最大值

<script>
    function getMax() {
        var max = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            if (arguments[i] > max) {
                max = arguments[i];
            }
        } return max;
    }
    console.log(getMax(1, 2, 3, 4, 5));
</script>

6.函数案例：

案例1：利用函数封装方式，翻转任意一个数组

<script>
    function getOverturn() {
        var arr = [];
        for (var i = 0; i < arguments.length; i++) {
            arr[i] = arguments[i];
            arguments[i] = arguments[arguments.length - 1];
            arguments[arguments.length - 1] = arr[i];
            arguments.length--;
        } return arguments;
    }
    console.log(getOverturn(1, 2, 3, 4, 5));
    
    //方法二
    function reverse(arr) {
        var Newarr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            Newarr[Newarr.length] = arr[i];
        } return Newarr;
    }
    var arr1 = reverse([5, 4, 3, 2, 1])
    console.log(arr1);
</script>

案例2：利用函数，冒泡排序

<script>
    function sort(arr) {
        for (var i = 0; i < arr.length - 1; i++) {
            for (var j = 0; j < arr.length - 1; j++) {
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        } return arr;
    }
    var arr1 = sort([5, 4, 3, 2, 1]);
    console.log(arr1);
</script>

案例3：判断闰年

要求：输入一个年份，判断是否是闰年（闰年：能被4整除并且不能被100整除，或者能被400整除）

<script>
    function isLeapyear(year) {
        var flag = false;
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            flag = true;
        }
        return flag;
    }
    var year1 = isLeapyear(2000);
    console.log(year1);
    var year2 = isLeapyear(1999);
    console.log(year2);
</script>

函数可以调用另外一个函数

因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数的相互调用的情况。

<script>
    function fn1() {
        console.log(11);
        fn2(); //在fn1中调用fn2的函数
    }
    fn1();
    function fn2() {
        console.log(22);
    }
</script>

小练习：执行结果为？

<script>
    function fn1() {
        console.log(111);
        fn2();
        console.log('fn1');
    }
    function fn2() {
        console.log(222);
        console.log('fn2');
    }
    fn1();//111 222 fn2 fn1
</script>

案例4：用户输入年份，输出当前年份2月份的天数

<script>
    function february() {
        var year = prompt('请输入年份：');
        if (isLeapyear(year)) {
            alert('当前年份是闰年2月份有29天');
        } else {
            alert('当前年份是平年2月份有28天');
        }
    }
    february();
    //判断是否为闰年的函数
    function isLeapyear(year) {
        var flag = false;
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            flag = true;
        }
        return flag;
    }
</script>

7.函数的两种声明方式

7.1 利用函数关键字自定义函数

function fn(){

}

fn();

7.2 函数表达式

var 变量名 = function() {};

<script>
    var fun = function (aru) {
        console.log('我是函数表达式');
        console.log(aru);
    }//无名的函数（匿名函数）
    fun('我是神');
</script>

fun为变量名不是函数名
函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数
函数表达式也可以进行传递参数

我自闭了？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端-初阶】JS函数

【前端-初阶】JS函数
复制链接

扫一扫

专栏目录