07-JavaScript函数

第7章 函数

• 函数是被设计可以重复执行的代码块。
• 函数只有在被调用时才发生作用。

7.1 函数声明及调用

1、函数的声明

• 关键字声明

    function funcName(参数){
        //代码块
    }

• 表达式声明

    var fn = function funcName(参数){
        //代码块
    }

2、函数的调用

• 函数调用格式

    var fn = function(参数){
        //代码块
    }
    //调用函数
    fn();

• 函数调用方式
  • 当事件发生时（当用户点击按钮时）
  • 当JavaScript代码调用时
  • 自动的（自调用）

3、案例演示

    //函数声明
    function paly(){
        console.log("我会玩游戏");
    }
    //函数调用 
    play();

7.2 参数

函数参数的作用，是为了让函数的功能更具有重用性。
-函数是一个封闭的代码块，可以通过参数的方式，把外部的值传递线函数内部。

带参数的函数声明

function 函数名(形参1, 形参2, 形参...){
    //函数代码块
}

带参数的函数调用

    函数名(实参1,实参2,....);

实参和形参

• 调用函数时，传递给函数的值被称为函数的实参（值传递），对应位置的函数参数名叫作形参。
• 如果实参是一个包含原始值(数字，字符串，布尔值)的变量，则就算函数在内部改变了对应形参的值，返回后，该实参变量的值也不会改变。
• 如果实参是一个对象引用，则对应形参会和该实参指向同一个对象。假如函数在内部改变了对应形参的值，返回后，实参指向的对象的值也会改变。

7.3 函数的返回值

当函数执行完后，如果希望函数返回值（比如计算的结果返回进行后续的运算），可以通过return返回一个值。 函数只能有一个返回值。

语法结构

    //声明一个带返回值的函数
    function 函数名(形参1, 形参2, 形参...){
        //函数代码块
        return  返回值;
    }
    //可以通过变量来接收函数的返回值
    var 变量 = 函数名(实参1,实参2,...);

知识要点

• 函数没有return语句，则默认返回undefined。
• 函数有return语句，则返回return语句后面的；
• 函数有return语句，但return语句后没有值，则返回undefined
• 函数在执行完return语句后，就立即退出代码块结构，如果后面还有代码也不执行。

7.4 函数其他说明

1、匿名函数和自调函数
匿名函数： 可以将匿名函数赋值给一个变量，可以通过变量调用函数功能。

    //声明匿名函数
    var fun1  =  function(){
        console.log(1);
    }
    //调用匿名函数
    fun1();

当匿名函数没有变量来表示，则不能直接调用执行，可以通过匿名函数自调用方式来执行。

    (function(){
        console.log("hello world");
    })();

2、函数本身也是值

函数作为参数

• 在JavaScript中，函数本身也可以作为值，传递给另外一个函数使用。因为，函数本身也是一种值类型，可以作为参数传递使用。

    function f1(f){
        f();
    }
    function f2(){
        console.log(2);
    }
    f1(f2); //输出结果为：2

函数作为返回值

• 因为函数是一种类型，所以可以把函数作为返回值从函数内部返回。

    function fn(b) {
      var a = 10;
      return function () {
        console.log(a+b);
      }
    }
    var f = fn(5);
    f();  //输出结果为：15

知识要点：

• 函数是一段代码的封装，可以重复调用；
• 函数声明有表达式声明和关键字声明，可以使用函数名()方式调用；
• 函数声明的参数称为形参，函数调用时的参数称为实参；
• 函数本身也是一种值类型，因此，可以当作参数和返回值使用。

7.5 函数相关案例

2020.7.27修改

案例1 通过函数方式，实现简单的计算器功能。

    function calc(a,b,operator){
        if(typeof a != 'number' || typeof b != 'number') return;
        switch(operator){
            case '+':
                return a+b;
            break;
            case '-':
                return a-b;
            break;                
            case '*':
                return a*b;
            break;                
            case '/':
                return a/b;
            break;

            default:
                console.log('对不起，你的输入有误。');
            break;
        }
    }
    console.log(calc(1,3,'+'));

案例2 编写一个函数，计算三个数字的大小，按从小到大顺序输出

    function sortABC(a,b,c){
        console.log( typeof arguments);
        console.log(arguments[0],arguments[1],arguments[2]);
        if(typeof a != 'number' || typeof b != 'number' || typeof c != 'number' ) return;

        let temp = 0;
        if(a>b){
            temp = a;
            a = b;
            b = temp;
        }

        if( a > c){
           temp = a;
           a = c;
           c =temp;            
        }
        if(b > c ){
            temp = b ;
            b = c;
            c =temp;
        }

        console.log(a + '<' + b +'<'+c);
    }
    sortABC(11,18,9);

案例3 判断任何年份是闰年还是平年？

    function judge(year){
        // 闰年满足的条件 ： 能被400整除或者 能被4整除且不能被100整除的年份
        if(year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)){
            console.log(`${year}是润年！`)
        }else{
            console.log(`${year}是平年！`)
            
        }
    }
    judge(2000);

案例4 递归：就是函数调用自身的过程；

    /**
        方法:
        1. 首先去找临界值，即无需计算，获得的值。
        2. 找这一次和上一次的关系
        3. 假设当前函数已经可以使用，调用自身计算上一次
    
    */
    // 计算1+2+3+…+100的和
    function sum(n){
        // 分析：
        // sum(1)  ...  1    临界值：当n=1时，sum(1) = 1;
        // sum(2)  ...  2 + sum(1)   ... 3
        // sum(3)  ...  3 + sum(2)   ... 6
        // sum(n)  ...  n + sum(n-1) 
    
        //具体代码：
       /*  if(n == 1){
            return 1;
        }
    
        return n + sum(n-1); */
    
        //可简写为： 
        return n == 1 ? 1 : n+sum(n-1);
    }
    console.log(sum(100));  //结果为：5050