JavaScript 09 - 函數


14 - 什麼是函數

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>14 - 什麼是函數</title>
    <!-- 
        1. 函數的概念
        ============JS 裏面,可能會定義非常多的相同代碼或者功能相似的代碼,這些代碼可能需要大量重複使用。
        雖然 for循環語句也能實現一些簡單的重複操作,但是比較具有侷限性,此時我們就可以使用 JS 中的函數。
        函數: 就是封裝了一段 可被重複調用執行的代碼塊。 通過此代碼塊可以實現大量代碼的重複使用。
     -->
    <script>
        // 1. 求 1~100的累加和
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        console.log(sum); // 5050

        // 2. 求 10~50的累加和
        var sum = 0;
        for (var i = 10; i <= 50; i++) {
            sum += i;
        }
        console.log(sum); // 1230

        // 3. 函數就是封裝了一段可以被重複執行調用的代碼塊 目的: 就是讓大量代碼重複使用
        function getSum(num1, num2) {
            var sum = 0;
            for (var i = num1; i <= num2; i++) {
                sum += i;
            }
            console.log(sum); 
        }
        getSum(1, 100); // 5050
        getSum(10, 50); // 1230
        getSum(1, 1000); // 500500
    </script>
</head>
<body>

</body>
</html>

在這裏插入圖片描述


15 - 函數的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15 - 函數的使用</title>
    <!-- 
        2. 函數的使用
        ============
        函數在使用時分爲兩步:聲明函數和調用函數。

        2.1 聲明函數
        -----------

        ```JavaScript
        // 聲明函數
        function 函數名() {
            //函數體代碼
        }
        ```

        - function 是聲明函數的關鍵字, 必須小寫
        - 由於函數一般是爲了實現某個功能才定義的, 所以通常我們將函數名命名爲動詞,比如 getSum

        2.2 調用函數
        -----------
        
        ```JavaScript
        // 調用函數
        函數名(); // 通過調用函數名來執行函數體代碼
        ```

        - 調用的時候千萬 不要忘記添加小括號
        - 口訣:函數不調用,自己不執行。
        注意:聲明函數本身並不會執行代碼,只有調用函數時纔會執行函數體代碼。

        知識總結
        -------
        - 函數的聲明:
            function  函數名(參數1,參數2) {
                封裝的代碼塊  
            }
        - 函數的調用: 函數名( )

     -->
    <script>
        // 函數使用分爲兩步: 聲明函數 和 調用函數
        // 1. 聲明函數
        // function 函數名() {
        //     // 函數體
        // }
        function sayHi() {
            console.log('hi~~');

        }
        // (1) function 聲明函數的關鍵字 全部小寫
        // (2) 函數是做某件事情,函數名一般是動詞 sayHi 
        // (3) 函數不調用自己不執行
        // 2. 調用函數
        // 函數名();
        sayHi(); // hi~~
        // 調用函數的時候千萬不要忘記加小括號
    </script>
</head>
<body>

</body>
</html>

16 - 利用函數封裝求1~100的和

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>16 - 利用函數封裝求1~100的和</title>
    <!-- 
        2.3 函數的封裝
        -------------

        - 函數的封裝是把一個或者多個功能通過函數的方式封裝起來,對外只提供一個簡單的函數接口
        - 簡單理解:封裝類似於將電腦配件整合組裝到機箱中 ( 類似快遞打包)

        案例:利用函數計算1-100之間的累加和
        --------------------------------

        2.4 提問
        --------
        1. 函數是做什麼的(作用)?
        2. 聲明函數用什麼關鍵詞? 
        3. 如何調用函數? 
        4. 封裝是什麼意思?
     -->
    <script>
        // 1. 聲明函數
        function getSum() {
            var sum = 0; // // 準備一個變量,保存數字和
            for (var i = 1; i <= 100; i++) {
                sum += i; // // 把每個數值 都累加 到變量中
            }
            console.log(sum); 

        }
        // 2. 調用函數
        getSum(); // 5050
        getSum(); // 5050
    </script>
</head>
<body>

</body>
</html>

17 - 帶參數的函數

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>17 - 帶參數的函數</title>
    <!-- 
        3. 函數的參數
        ============

        3.1 形參和實參
        -------------
        在 聲明函數時 ,可以在函數名稱後面的小括號中添加一些參數,這些參數被稱爲 形參 ,
        而在 調用該函數時 ,同樣也需要傳遞相應的參數,這些參數被稱爲 實參 。

        參數                          說明
        形參      形式上的參數 函數定義的時候 傳遞的參數 當前並不知道是什麼
        實參      實際上的參數 函數調用的時候傳遞的參數 實參是傳遞給形參的

        參數的作用 : 在 函數內部 某些值不能固定,我們可以通過參數在 調用函數時傳遞 不同的值進去。

        在 聲明函數時 ,可以在函數名稱後面的小括號中添加一些參數,這些參數被稱爲 形參 ,
        而在 調用該函數時 ,同樣也需要傳遞相應的參數,這些參數被稱爲 實參 。
        
        ```JavaScript
        // 帶參數的函數聲明
        function 函數名(形參1, 形參2 , 形參3...) { // 可以定義任意多的參數,用逗號分隔
            // 函數體
        }
        // 帶參數的函數調用
        函數名(實參1, 實參2, 實參3...);
        ```

        知識總結
        -------
        - 參數的作用:
            - 在函數封裝的代碼塊中,使用參數可以在調用函數時修改指定數據,來完成不同的操作
        - 形參:
            - 在函數定義時,設置用來接收函數調用時傳過來的數據
        - 實參:
            - 在函數調用時,用戶在小括號中傳入的數據,可被形參接收,運用到函數內部的調用中
     -->
    <script>
        // 1. 函數可以重複相同的代碼
        // function cook() {
        //     console.log('酸辣土豆絲');
        // }
        // cook(); // 酸辣土豆絲
        // cook(); // 酸辣土豆絲

        // 2. 我們可以利用函數的參數實現函數重複不同的代碼
        // function 函數名(形參1,形參2...) { // 在聲明函數的小括號裏面是 形參 (形式上的參數)
        // 
        // }
        // 函數名(實參1,實參2...); // 在函數調用的小括號裏面是實參(實際的參數)

        // 3. 形參和實參的執行過程
        function cook(aru) { // 形參是接受實參的  aru = '酸辣土豆絲' 形參類似於一個變量
            console.log(aru);
        }
        cook('酸辣土豆絲'); // 酸辣土豆絲
        cook('大肘子'); // 大肘子
        // 4. 函數的參數可以有,也可以沒有個數不限
    </script>
</head>
<body>

</body>
</html>

18 - 利用函數求任意兩個數的和

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>18 - 利用函數求任意兩個數的和</title>
    <!-- 
        案例:利用函數求任意兩個數的和
        ----------------------------

        3.2 函數參數的傳遞過程
        ---------------------

        ```JavaScript
        // 聲明函數
        function getSum(num1, num2) {
            console.log(num1 + num2);
        }
        // 調用函數
        getSum(1, 3); // 4
        getSum(6, 5); // 11
        ```

        1. 調用的時候實參值是傳遞給形參的
        2. 形參簡單理解爲: 不用聲明的變量
        3. 實參和形參的多個參數之間用逗號(,)分隔
     -->
    <script>
        // 1. 利用函數求任意兩個數的和
        function getSum(num1, num2) {
            console.log(num1 + num2);

        }
        getSum(1, 3); // 4
        getSum(3, 8); // 11
        
        // 2. 利用函數求任意兩個數之間的和
        function getSums(start, end) {
            var sum = 0;
            for (var i = start; i <= end; i++) {
                sum += i;
            }
            console.log(sum);

        }
        getSums(1, 100); // 5050
        getSums(1, 10); // 55
        
        // 3. 注意點
        // (1) 多個參數之間用逗號隔開
        // (2) 形參可以看做是不用聲明的變量
    </script>
</head>
<body>

</body>
</html>

在這裏插入圖片描述


19 - 函數形參實參個數匹配

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>19 - 函數形參實參個數匹配</title>
    <!-- 
        3.3 函數形參和實參個數不匹配問題
        ------------------------------
            參數個數                說明
        實參個數等於形參個數      輸出正確結果
        實參個數多於形參個數      只取到形參的個數
        實參個數小於形參個數      多的形參定義爲undefined,結果爲NaN

        ```JavaScript
        function sum(num1, num2) {
         console.log(num1 + num2);
        }
        sum(100, 200); // 形參和實參個數相等,輸出正確結果
        sum(100, 400, 500, 700); // 實參個數多於形參,只取到形參的個數
        sum(200); // 實參個數少於形參,多的形參定義爲undefined,結果爲NaN
        ```

        注意:在JavaScript中,形參的默認值是undefined。

        3.4 小結
        --------
        - 函數可以帶參數也可以不帶參數
        - 聲明函數的時候,函數名括號裏面的是形參,形參的默認值爲 undefined
        - 調用函數的時候,函數名括號裏面的是實參
        - 多個參數中間用逗號分隔
        - 形參的個數可以和實參個數不匹配,但是結果不可預計,我們儘量要匹配

		知識總結
        --------
        - 如果實參的個數多餘形參,形參如何接收實參?
            - 如果實參的個數多餘形參,形參將按照順序依次接收實參,剩餘的實參不被接收值
        - 如果實參的個數少於形參,形參如何接收實參
            - 如果實參的個數少於形參,形參將按照順序依次接收實參,多餘的形參接收不到實參,默認值爲undefined
     -->
    <script>
        // 函數形參實參個數匹配
        function getSum(num1, num2) {
            console.log(num1 + num2);

        }
        // 1. 如果實參的個數和形參的個數一致 則正常輸出結果
        getSum(1, 2); // 3

        // 2. 如果實參的個數多於形參的個數  會取到形參的個數 
        getSum(1, 2, 3); // 3

        // 3. 如果實參的個數小於形參的個數  多於的形參定義爲undefined  最終的結果就是 NaN
        // 形參可以看做是不用聲明的變量  num2 是一個變量但是沒有接受值  結果就是undefined 
        getSum(1); // NaN
        // 建議 我們儘量讓實參的個數和形參相匹配
    </script>
</head>
<body>

</body>
</html>

在這裏插入圖片描述


20 - 函數的返回值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>20 - 函數的返回值</title>
    <!-- 
        4. 函數的返回值
        ==============

        4.1 return語句
        --------------

        有的時候,我們會希望函數將值返回給調用者,此時通過使用 return 語句就可以實現。
        return 語句的語法格式如下:

        ```JavaScript
        // 聲明函數
        function 函數名(){
            ...
            return 需要返回的值;
        }
        // 調用函數
        函數名(); // 此時調用函數就可以得到函數體內return 後面的值
        ```

        - 在使用 return 語句時,函數會停止執行,並返回指定的值 
        - 如果函數 沒有return ,返回的值是 undefined

        有的時候,我們會希望函數將值返回給調用者,此時通過使用 return 語句就可以實現。
        例如,聲明瞭一個sum()函數,該函數的返回值爲666,其代碼如下:

        ```JavaScript
        // 聲明函數
        function sum(){
            ...
            return 666; 
        }
        // 調用函數
        sum(); // 此時 sum 的值就等於666,因爲 return 語句會把自身後面的值返回給調用者
        ```
     -->
    <script>
        // 1.函數是做某件事或者實現某種功能
        // function cook(aru) {
        //     console.log(aru);
        // }
        // cook('大肘子');

        // 2. 函數的返回值格式
        // function 函數名() {
        //     return 需要返回的結果;
        // }
        // 函數名();
        // (1) 我們函數只是實現某種功能,最終的結果需要返回給函數的調用者函數名() 通過return 實現的
        // (2) 只要函數遇到return 就把後面的結果 返回給函數的調用者  函數名() = return後面的結果

        // 3. 代碼驗證
        function getResult() {
            return 666;
        }
        getResult(); // getResult() = 666
        console.log(getResult()); // 666

        function cook(aru) {
            return aru;
        }
        console.log(cook('大肘子')); // 大肘子

        // 4. 求任意兩個數的和
        function getSum(num1, num2) {
            return num1 + num2;
        }
        console.log(getSum(1, 2)); // 3
    </script>
</head>
<body>

</body>
</html>

在這裏插入圖片描述


21 - 求兩個數的最大值(函數版)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>21 - 求兩個數的最大值(函數版)</title>
    <!-- 
        案例1:利用函數求任意兩個數的最大值
        ---------------------------------
     -->
    <script>
        // 利用函數 求兩個數的最大值
        function getMax(num1, num2) {
            // if (num1 > num2) {
            //     return num1;
            // } else {
            //     return num2;
            // }
            return num1 > num2 ? num1 : num2;
        }
        console.log(getMax(1, 3)); // 3
        console.log(getMax(11, 3)); // 11
    </script>
</head>
<body>

</body>
</html>

22 - 求數組中的最大值(函數版)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>22 - 求數組中的最大值(函數版)</title>
    <!-- 
        案例2:利用函數求任意一個數組中的最大值
        ------------------------------------
        求數組[5,2,99,101,67,77] 中的最大數值。
     -->
    <script>
        // 定義一個獲取數組中最大數的函數
        function getArrMax(arr) { // arr 接受一個數組  arr =  [5,2,99,101,67,77]
            var max = arr[0];
            for (var i = 1; i <= arr.length; i++) {
                if (arr[i] > max) {
                    max = arr[i];
                }
            }
            return max;
        }
        // getArrMax([5, 2, 99, 101, 67, 77]); // 實參是一個數組送過去
        // 在我們實際開發裏面,我們經常用一個變量來接受 函數的返回結果 使用更簡單
        var re1 = getArrMax([5, 2, 99, 101, 67, 77]);
        var re2 = getArrMax([3, 77, 44, 99, 143]);
        console.log('最大值爲 ' + re1); // 最大值爲 101
        console.log('最大值爲 ' + re2); // 最大值爲 143
    </script>
</head>
<body>

</body>
</html>

23 - 函數返回值注意事項

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>23 - 函數返回值注意事項</title>
    <!-- 
        4.2 return 終止函數
        ------------------

        return 語句之後的代碼不被執行。
        
        ```JavaScript
        function add(num1,num2){
            //函數體
            return num1 + num2; // 注意:return 後的代碼不執行
            alert('我不會被執行,因爲前面有 return');
        }
        var resNum = add(21,6); // 調用函數,傳入兩個實參,並通過 resNum 接收函數返回值
        alert(resNum); // 27
        ```

        4.3 return的返回值
        ------------------
        return只能返回一個值。 如果用逗號隔開多個值,以最後一個爲準。

        ```JavaScript
        function add(num1,num2){
            //函數體
            return num1,num2;
        }
        var resNum = add(21,6); // 調用函數,傳入兩個實參,並通過 resNum 接收函數返回值
        alert(resNum); // 6
        ```

        案例:創建一個函數,實現兩個數之間的加減乘除運算,並將結果返回
        ---------------------------------------------------------
        ```JavaScript
        var a = parseFloat(prompt('請輸入第一個數'));
        var b = parseFloat(prompt('請輸入第二個數'));
        function count(a, b) {
            var arr = [a + b, a - b, a * b, a / b];
            return arr;
        }
        var result = count(a, b);
        console.log(result);
        ```

        4.4 函數沒有return返回undefined
        ------------------------------
        函數都是有返回值的
        1. 如果有return 則返回 return 後面的值
        2. 如果沒有return 則返回 undefined

        4.5 break,continue,return的區別
        -------------------------------
        break :結束當前的循環體(如 forwhilecontinue :跳出本次循環,繼續執行下次循環(如 forwhilereturn :不僅可以退出循環,還能夠返回 return 語句中的值,同時還可以結束當前的函數體內的代碼

		知識總結
        -------
        函數中如果執行了return語句,即結束當前函數,不再繼續向下執行代碼
        函數中只能有一個返回值,即使寫了多個return,也只能執行第一個return語句
        函數中只能返回一個具體的數據,如果返回了多個數據,則只會返回最後一個數據
        函數中通過return關鍵詞指定函數返回值
        函數中如果沒有指定返回值,則函數默認返回值爲undefined
     -->
    <script>
        // 函數返回值注意事項
        // 1. return 終止函數
        function getSum(num1, num2) {
            return num1 + num2; // return 後面的代碼不會被執行
            // alert('我是不會被執行的哦!');
        }
        console.log(getSum(1, 2)); // 3

        // 2. return 只能返回一個值
        function fn(num1, num2) {
            return num1, num2; // 返回的結果是最後一個值
        }
        console.log(fn(1, 2)); // 2

        // 3.  我們求任意兩個數的 加減乘數結果
        function getResult(num1, num2) {
            return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
        }
        var re = getResult(1, 2); // 返回的是一個數組
        console.log(re); // Array(4) [ 3, -1, 2, 0.5 ]

        // 4. 我們的函數如果有return 則返回的是 return 後面的值,如果函數麼有 return 則返回undefined
        function fun1() {
            return 666;
        }
        console.log(fun1()); // 返回 666
        function fun2() {

        }
        console.log(fun2()); // 函數返回的結果是 undefined
    </script>
</head>
<body>

</body>
</html>

在這裏插入圖片描述


作業

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>作業</title>
	<!-- 
		1. 寫一個函數,用戶輸入任意兩個數字的任意算術運算(簡單的計算器小功能),並能彈出運算後的結果。
		2. 寫一個函數,用戶輸入任意兩個數字的最大值,並能出彈運算後的結果。
		3. 寫一個函數,用戶輸入任意三個不同數字的最大值,並能彈出運算後的結果。 
		4. 寫一個函數,用戶輸入一個數判斷是否是素數,並返彈出回值(又叫質數,只能被1和自身整數的數)
	-->
	 <script>
     	// 寫一個函數,用戶輸入任意兩個數字的任意算術運算,並彈出運算後的結果
	    function getResult(){
	        var sum;
            var num1 = prompt('請輸入第一個數:');
            var num2 = prompt('請輸入第二個數:');
            var operator = prompt('請輸入你想要的運算符:')
            switch (operator) {
                case '+':
                    sum = parseInt(num1) + parseInt(num2); // 接受的是字符型
                    break;
                case '-':
                    sum = num1 - num2;
                    break;
                case '*':
                    sum = num1 * num2;
                    break;
                case '/':
                    sum = num1 / num2;
                    break;
                default:
                	return alert('符號錯誤');
                    break;
            }
            document.write('計算結果是:' + num1 + operator + num2 + '=' + sum + '<br>');
	    }
	    getResult(); // 不要忘了調用函數

	    // 2. 寫一個函數,用戶輸入任意兩個數字的最大值,並能出彈運算後的結果。
	    function getTwoMax() {
            var num1 = parseInt(prompt('請輸入第一個數:'));
            var num2 = parseInt(prompt('請輸入第二個數:'));
            var max = num1 > num2 ? num1 : num2; // max一定要放num後面定義,不然就是undefined
            document.write('最大值:' + max + '<br>'); // 前面不要return,不然後面的句子輸出不了
        }
        getTwoMax();

        // 3. 寫一個函數,用戶輸入任意三個不同數字的最大值,並能彈出運算後的結果。 
        function getThreeMax() {
            var a = parseInt(prompt('請輸入第一個數:'));
            var b = parseInt(prompt('請輸入第二個數:'));
            var c = parseInt(prompt('請輸入第三個數:'));
            var arr = [a, b, c];
            var max = arr[0];
            for (var i = 1; i < arr.length; i++) {
                if (arr[i] > max) {
                    max = arr[i];
                }
            }
            document.write('最大值是:' + max + '<br>');
        }
        getThreeMax();

        // 4. 寫一個函數,用戶輸入一個數判斷是否是素數,並返彈出回值(又叫質數,只能被1和自身整數的數)
        function getPrime() {
            var num = Number(prompt('請輸入一個正整數,判斷此數是不是素數')); // 要判斷的數
		    var flag = true; // 假設變量  值爲true 是素數 
		    for( var i = 2 ; i < num ; i++ ){
		        if( num % i == 0 ){ // 滿足這個條件  說明有因子了  不是素數
		            flag = false; // 不是素數
		            break;
		        }
		    }
		    // 如果假設成立  
		    if( flag && (num != 1 & num != 0) ){ // 1和0不是素數
		        document.write( num + '是素數' + '<br>');
		    }else{
		        document.write( num + '不是素數' + '<br>' );
		    }
        }
        getPrime();
	 </script>
</head>
<body>

</body>
</html>

通過榨汁機看透函數

在這裏插入圖片描述


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章