javascript函式(5)

堯子陌發表於2020-12-25

函式

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>

在這裡插入圖片描述

相關文章