JavaScript函數(shù)的使用詳解

更新時(shí)間：2021年12月05日 16:18:41 作者：FG.

這篇文章主要為大家介紹了JavaScript函數(shù)的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

1. 聲明函數(shù)
2. 調(diào)用函數(shù)
3. 函數(shù)的參數(shù)
4. 函數(shù)的返回值
5. arguments的使用
6. 函數(shù)可以調(diào)用另外一個(gè)函數(shù)
7. 函數(shù)的兩種聲明方式
總結(jié)
1. 聲明函數(shù)
2. 調(diào)用函數(shù)
3. 函數(shù)的參數(shù)
4. 函數(shù)的返回值
5. arguments的使用
6. 函數(shù)可以調(diào)用另外一個(gè)函數(shù)
7. 函數(shù)的兩種聲明方式
總結(jié)

1. 聲明函數(shù)

//聲明函數(shù)
function 函數(shù)名() {
    //函數(shù)體代碼
}

function是聲明函數(shù)的關(guān)鍵字，必須小寫由于函數(shù)一般是為了實(shí)現(xiàn)某個(gè)功能才定義的，所以通常我們將函數(shù)名命名為動(dòng)詞，比如getSum

2. 調(diào)用函數(shù)

//調(diào)用函數(shù)
函數(shù)名(); //通過調(diào)用函數(shù)名來執(zhí)行函數(shù)體代碼

聲明函數(shù)本身并不會(huì)執(zhí)行的代碼，只有調(diào)用函數(shù)時(shí)才會(huì)執(zhí)行函數(shù)體代碼。

3. 函數(shù)的參數(shù)

在聲明函數(shù)時(shí)，可以在函數(shù)名稱后面的小括號(hào)中添加一些參數(shù)，這些參數(shù)被稱為形參，而在調(diào)用該函數(shù)時(shí)，同樣也需要傳遞相應(yīng)的參數(shù)，這些參數(shù)被稱為實(shí)參。

參數(shù)	說明
形參	形式上的參數(shù) 函數(shù)定義的時(shí)候傳遞的參數(shù) 當(dāng)前并不知道是什么
實(shí)參	實(shí)際上的參數(shù) 函數(shù)調(diào)用的時(shí)候傳遞的參數(shù) 實(shí)參是傳遞給形參的

參數(shù)的作用：在函數(shù)的內(nèi)部某些值不能固定，我們可以通過參數(shù)在調(diào)用函數(shù)時(shí)傳遞不同的值進(jìn)去。

函數(shù)形參和實(shí)參個(gè)數(shù)不匹配問題

參數(shù)個(gè)數(shù)	說明
實(shí)參個(gè)數(shù)等于形參個(gè)數(shù)	輸出正確結(jié)果
實(shí)參個(gè)數(shù)多于形參個(gè)數(shù)	只取到形參的個(gè)數(shù)
實(shí)參個(gè)數(shù)少于形參個(gè)數(shù)	多的形參定義為undefined，結(jié)果為NaN

function sum(num1,num2) {
    console.log(num1+num2);
}
sum(100,200);   //實(shí)參個(gè)數(shù)等于形參個(gè)數(shù) 輸出正確結(jié)果 
sum(100,400,500,700); //實(shí)參個(gè)數(shù)多于形參個(gè)數(shù) 只取到形參的個(gè)數(shù)
sum(200);  //實(shí)參個(gè)數(shù)少于形參個(gè)數(shù) 多的形參定義為undefined，結(jié)果為NaN

在JavaScript中，形參的默認(rèn)值是undefined 。

4. 函數(shù)的返回值

經(jīng)常用return返回函數(shù)值

return終止函數(shù)

function add(num1,num2) {
    //函數(shù)體
    return num1+num2; //注意：return后的代碼不執(zhí)行
    alert('前面有return，我不會(huì)被執(zhí)行');
}
var resNum = add(21,6); //調(diào)用函數(shù)，傳入兩個(gè)實(shí)參，并通過resNum接收函數(shù)返回值
alert(resNum);  //27

如果函數(shù)有return，則返回return后面的值；如果沒有return，則返回 undefined 。

break，continue，return的區(qū)別

break：結(jié)束當(dāng)前的循環(huán)體(如for、while)
continue：跳出本次循環(huán)，繼續(xù)執(zhí)行下次循環(huán)(如for、while)
return：不僅可以退出循環(huán)，還能夠返回return語句中的值，同時(shí)還可以結(jié)束當(dāng)前的函數(shù)體內(nèi)的代碼。

5. arguments的使用

當(dāng)我們不確定有多少個(gè)參數(shù)傳遞的時(shí)候，可以用arguments來獲取，在JavaScript中，arguments實(shí)際上它是當(dāng)前函數(shù)的一個(gè)內(nèi)置對(duì)象。所有函數(shù)都內(nèi)置了一個(gè)arguments對(duì)象，arguments對(duì)象中存儲(chǔ)了傳遞的所有實(shí)參。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fn() {
            console.log(arguments); //里面存儲(chǔ)了所有傳遞過來的實(shí)參
            console.log(arguments.length);
            console.log(arguments[2]);
            //可以按照數(shù)組的方式遍歷arguments
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        fn(1, 2, 3);
        fn(1, 2, 3, 4, 5);
        //偽數(shù)組  并不是真正意義上的數(shù)組
        //1. 具有數(shù)組的length 屬性
        //2. 按照索引的方式進(jìn)行存儲(chǔ)的
        //3. 它沒有真正數(shù)組的一些方法 如pop() push()等等
    </script>
</head>
<body>
</body>
</html>

在這里插入圖片描述

6. 函數(shù)可以調(diào)用另外一個(gè)函數(shù)

function fn1() {
   console.log(111);
   fn2();
   console.log('fn1');
}
function fn2() {
   console.log(222);
   console.log('fn2');
}
fn1();

7. 函數(shù)的兩種聲明方式

//1. 利用函數(shù)關(guān)鍵字自定義函數(shù)(命名函數(shù))
function fn() {
}
fn();
//2. 函數(shù)表達(dá)式(匿名函數(shù))
//var 變量名 = function() {};
var fun = function(aru) {
    console.log('我是函數(shù)表達(dá)式');
    console.log(aru);
}
fun('FG'）；
//(1) fun是變量名 不是函數(shù)名
//(2) 函數(shù)表達(dá)式聲明方式跟聲明變量差不多，只不過變量里面存的是值 而函數(shù)表達(dá)式里面存的是函數(shù)
//(3) 函數(shù)表達(dá)式也可以進(jìn)行傳遞參數(shù)

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!