51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

JavaScript——函数

函数的概念

在JS里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。

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

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

函数的使用

1.声明函数

    function 函数名() {
    //函数体
    }
  • function是声明函数的关键字,全部小写
  • 函数是做某件事情,函数名一般是动词
  • 函数不调用自己不执行

2.调用函数

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

调用函数的时候不能忘记加小括号

口诀:函数不调用,自己不执行。

3.函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口

封装类似于将电脑配件整合到组装的机箱中(类似快递打包)

案例:求1-100的累加和

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

函数的参数

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

形参和实参

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

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

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

    function 函数名(形参1, 形参2...) { //在声明函数的小括号里的是形参(形式上的参数)
        //函数体
    }
    函数名(实参1, 实参2...) //在函数调用的小括号里是实参(实际的参数)

形参和实参的执行过程:

    function cook(aru) { //形参是接收实参的'aru=岳泽以'形参类似于一个变量
        console.log(aru);
    }
    cook('岳泽以');

案例:利用函数求任意数之间的和

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

注意

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

匹配问题

  1. 如果实参的个数和形参的个数一致,则正常输出结果
  2. 如果实参的个数多于形参的个数,多余的不参与计算
  3. 如果实参的个数小于形参的个数,多余形参定义为undefined,则返回结果NaN
  4. 建议尽量让实参的个数和形参相匹配

函数的返回值

return语句

有的时候,我们会希望函数将返回值返回给调用者,此时通过return语句实现。

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

我们函数只是实现某种功能,最终的结果需要返回给函数的调用者 函数名(),通过return实现。

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

    function getResult(aru) {
        return aru;
    }
    console.log(getResult(岳泽以));//岳泽以

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

    function getArrMax(arr) {
        var max = arr[0];
        for (var i = 1; i < +arr.length; i++) {
            if (arr[i] > max) {
                max = arr[i];
            }
        }
        return max;
    }
    console.log(getArrMax([5, 3, 66, 71, 10]));

在我们实际开发中,我们经常用一个变量来接收函数的返回结果使用更简单。

    function getArrMax(arr) {
        var max = arr[0];
        for (var i = 1; i < +arr.length; i++) {
            if (arr[i] > max) {
                max = arr[i];
            }
        }
        return max;
    }
    // console.log(getArrMax([5, 3, 66, 71, 10]));
    var re = getArrMax([5, 3, 66, 71, 10]);
    console.log(re);

return终止函数

return语句后面的代码不会被执行

    function getSum(num1, num2) {
        return num1 + num2;
        alert('不会被执行')
    }
    console.log(getSum(1, 2));

return的返回值

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

    function getSum(num1, num2) {
        return num1, num2;
    }
    console.log(getSum(1, 2)); //结果为2

解决案例 :求任意俩个数的加减乘除结果

    var re = getArrMax([5, 3, 66, 71, 10]);
    console.log(re);

    function getSum(num1, num2) {
        return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
    }
    console.log(getSum(1, 2)); //结果为[3, -1, 2, 0.5],返回的是一个数组

如果函数有return,则返回的是return后面的值,如果函数没有return则返回undefined。

    function fun() {

    }
    console.log(fun2()); //函数返回的结果是undefined

break,continue,return的区别

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

arguments的使用

当我们不确定有多少个参数传递的时候,可以用arguments来获取。

在JavaScript中,arguments实际上是当前函数的一个内置对象,所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参。

arguments展示形式是一个伪数组,因此可以进行遍历,伪数组具有以下特定:

  • 具有length属性
  • 按索引方式储存数据
  • 不具有数组的 push(),pop()等方法
    function fn() {
        console.log(arguments);//Arguments(3)
        console.log(arguments.length);//3
        console.log(arguments[2]);//3
    }
    fn(1, 2, 3);
</script>

我们可以按照数组的方式遍历 arguments

    function fn() {
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    }
    fn(1, 2, 3);//1,2,3

注意 :只要函数才有 arguments对象,而且是每个函数都内置好了这个 arguments

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

    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(11, 2, 34, 68, 254));

函数的两种声明方式

利用函数关键字自定义函数(命名函数)

    function fn() {

    }
    fn();

利用函数表达式声明函数(匿名函数)

    var fun = function() {
        console.log('岳泽以');
    }
    fun();
  • fun是变量名,不是函数名
  • 函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值,而函数表达式里面存的是函数
  • 函数表达式也可以进行传递参数
赞(1)
未经允许不得转载:工具盒子 » JavaScript——函数