斑碼教育web前端課堂筆記-第27天-js基礎06

js第六天 函數

一、複習

流程控制

• 分支結構
• 循環結構

分支結構：

• if
• if else
• if else if … else
• switch

循環結構：

• for
• while
• do while

關鍵詞：

• break
• continue

循環的嵌套

二、函數

函數： 一個功能的集合體，一段功能代碼

2.1 函數的聲明

格式:

function 函數名() {
	函數體
}
           

函數的調用：

• 函數不調用不執行
• 函數調用的方式:

  函數名()

執行代碼：

<script>
    // 聲明函數
    function createTable() {
        // 建立表格
        document.write('<table  align="center">');
        // 循環生成行
        for (var row = 0; row < 5; row++) {
            // 生成行
            document.write('<tr>');
            // 循環生成列
            for (var col = 0; col < 5; col++) {
                // 生成列
                document.write('<td>斑碼教育</td>');
            }
            document.write('</tr>');
        }

        // 表格的結束
        document.write('</table>');
    }

    // 調用函數
    createTable();
    createTable();
    createTable();
    createTable();

</script>
           

結果：

2.2 函數的參數

參數分類：

按照位置的不同：

• 形參：聲明函數時寫的參數
• 實參：調用函數時傳入的參數

實參和形參是一一對應的

形參的分類：按照是否有預設值：

• 可選參數:有預設值，當你不傳入對應的實參，使用預設值
• 必選參數：沒有預設值

必選參數寫在前面，可選參數寫在後面

執行代碼：

<script>
    // 聲明函數
    function createTable(rowNum, colNum) {
        // 建立表格
        document.write('<table  align="center">');
        // 循環生成行
        for (var row = 0; row < rowNum; row++) {
            // 生成行
            document.write('<tr>');
            // 循環生成列
            for (var col = 0; col < colNum; col++) {
                // 生成列
                document.write('<td>第' + (row + 1) + '行：斑碼教育:第' + (col + 1) + '列</td>');
            }
            document.write('</tr>');
        }

        // 表格的結束
        document.write('</table>');
    }

    // 調用函數
    // 生成一個8行9列
    createTable(8, 9);
    // 生成一個6行3列
    createTable(6, 3);
</script>
           

結果：

執行代碼：

<script>
    // 聲明函數
    function createTable(rowNum, colNum, content = '斑馬教育') {
        // 建立表格
        document.write('<table  align="center">');
        // 循環生成行
        for (var row = 0; row < rowNum; row++) {
            // 生成行
            document.write('<tr>');
            // 循環生成列
            for (var col = 0; col < colNum; col++) {
                // 生成列
                document.write('<td>' + content + '</td>');
            }
            document.write('</tr>');
        }

        // 表格的結束
        document.write('</table>');
    }

    // 調用函數
    // 生成一個8行9列
    createTable(8, 9, 'i love you');
    // 生成一個6行3列
    createTable(6, 3);
    

</script>
           

結果：

2.3 書寫函數的步驟

1. 完成功能代碼
2. 将經常改變的量設定為變量提取為形參
3. 調用的時候傳入對應的實參，實參和形參是一一對應的

2.4 函數的提升

函數的提升：包括聲明和定義。

變量的提升： 包括變量的聲明。

函數名不能和變量名重名

執行代碼：

<script>
// 上面進行函數的調用
demo();
// 函數聲明之前檢視demo
console.log(demo);
// 函數的聲明
function demo () {
    console.log('this is demo function');
}   

demo();
// 函數聲明之後檢視demo
console.log(demo);
// 變量
console.log(a); // undefined
var a = 1;
console.log(a); // 1
</script>
           

結果：

2.5 函數的提升優于變量的提升

執行代碼：

<script>
    // 在定義之前檢視demo
    console.log(demo); //  function undefined
    // 定義了demo
    var demo = 1;
    function demo() {
        console.log('demo');
    }
    // 在定義之後檢視demo
    console.log(demo); // 1


    //  在定義之前檢視demo
    console.log(demo1); // function
    // 定義了demo
    function demo1() {
        console.log('demo1');
    }
    var demo1;
    // 在定義之後檢視demo
    console.log(demo1);  // function

    /* 
        多次聲明隻有第一次聲明有用

        // 函數
        function demo() {
            console.log('demo');
        }
        // 變量
        var demo; // 尋找demo， 有 目前的聲明無意義
        console.log(demo); //  function
        // 給demo指派
        demo = 1;
        // 在定義之後檢視demo
        console.log(demo); // 1 
    
    
    */
</script>
           

2.6 函數名不能和變量重名

重名發生下面的錯誤：

• 函數名與變量重名
• 函數名寫錯了

執行代碼：

<script>
    var demo = 1;
    function demo() {
        console.log(111);
    }
    console.log(demo); // 1
    demo(); // 執行錯誤
    // va b = 1; // 文法錯誤
</script>
           

結果：

2.7 函數的練習

2.7.1 輸出n以内的質數

質數： 約數隻有1和他本身

執行代碼：

function demo(n) {
    for (var i = 2; i <= n; i++) {
        // console.log(i);
        // 聲明一個辨別
        var lock = true; // 讓每一個數預設都是一個質數
        for (var num = 2; num < i; num++) {
            if (i % num == 0) {
                // console.log(i + '不是一個質數' );
                // 目前不是一個質數的時候，将辨別lock改為false
                lock = false;
            }

            if (!lock) {
                // 目前數不為質數
                break;
            }
        }

        // 判斷lock狀态，當lock依舊為true，則表示目前數為質數
        if (lock) {
            console.log(i + '是一個質數');
        }
    }
}

/* 
    n 是不是一個質數？
    驗證過程： 
        n 跟 2 ~ n-1都取餘， 在取餘的過程中，如果出現了一個餘數為0，則不需要繼續計算（退出循環），可以判斷n不是一個質數。 
        當n 和 2 ~ n - 1 所有數取餘結果餘數都不為0，n是一個質數

*/

// 檢視30以内的質數
demo(30);
</script>
           

2.7.2 輸出n以内的和（累加）

執行代碼：

<script>
    function demo(n) {
        var sum = 0;
        for (var i = 1; i <= n; i++) {
            sum += i;
        }
        console.log(sum);
    }
    demo(100);
</script>
           

2.8 作用域

函數好比一堵牆，這堵牆将作用域劃分成不同的區域。變量是以按照可以作用的範圍分為全局變量和局部變量。

全局變量： 哪裡都能用（函數體外聲明的變量）

局部變量：指定的區域可以使用（函數體内聲明的變量）

作用域： 查找變量的規則、使用變量的權限

執行代碼：

<script>
    // 聲明全局變量
    var b = 2;
    function demo() {
        // 局部變量a
        var a = 1;
        console.log(a);
        // 檢視b
        console.log(b); // 2
    }

    // 調用函數
    demo();
    // 檢視b
    console.log(b);
    // 檢視a
    console.log(a);

</script>
           

2.9 變量的生命周期和垃圾回收機制

生命周期： 什麼時候生，什麼時候亡

全局變量：在程式運作時産生，關閉頁面變量消亡

局部變量：函數調用時産生，函數調用結束消亡（目前變量被全局引用的時候，不消亡-----閉包函數）

2.10 作用域和作用域鍊（變量的查找規則）

在這裡相當于存在一個作用域的分割（函數），函數外圍全局，函數内為局部。

當函數demo執行的時候， b = 1; 引擎會讓作用域查找b，作用域首先在目前的作用域（局部作用域—demo裡面的作用域查找b），作用域沒有找到b，

作用域會根據查找規則（作用域鍊）會去目前作用域的上級作用域查找對應的變量，如果上級沒有，則去上級的上級，直到找到全局為止。如果全局有，則使用。

如果全局沒有，則聲明對應的變量。然後進行指派操作。整個在查找變量的過程，是沿着作用域的層級進行查找（逐級向上）這個逐級向上的操作，稱之為作用域鍊。

2.11 變量的遮蔽效應

内層作用域的變量和外層作用域的變量重名，在内層使用變量的時候，會使用内層的變量忽略外層的變量，這種效果稱之為變量的遮蔽效應。

執行代碼：

<script>
    var a = 1;
    var b = 1;
    function demo() {
        var a = 3;
        console.log(a + b); // 3 + 1 = 4
    }

    demo();
</script>