JS课程分享(7.函数)

一、函数的概念

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

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

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

二、函数的使用

函数在使用时分为两步：声明函数和调用函数

2.1 声明函数

//声明函数

function 函数名( ) {

        // 函数体
    }

function 是声明函数的关键字，必须小写

由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum

2.2 调用函数

//调用函数

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

调用的时候千万不要忘记添加小括号

口诀：函数不调用，自己不执行。

注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

2.3 函数的封装

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

简单理解：封装类似于快递打包。或者把电脑配件组装成一个电脑。

三、函数的参数

3.1 形参和实参

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

参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的

值进去

3.2 函数形参和实参个数不匹配的问题

function getSum(num1, num2) {
        console.log(num1 + num2);
    }
    getSum(1, 2); 	// 3
    getSum(1, 2, 5);   // 3
    getSum(1); 	// NaN

注意： 在JavaScript 中，形参的默认值是undefined

3.3 总结

• 函数可以带参数 也可以不带参数
• 声明函数的时候，函数名括号里面是形参，形参的默认值为 undefined
• 调用函数的时候，函数名括号里面是实参
• 多个参数中间用逗号分隔
• 形参的个数可以和实参个数不匹配，但是结果不是预计的，所以我们尽量匹配

四、函数的返回值

4.1 return 语句

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

4.2 return 终止函数

return 语句之后的代码不被执行。

4.3 return 的返回值

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

4.4 函数没有 return 返回 undefined

4.5 break，continue， return 的区别

break ：结束当前的循环体（如：for 、while）

continue : 跳出本次循环，继续执行下次循环（for、while）

return：不仅可以退出循环，还能够返回return 语句中的值，同时还可以结束当前的函数体内代码

五、arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments 来获取，在JavaScript
中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments
对象，arguments对象中存储了传递的所有实参。

 arguments 展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点：
 
 具有length 属性
 
 按索引方式存储数据
 
 不具有数组的 push，pop 等方法

六、函数案例

 // 把arr数组的 最后一个 元素  取出来  给新数组  作为第一个
    // ['yellow','pink','blue','green','red']

    function fn(arr) {
      
        var newArr = [];
        for(var i=arr.length-1; i>= 0; i--){
            newArr[newArr.length] = arr[i]
        }
        return newArr;
    } 
    var arr = ['red','green','blue','pink','yellow'];
    document.write(fn(arr)+"<br/>");




    // 利用函数封装方式，对数组排序--冒泡排序
    //  [5,4,3,2,1]
    function fun(arr) {
        for(var i = 0; i < arr.length; i++){
            for(var j = 0 ;j < arr.length; j++){
                if(arr[j] > arr[j+1]){
                    var temp = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = temp;
                }
            }
        }
        return arr;
    }
    var arr =  [5,44,333,22,1];
    document.write(fun(arr));

七、函数的两种声明方式

 // 函数的2种声明方式
    // 1、利用函数关键字  自定义函数（命名函数）
    function getSum() {

    }
    getSum();

    // 2、函数表达式  （匿名函数）
    // var 变量名 = function () {}

    var fun = function (aru) {
        // console.log('我是函数表达式');
        console.log(aru);
    }
    fun('我是可以传参的');

    // 1） fun 是变量名，不是函数名
    // 2）函数表达式声明名方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式存的是函数
    // 3）函数表达式也可以进行传递参数
    // 4）函数表达式也需要调用才能执行，不要忘记加括号哦！！！

小弟是个新手，有不对的欢迎指正，谢谢啦！