首页 > 技术文章 > JavaScript-05 函数

mengwenbiao 2020-08-16 11:55 原文

一、函数介绍

  函数也可以称作方法,是将具有特定功能的代码写在一块。

  函数作用:提高代码的重用率以及可维护性。

二、语法

function  函数名(参数1,参数2,……,参数n){
 
     //具体的功能代码

}        

  函数的调用:函数名(值1,值2,……,值n);

  注意:1.函数的参数,是由程序员根据实际情况定义,称为:“形参”;相当于代码中的变量。

     2.调用函数时:传入的值,称为 “实参”,可以确定参数的值和类型。传值时 要注意参数个数以及类型,否则会出错。

  参数包括:number、string 、Boolean 、 Object、Array、function

  实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        function fn2(a,b){
            var typ= typeof a;
            if(typ!="number" || (typeof b) !="number"){
                console.error("传入类型有误!")
                return;//返回;
            }
            var res= a+b;
            document.write(res);
        }
        fn2(2,3);//5</script>
</html>

  输出结果为:5.

  注意:以函数做参数,往往称为“回调函数”。如果参数是 函数,只需要出入 函数名。

  以参数作为函数实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        //作为参数的函数
        function fp(x,y){
             
            document.write("演示函数作为参数");
        }
        function fn4(ff){
            //使用 ff 函数
            document.write("准备调用 传入的函数");
            document.write("===================<br>");
            ff();
        }
        //以函数做参数,往往称为“回调函数”
        //如果参数是 函数,只需要出入 函数名
        fn4(fp);
    </script>
</html>

  关于函数“形参”的数量和“实参”的数量 的判断:

    1.arguments.length;  //  实际传入参数的 数量

    2.函数名.length  函数定义的  “形参”的数量

  实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        function fn5(a,b,c,d){
            var n= arguments.length;//实际传入参数的 数量
            var m= fn5.length;// 函数定义的  “形参”的数量
            if(n!=m){
                alert("参数个数不一致");
                return;
            }
            document.write(n);
            document.write(m);
            
        }
        
        fn5(1,2);
    </script>
</html>

  输出结果为:参数个数不一致;

三、函数的返回值问题:

  作用:1.将函数内部的数据,带到 函数外部; return x;
     2.结束当前的函数。 return;
       注意:写在 return; 后面的代码将不会执行。
    返回值类型:包含了 js中所有类型
        number,string,Boolean,Array,Object,Function

  Javascript 中,没有函数重载的概念。 如果出现了相同的函数名,写在后面的函数会覆盖前面的“同名”函数。由于这种机制的存在,为我们修改框架中某些函数,提供了可能。

四、函数递归:自己调用自己,关键点是找到递归函数的出口。缺点:缺点:效率非常慢。

  实例: 求 斐波拉契数列第30位的值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        
        /*求数列1,1,2,3,5,8,13........;   第30位上的值
         * Fn=F(n-1)+F(n-2),n>2;
         * F1=F2=1;
         * 
         * n:number 第几位
         * 
         * */
        function fblq(n){
            if(n==1 || n==2){
                return 1;
            }else{
                return fblq(n-1)+fblq(n-2);
            }
        }
        var res=fblq(30);
        alert(res);
        
        
    </script>
</html>

  输出结果:832040

  

  

推荐阅读