JavaScript（六）函数

 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。其实也就是一种封装，即将一些语句封装到函数里面，通过调用的形式执行这些语句。

一、定义函数

俩种方式：一种是函数声明，另一种是函数表达式

（1）函数声明

function 函数名字 (){

}

• function是一个关键字，和var、typeof一样都是关键字，后面要加空格。
• 函数名字的命名规定和变量的命名规定一样，只能是字母、数字、下划线、美元符号，不能以数字开头。
• 后面要有一对空的小括号，里面是放参数用。
• 大括号里面是这个函数的语句。

有一个重要特征是 函数声明提升,这就意味着可以把函数声明放在调用它的语句后面

sayHi();
function sayHi(){
alert("Hi");
}

(2) 函数表达式

var 函数名=function（）{   //匿名函数

}

函数表达式与其他表达式一样，在使用前必须先赋值 

sayHi();  //错误 函数还不存在    
var sayHi=function(){      // 类似常规的变量赋值语句   变量不能提前声明
         alert("Hi");     
   }

二、函数的调用

调用一个函数就是在这个函数的名字后面加小括号。 
语法：

函数名字 （）;

定义函数，可以在函数调用以后 

    <script>
        console.log("你好");
        sayHello();         //调用函数

        //定义函数：
        function sayHello(){
            console.log("欢迎光临");
        }
    </script>

优点

1）将大量重复的语句写在函数里面，这样以后需要这些语句的时候，直接调用函数，不用重写语句。 
2）简化编程，让编程变得模块化。

三、函数的参数

多个参数，用逗号隔开

        sayHello("在干嘛","逛街吗");    //函数的调用（实际参数，真实的数值、字符串）
   //  定义函数   （形式参数，表示接收一个值）
        function sayHello( a,b){
            console.log("a");
            console.log("b");
        }

 

       sum(3,4);
         sum("3",4);
        sum("我爱你","中国");

        function  sum(a,b){
            console.log(a+b);
        }

输出结果： 7 34 我爱你中国

注意：实际参数和形式参数的个数不一定要相同

    <script> 
function sum (a,b,c){
            if(sum.length >arguments.length ){    
//arguments实参列表  arguments[0]和 a不是同一个东西  存在映射关系  一个变，另一个也变,实参个数=arguments.length
                console.log("形参多了"); 
            }
            else if(sum.length <arguments.length){

                console.log("实参多了");
            }
            else{
                console.log("相等");
            }
        }
        sum(1,"abc",undefined,2);
    </script>

案例：不定参数求和

 function sum(){
            var result =0;
            for (var i=0;i<arguments.length;i++){
                result +=arguments[i];
            }
            console.log(result);
        }
        sum(1,2,3,4,5,6,7,8,9);

 

四、函数的返回值

函数将值返回调用它的地方。通过使用 return 语句就可以实现。

   console.log(sum(3,4));

        function sum(a,b){
            return a+b;
        }

• return表示此时这个“函数调用的表达式”就是这个a+b。 
• 函数里面可以没有return，如果有，只能有一个，不能有多个return； 
• 在使用 return 语句时，函数会停止执行，并返回指定的值。

五、匿名函数

<input type="button" value="点击" id="btn">
<script type="text/javascript">
    //匿名函数的第一种情形
    var btn=document.querySelector("#btn");     //querySelector是H5中新增的查找dom元素的方法
    btn.onclick=function(){
        // alert("aaaaa");
    }
    //匿名函数的第二种情形
    setInterval(function(){
        // alert("bbbbb");
    }, 1000);
    //匿名函数的第三种情形
    var fun=function(){
        alert("ccccc");
    }
    // fun();
    //匿名函数的第四种情形
    var obj={
        name:"dddd",
        say:function(){
            alert(this.name);
        }
    }
    obj.say();
</script>

六、案例

案例一：用函数找较小的数

    <script>
        var a = small(3, small(4, 5));
        console.log(a);
        function small(a,b){
            if(a>b){
                return b;
            }
            else{
                return a;
            }
        }
    </script>

案例二：用函数的思想判断水仙花

<script>
        for (var i = 100; i <= 999; i++) {
            if (panduan(i) == true) {
                console.log(i);
            }

        }
 //百位函数，这个函数的功能是，接收一个参数，返回这个参数的百位数
        function baiwei(num) {
            return parseInt(num / 100);
        }
//十位函数
        function shiwei(num) {
            return parseInt(num %100 / 10);
        }
//个位函数
        function gewei(num) {
            return num % 10;
        }
 //判断数字是否是水仙花数：
        function panduan(num) {
            var a = baiwei(num);
            var b = shiwei(num);
            var c = gewei(num);

            if (num == Math.pow(a, 3) + Math.pow(b, 3) + Math.pow(c, 3)) {
                return true;
            }
            else {
                return false;
            }

        }
    </script>

案例三： 输入一串数字  倒序输出 并转换成汉字形式

 <script>
        reverse();
        function reverse() {
            var num = window.prompt("input");   //窗口提示输入信息
            var str = "";
            for (var i = num.length - 1; i >= 0; i--) {
                str += transfer(num[i]);    /*函数执行*/
            }
            document.write(str);
        }
        function transfer(target){
            switch(target){
                case "1":return"一";
                case "2":return"二";
                case "3":return"三";
                case "4":return"四";
                case "5":return"五";
                case "6":return"六";
            }
        }

    </script>