【前端学习笔记】08-函数

函数

• 概念：在JS里面可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用；虽然for循环也能实现一些简单的重复性操作，但比较有局限性，此时我们就可以使用JS中的函数
• 函数：就是封装了一段可被重复执行的代码块，通过此代码块可以实现大量代码的重复使用
• 因为函数都是独立的代码块，所以函数间可以相互调用

函数的使用

• 函数的使用分为两步：声明函数和调用函数

 // 1.函数的使用
        function sayHi(){
            console.log('hi~~');
        }
        sayHi();//调用函数时，必须加()  

函数的两种声明方式

1.利用函数关键字自定义函数（命名函数），语法结构如下：

    // 声明函数
        function 函数名(){
            // 函数体
        }
        // 调用函数
        函数名();

2.函数表达式，匿名函数：
（图片中的参数等概念见下文）

函数的参数

形参和实参

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

• 语法结构和代码示例：

        // 利用函数的参数实现函数重复不同的代码
        function 函数名(形参1,形参2...){

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

注意点：

• 函数的参数可以有，也可以没有，个数不限
• 多个参数间，使用逗号隔开
• 形参和实参的匹配：实参数=性参数，正常输出；实参数大于形参数，取到形参个数;实参数小于形参数：多余的参数定义为undefined

函数的返回值

return语句返回值

return语句：希望函数将值返回给调用者时，此时通过return语句就能实现

• 函数的返回值格式：

• 代码示例：

    //.求任意两个数的和
        function getSum(num1,num2){
            return num1 + num2;
        }
        console.log(getSum(1,2));//3

return终止函数

• return语句之后的代码不被执行
• return只能返回一个值。如果用逗号隔开多个值，以最后一个为准
  
• 当需要多个值时，可以采用数组的形式返回，如下：

// 3.求任意两个数的加减乘除结果
            function getResult(num1,num2){
                return [num1+num2,num1-num2,num1*num2,num1/num2];
            }
            var re = getResult(4,2);
            console.log(re);

return注意事项

• 函数里有return则返回return后面的值，没有return则返回undefined
• return和break，continue的区别：
  

arguments的使用

• 概念：arguments是JavaScript中当前函数的一个内置对象，arguments对象中存储了传递的所有实参；当不确定有多少个参数传递的时候，可以用arguments来获取
• 只有函数才有arguments对象，而且每个函数都内置了arguments对象
• arguments展示形式是一个伪数组，因此可以进行遍历；伪数组具有以下特点：
  
• 代码示例：
  

函数相互调用示例

• 打印结果：111 222 fn2 fn1

函数案例

• 每小节课的代码体验和课堂案例代码
• 若全部复制使用时，需注意每个案例分开运行，避免某些变量被重复定义

// 课堂代码体验
    //    1.利用函数求任意两个数之间的和
    var sum = 0;
    function getSum(num1,num2){
        for(var i=num1;i<=num2;i++){
            sum+=i;
        }
        console.log(sum);
    }
    getSum(1,100);

    // // 2.求任意两个数的和(用return)
        function getSum(num1,num2){
            return num1 + num2;
        }
        console.log(getSum(1,2));//3   
    
    // 3.求任意两个数的加减乘除结果（利用return）
            function getResult(num1,num2){
                return [num1+num2,num1-num2,num1*num2,num1/num2];
            }
            var re = getResult(4,2);
            console.log(re);

    // 4.利用函数求任意两个数的最大值
            function getMax(num1,num2){
                if(num1>num2){
                    return num1;
                }else{
                    return num2;
                } 
            }
            console.log(getMax(4,8));

            利用三元运算符来实现
            function getMax(num1,num2){
                return num1>num2? num1:num2;
            }
            console.log(getMax(11,25));

    // 5.利用函数求任意个数最大值:[5,2,6,78,64,104];
            var arr=[5,2,6,78,64,104];
           
            function getMax(arr){
                var max = arr[0];
                for(i=1;i<arr.length;i++){
                  if(arr[i]>max){
                    max = arr[i];
                  }
                }
                return max;
            }
            // getMax([5,2,6,78,64,104]);//实参是一个数组送过去
            // 在实际开发里面，我们经常用一个变量来接收函数的返回结果，使用更简单
            var re =  getMax([5,2,6,78,64,104]);
            console.log(re);

// 课堂案例
    
    // 案例1：利用函数翻转数组 reverse 翻转
            function reverse(arr){
                var newarr = [];
                for(var i=arr.length - 1;i>=0; i--){
                    newarr[newarr.length] = arr[i];
                }
                return newarr;
            }
            var re = reverse([2,9,8,4,6]);
            console.log(re);

    // 案例2：利用函数封装方式，对数组排序--冒泡排序
    function sort(arr){
        for(var i = 0; i<arr.length-1; i++){
            for(var j = 0; j<arr.length-1-i; 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([1,7,6,5,8]);
    console.log(arr1);

    // 案例3：判断闰年：输入一个年份，判断是否是闰年（能被4整除并且不能被100整除，或能被400整除）
        
        function isRun(year){
            var flag = false;
            if(year%4==0 && year%100 !=0 ||year%400==0){
                flag = true;
            }
            return flag;
        }
        console.log(isRun(2000));//true
        console.log(isRun(1999));//false

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

        function backDay(){
            var year = prompt('请您输入年份：');
            if(isRun(year)){
                alert('当前年份是闰年，2月份有29天');
            }else{
                alert('当前年份是平年，2月份有28天');
            }

        }
        backDay(); 
        //判断闰年函数
        function isRun(year1){//此处形参名可以随意改，但要注意改变时函数体中名字也要一并更改
            var flag = false;
            if(year1%4==0 && year1%100 !=0 ||year1%400==0){
                flag = true;
            }
            return flag;
        }