函式

Js函式的定義：封裝了一段可重複執行呼叫的程式碼塊。

目的：可以讓大量程式碼重複使用

函式的體驗

函式之求和

函式名的命名是動詞，而變數名的命名是名詞

<script>
    function getSum(num1, num2) {
        var sum = 0;
        for (var i = num1; i <= num2; i++) {
            sum = sum + i;
        }
        return sum;

    }
    console.log(getSum(1, 100)); //求~100的和
    console.log(getSum(1, 1000)); //求1~1000的和
</script>

函式的使用

• 宣告函式
• 呼叫函式

宣告函式

  function 函式名() {
        //函式體
    }

呼叫函式

  函式名()

注意事項

• function是宣告函式的關鍵字，因此必須是小寫
• 函式是做某件事情，因此函式的命名為動詞
• 函式本身不執行，必須要呼叫才能執行
• 呼叫時千萬不要忘記加小括號

函式的簡單使用

<script>

    //宣告函式
    function sayHi() {
        return '堯子陌'
    }

    //呼叫函式
    console.log(sayHi())
</script>

函式的封裝

簡單而言，就是把一個功能及多個功能以函式的方式進行封裝，對外提供一個簡單的函式介面。

簡單理解：類似於快遞打包

函式的封裝之求1~10之間的累乘

    <script>
        function getSum(num1, num2) {
            var sum = 1;
            for (var i = num1; i <= num2; i++) {
                sum = sum *i;
            }
            return sum;

        }
        console.log(getSum(1, 10)); //求~10的相乘的結果

    </script>

函式的引數

• 函式的引數：形參與實參
• 宣告函式時，函式名後面的小括號裡面的引數被稱為形參，形參是形式上的引數，是為了接收實參傳遞過來的值。
• 呼叫函式時，函式名後面的小括號裡面的引數被稱為實參。
• 函式內部的值不確定，可以通過實參傳遞不同的值進去
• 函式的引數可有可無

函式案例

函式案例之任意兩個數的和

    <script>
        // 宣告函式
        function getSum(num1, num2) {
            return num1 + num2
        }
        //呼叫函式
        console.log(getSum(100, 200))
        console.log(getSum(10, 20))
    </script>

函式案例求任意兩個數之間的和

<script>
    //宣告函式
    function getSum(star, end) {
        var sum = 0;
        for (var i = star; i <= end; i++) {
            sum = sum + i;
        }
        return sum
    }
    //呼叫函式
    console.log(getSum(20, 50))
    console.log(getSum(1, 100))
</script>

函式的形參與實參之個數的匹配

函式的形參與實參之個數一致的情況下

函式的形參與實參個數一致的情況下，則正常輸入結果

<script>
    //宣告函式
    function getSum(num1, num2) {
        return num1 + num2
    }

    //呼叫函式
    console.log(getSum(10, 20))
</script>

函式的實參的個數大於形參的情況下

函式形參的個數小於實參的個數，則取形參的個數為準

<script>

    //宣告函式
    function getSum(num1, num2) {
        return num1 + num2
    }

    //呼叫函式
    console.log(getSum(1, 200, 500))
</script>

函式的形參大於實參的情況下

函式形參的個數大於實參的個數，則結果為NaN

注意事項

• 函式的形參可以看做未賦值的變數，值為undefined;
• undefined加任何數值，最終結果都為NaN(非數值)

<script>
    //宣告函式
    function getSum(num1, num2, num3) {
        return num1 + num2 + num3
    }

    //呼叫函式
    console.log(getSum(100, 200)) //形參的個數大於實參的個數的情況下 
    console.log(getSum(100, 200, 500)) //形參的個數與實參的個數一致的情況下
</script>

函式引數的總結

• 函式可以帶引數，也可以不帶引數
• 函式有多個引數時，中間以英文狀態下的逗號相隔
• 宣告函式時，函式後面的小括號裡面的引數為形參，其預設值為undefined
• 呼叫函式時，函式後面的小括號裡面的引數為實參
• 引數的形參與實參應當一致，否則結果難以預計。

函式的返回值

函式是為了實現某件事情或某種功能，最終都會將返回值返回給函式的呼叫者。

在函式的執行過程，遇到return便會把後面的結果返回給函式呼叫者。

<script>
    //宣告函式
    function getResult() {
        return 520
    }
    //呼叫函式
    console.log(getResult())
</script>

函式的返回值求兩個數之間的最大值

第一種:利用if語句

<script>
    function comParison(num1, num2) {
        if (num1 > num2) {
            return num1
        } else {
            return num2
        }
    }
    console.log(comParison(20, 50))
</script>

第二種:利用三元表示式

<script>
    function comParison(num1, num2) {
        return num1 > num2 ? num1 : num2
    }
    console.log(comParison(20, 50))
</script>

函式的返回值求最大值

在實際開發中，通常用變數來接收函式的返回值

<script>
    function getMax(arr) {
        var max = arr[0]
        for (var i = 0; i < arr.length; i++) {
            if (max <= arr[i]) {
                max = arr[i]
            }

        }
        return max;
    }

    var result = getMax([5, 10, 52, 38, 98,69]);
    console.log(result);
</script>