【融職培訓(xùn)】Web前端學(xué)習(xí) 第3章 JavaScript基礎(chǔ)教程6 函數(shù)基礎(chǔ)

一沐扳、函數(shù)的基本概念

函數(shù)是一個(gè)可執(zhí)行的語(yǔ)句塊症脂,定義的時(shí)候不執(zhí)行涝涤,調(diào)用的時(shí)候執(zhí)行媚狰,使用"函數(shù)名()"的形式可以調(diào)用函數(shù),

語(yǔ)法如下所示:

1functionfun(){//定義函數(shù),函數(shù)名為fun2//函數(shù)體3}4fun();//調(diào)用函數(shù)

我們先來編寫第一個(gè)最簡(jiǎn)單的函數(shù)妄痪,當(dāng)這個(gè)函數(shù)執(zhí)行的時(shí)候會(huì)在控制臺(tái)輸出"hello function"

示例代碼如下:

1function fun(){2console.log("hello function")3}4fun();

在上面的代碼中我們定義了一個(gè)函數(shù)哈雏,并調(diào)用了一次,這樣就會(huì)在控制臺(tái)輸出一次“hello function”衫生。我們?cè)诰幊痰倪^程中裳瘪,很多代碼是需要多次使用的,我們可以把它們寫在一個(gè)函數(shù)中罪针,這樣我們每次希望執(zhí)行這些代碼的時(shí)候彭羹,只需要調(diào)用這個(gè)函數(shù),而不是復(fù)制-粘貼多次代碼泪酱。

二派殷、參數(shù)

下面編寫一個(gè)函數(shù)sum,輸出10和20兩個(gè)數(shù)之和

示例代碼如下:

1function sum(){2varnum1 = 10;3varnum2 = 20;4varresult = num1 + num2;5? ? console.log(result);6}7sum();

在上面例子中我們調(diào)用sum函數(shù),可以成功在控制臺(tái)輸出計(jì)算結(jié)果墓阀,但是函數(shù)內(nèi)部的代碼是固定的毡惜,雖然可以多次使用,但是每次使用輸出的都是10和20的加和斯撮,為了讓函數(shù)更加靈活经伙,我們希望實(shí)現(xiàn)一個(gè)函數(shù)可以計(jì)算任意兩個(gè)數(shù)的加和,那么我們就需要了解函數(shù)是如何傳遞參數(shù)的勿锅。

下面一個(gè)簡(jiǎn)單的例子演示函數(shù)如何傳遞參數(shù)

示例代碼如下:

1function fun(str){2console.log("hello" + str);3}4fun("world");

在定義函數(shù)的括號(hào)中帕膜,我們添加了一個(gè)參數(shù)str,這個(gè)參數(shù)叫做形參枣氧。它在函數(shù)內(nèi)部像一個(gè)變量一樣。但是在函數(shù)調(diào)用之前他是沒有值的垮刹。當(dāng)調(diào)用函數(shù)的時(shí)候达吞,調(diào)用函數(shù)的括號(hào)中我們也添加了一個(gè)參數(shù)"world",這個(gè)參數(shù)叫做實(shí)參荒典,他可以是任意數(shù)據(jù)類型的值酪劫。函數(shù)被調(diào)用后,形參str被賦予了實(shí)參"world"的值种蝶,然后執(zhí)行console.log便會(huì)在控制臺(tái)輸出"helloworld"

上面的函數(shù)有一個(gè)形參和一個(gè)實(shí)參契耿,函數(shù)可以傳遞多個(gè)參數(shù),用逗號(hào)間隔

示例代碼如下:

1function sum(num1,num2){2console.log(num1 + num2);3}4sum(10,20);

當(dāng)我們調(diào)用函數(shù)的時(shí)候螃征,實(shí)參和形參是一一對(duì)應(yīng)的搪桂,10對(duì)應(yīng)的是num1,20對(duì)應(yīng)的是num2,函數(shù)執(zhí)行后會(huì)在控制臺(tái)輸出10和20的加和。

下面我們來編寫一個(gè)函數(shù)盯滚,它有一個(gè)正整數(shù)參數(shù)n踢械,當(dāng)我們調(diào)用函數(shù)時(shí),函數(shù)會(huì)輸出包括n在內(nèi)魄藕,1~n所有正整數(shù)的加和

示例代碼如下:

1function sum(n){2varsum = 0;3for(vari = 0;i<=n;i++){4sum += i;5? ? }6? ? console.log(sum);7}8sum(100);9sum(567);

我們通過一個(gè)函數(shù)規(guī)定了一種計(jì)算方式内列,我們使用函數(shù)的只要輸入一個(gè)值,函數(shù)就會(huì)計(jì)算出一個(gè)準(zhǔn)確的結(jié)果背率。

三话瞧、返回值

在上面的例子中,我們輸入了一個(gè)參數(shù)寝姿,函數(shù)就可以在控制臺(tái)輸出我們希望得到的結(jié)果交排,但是在實(shí)際開發(fā)中,很多情況我們要的不是在控制臺(tái)輸出得到的結(jié)果饵筑,而單純的只是為了獲取這個(gè)值埃篓,那么我們就需要用到函數(shù)的返回值。

在函數(shù)中根资,我們可以通過return關(guān)鍵字指定一個(gè)返回值架专,函數(shù)有了return,當(dāng)函數(shù)被調(diào)用的時(shí)候就可以把調(diào)用的結(jié)果賦值給另一個(gè)變量了

示例代碼如下:

1function fun1(){ 2 3} 4 5function fun2(){ 6return"hello fun"; 7} 8 9varstr1 = fun1();10varstr2 = fun2();1112console.log(str1);//輸出undefined13console.log(str2);//輸出"hello fun"

在上面的例子中玄帕,函數(shù)fun1沒有返回值部脚,所有將fun1調(diào)用的結(jié)果賦值給str1,str1的值為undefined,函數(shù)fun2有返回值裤纹,返回值是"hello fun"睛低,所以當(dāng)fun2被調(diào)用后,將函數(shù)運(yùn)行的結(jié)果賦值給str2,str2的值就是"hello fun"

下面我們來編寫一個(gè)函數(shù),讓函數(shù)來計(jì)算四則運(yùn)算的結(jié)果

1function count(num1,sign,num2){ 2varresult = 0; 3switch(sign){ 4case"+":result = num1 + num2;break; 5case"-":result = num1 - num2;break; 6case"*":result = num1 * num2;break; 7case"/":result = num1 / num2;break; 8default:console.log("請(qǐng)輸入真確的操作符") 9? ? }10return result;11}12console.log(count(10,"*",20));

四钱雷、函數(shù)表達(dá)式

1varfunctionName=function(arg){2//函數(shù)體3}

這種形式看起來好像是常規(guī)的變量賦值語(yǔ)句,即創(chuàng)建一個(gè)函數(shù)并將它賦值給變量functionName吹零。這種情況下創(chuàng)建的函數(shù)叫做匿名函數(shù)罩抗。因?yàn)閒unction關(guān)鍵字后面沒有標(biāo)識(shí)符。

函數(shù)表達(dá)式與其他表達(dá)式一樣灿椅,在使用之前必須先賦值套蒂;如下面代碼就會(huì)導(dǎo)致錯(cuò)誤;

1helloworld();//錯(cuò)誤茫蛹,還未賦值操刀,函數(shù)不存在23varhelloworld=function(){4console.log("hello world");5}

有了函數(shù)表達(dá)式,我們就可以給函數(shù)表達(dá)式賦值了婴洼;如下面代碼:

1varhelloworld;//聲明 2if(condition){//條件 3helloworld=function(){//賦值 4console.log("hello world");? 5? } 6} 7else{ 8helloworld=function(){//賦值 9console.log("你好骨坑,世界");10? ? }11}

五、函數(shù)聲明提升

1func()2function func () {3}

上例不會(huì)報(bào)錯(cuò)柬采,正是因?yàn)?‘函數(shù)聲明提升’欢唾,即將函數(shù)聲明提升(整體)到作用域頂部(注意是函數(shù)聲明,不包括函數(shù)表達(dá)式)粉捻,實(shí)際提升后結(jié)果同下:

1// 函數(shù)聲明提升2function func () {3}4func()

六礁遣、作用域

在 JavaScript 中, 對(duì)象和函數(shù)同樣也是變量。

在 JavaScript 中, 作用域?yàn)榭稍L問變量肩刃,對(duì)象祟霍,函數(shù)的集合。

JavaScript 函數(shù)作用域: 作用域在函數(shù)內(nèi)修改盈包。

局部作用域

變量在函數(shù)內(nèi)聲明沸呐,變量為局部作用域。

局部變量:只能在函數(shù)內(nèi)部訪問续语。

1// 此處不能調(diào)用 carName 變量2function myFunction() {3varcarName = "Volvo";4// 函數(shù)內(nèi)可調(diào)用 carName 變量5}

因?yàn)榫植孔兞恐蛔饔糜诤瘮?shù)內(nèi)垂谢,所以不同的函數(shù)可以使用相同名稱的變量。

局部變量在函數(shù)開始執(zhí)行時(shí)創(chuàng)建疮茄,函數(shù)執(zhí)行完后局部變量會(huì)自動(dòng)銷毀持钉。

全局變量

變量在函數(shù)外定義,即為全局變量魂拦。

全局變量有 全局作用域: 網(wǎng)頁(yè)中所有腳本和函數(shù)均可使用贝室。

1varcarName = " Volvo";23// 此處可調(diào)用 carName 變量4function myFunction() {5// 函數(shù)內(nèi)可調(diào)用 carName 變量6}

如果變量在函數(shù)內(nèi)沒有聲明(沒有使用 var 關(guān)鍵字),該變量為全局變量畸裳。

以下實(shí)例中 carName 在函數(shù)內(nèi)缰犁,但是為全局變量。

1// 此處可調(diào)用 carName 變量23function myFunction() {4carName = "Volvo";5// 此處可調(diào)用 carName 變量6}

七、課后練習(xí)

定義一個(gè)函數(shù)帅容,參數(shù)為x颇象,返回值為1至x(包括x)之間所有正整數(shù)的加和。

定義一個(gè)函數(shù) 參數(shù)為x, 返回值為1至x(包括x)之間所有奇數(shù)的加和并徘。

【融職教育】在工作中學(xué)習(xí)遣钳,在學(xué)習(xí)中工作

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市麦乞,隨后出現(xiàn)的幾起案子蕴茴,更是在濱河造成了極大的恐慌,老刑警劉巖姐直,帶你破解...
    沈念sama閱讀 212,816評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件倦淀,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡声畏,警方通過查閱死者的電腦和手機(jī)撞叽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來砰识,“玉大人能扒,你說我怎么就攤上這事”枥牵” “怎么了初斑?”我有些...
    開封第一講書人閱讀 158,300評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)膨处。 經(jīng)常有香客問我见秤,道長(zhǎng),這世上最難降的妖魔是什么真椿? 我笑而不...
    開封第一講書人閱讀 56,780評(píng)論 1 285
  • 正文 為了忘掉前任鹃答,我火速辦了婚禮,結(jié)果婚禮上突硝,老公的妹妹穿的比我還像新娘测摔。我一直安慰自己,他們只是感情好解恰,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,890評(píng)論 6 385
  • 文/花漫 我一把揭開白布锋八。 她就那樣靜靜地躺著,像睡著了一般护盈。 火紅的嫁衣襯著肌膚如雪挟纱。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,084評(píng)論 1 291
  • 那天腐宋,我揣著相機(jī)與錄音紊服,去河邊找鬼檀轨。 笑死,一個(gè)胖子當(dāng)著我的面吹牛欺嗤,可吹牛的內(nèi)容都是我干的参萄。 我是一名探鬼主播,決...
    沈念sama閱讀 39,151評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼煎饼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼拧揽!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起腺占,我...
    開封第一講書人閱讀 37,912評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎痒谴,沒想到半個(gè)月后衰伯,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,355評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡积蔚,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,666評(píng)論 2 327
  • 正文 我和宋清朗相戀三年意鲸,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片尽爆。...
    茶點(diǎn)故事閱讀 38,809評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡怎顾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出漱贱,到底是詐尸還是另有隱情槐雾,我是刑警寧澤,帶...
    沈念sama閱讀 34,504評(píng)論 4 334
  • 正文 年R本政府宣布幅狮,位于F島的核電站募强,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏崇摄。R本人自食惡果不足惜擎值,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,150評(píng)論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逐抑。 院中可真熱鬧鸠儿,春花似錦、人聲如沸厕氨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)腐巢。三九已至品追,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間冯丙,已是汗流浹背肉瓦。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評(píng)論 1 267
  • 我被黑心中介騙來泰國(guó)打工遭京, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人泞莉。 一個(gè)月前我還...
    沈念sama閱讀 46,628評(píng)論 2 362
  • 正文 我出身青樓哪雕,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親鲫趁。 傳聞我的和親對(duì)象是個(gè)殘疾皇子斯嚎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,724評(píng)論 2 351