項目4計算個人所得稅——JavaScript函數

個人所得稅匯算清繳開始了，老師們都忙著計算個人所得稅。為了便于老師們計算和查詢，王老師打算編寫計算個人所得稅的網頁程序，邀請李強參與進來。2019年1月1日起，新頒布的《中華人民共和國個人所得稅法》開始實行。個人所得稅起征點更改為60000元，應納稅所得額=個人收入－納稅起點－社會保險－專項附加扣除，而應納稅額=應納稅所得額×適用稅率－速算扣除數，速算扣除數是為了方便進行計算而事先計算好的數值，具體標準如表4-1所示。情境導入

情境導入表4-1個人所得稅稅率計算級數應納稅所得額稅率/%速算扣除數/元1不超過36000元的30236000元～144000元的部分1025203144000元～300000元的部分20169204300000元～420000元的部分25319205420000元～660000元的部分30529206660000元～960000元的部分35859207超過960000元的部分45181920

單擊頁面上的“計算個人所得稅”按鈕，如圖4-1所示，實現效果如圖4-2、圖4-3、圖4-4和圖4-5所示。情境導入■掌握函數的概念及特點■掌握常用的預定義函數的使用方法■掌握自定義函數的創建和調用方法■掌握函數的參數和函數的返回值在程序中的應用方法■掌握函數的嵌套方法和理解函數變量的作用域項目目標任務

認識函數知識儲備任務

使用預定義函數任務

使用自定義函數任務

運用函數進階相關知識

認識函數函數是指由一行或多行語句組成的，能夠實現某一特定功能的語句序列語句序列是一個整體，也叫函數體函數運行的結果有多種形式，例如，可以利用函數輸出文本，也可以輸出數值，還可以為主程序返回值函數的概念函數有兩大特點一是它的重用性，在程序設計中如果要多次實現某一功能，就可以將實現該功能的代碼定義為一個函數，在使用時可以直接調用該函數，不必重寫代碼，從而實現代碼的重用；二是可降低程序的復雜度，通過函數可以將較大的程序分解成幾個較小的程序段，也就是說可以把一個較復雜的大任務分解成幾個較容易解決的小任務，降低整個程序的復雜度。函數的特點輸出個人信息——函數的應用【任務一】在頁面上輸出個人信息（姓名、學號、專業等信息）任務描述任務分析先聲明變量來保存姓名、學號、專業等信息，并對變量賦值通過document.write()函數輸出變量的值輸出個人信息——函數的應用【任務一】<script>varname="李強";//聲明姓名document.write("我是"+name);//輸出姓名varstuNum="2022031403";//聲明學號document.write("，學號"+stuNum);//輸出學號varmajor="計算機應用";//聲明專業document.write("，專業是"+major);//輸出專業varhometown="河南商丘";//聲明家鄉document.write("，我來自"+hometown+"。");//家鄉</script>相關知識

使用預定義函數在JavaScript中，消息對話框函數本質上是由JavaScript的內置對象的方法實現的，它能夠將程序執行的結果在頁面上以對話框的形式直觀地顯示出來。消息對話框在JavaScript中應用很廣泛，經常用來在頁面上輸出結果、接收通過鍵盤輸入的數據、實現程序與用戶的交互等。

JavaScript程序中常用的消息對話框有警示對話框、確認對話框和提示對話框3種，下面分別講解這3種消息對話框對應函數的語法格式及其在程序中的應用。.1消息對話框函數使用alert()函數可以彈出警示對話框。alert()的功能是直接在頁面上以對話框的形式輸出字符串或者變量的值。語法格式如下：

alert()函數除了輸出字符串和變量外，警示對話框中還有一個“確定”按鈕，單擊這個“確定”按鈕會關閉警示對話框。1.警示對話框函數alert(顯示內容);新學期寄語——警示對話框【任務二】打開頁面顯示一個歡迎對話框，對話框的內容為“李強，寶劍鋒從磨礪出，梅花復自苦寒來，新的學期，加油！”任務描述任務分析本任務實踐主要目的是利用警示對話框在頁面上輸出內容，可以通過alert()來實現。為了符合編程的規范，在編程時要先聲明一個變量來保存姓名，對變量賦值后，通過alert()輸出變量的值。新學期寄語——警示對話框【任務二】alert()警示對話框除了顯示一些提示信息以外，還經常用于程序的調試，在程序執行過程中，檢驗程序的中間結果及程序是否已執行等。

使用confirm()函數可以顯示確認對話框，語法格式如下

確認對話框的功能同警示對話框功能十分相似，不同之處是，確認對話框有“確定”“取消”兩個按鈕，并且在單擊“確定”按鈕后會返回布爾值true，單擊“取消”按鈕將返回布爾值false。2.確認對話框函數confirm(確認內容);確定詩句作者——確認對話框【任務三】在確認對話框中通過分別單擊“確定”和“取消”按鈕來測試其返回的值，并在頁面輸出效果任務描述任務分析聲明兩個變量，用來保存單擊“確定”或“取消”按鈕后返回的布爾值和最后的結果條件表達式可以根據不同的布爾值獲得不同的結果，所以可以通過條件表達式來實現在確認對話框中單擊“確定”和“取消”按鈕，得到不同的效果確定詩句作者——確認對話框【任務三】<scripttype="text/javascript">varpoem,result;//聲明變量poem=confirm("山重水復疑無路，柳暗花明又一村該詩句的作者是陸游嗎？");//確認作者result=poem?"是陸游"："是辛棄疾";//計算結果document.write("作者"+result);//輸出結果</script>使用prompt()函數可以打開提示對話框，提示對話框不僅有“確定”“取消”兩個按鈕，而且提供用戶可以用鍵盤輸入的文本框，這個文本框可以實現用戶與系統的交互功能。語法格式如下。

其中，“提示部分”是提示需要輸入的內容的語句，“默認結果”部分可以有，也可以沒有。提示對話框是具有人機交互功能的消息對話框。3.提示對話框函數prompt(提示部分[,默認結果]);詩詞對答——提示對話框【任務四】根據提示通過鍵盤輸入詩詞的下一句，然后在頁面上輸出結果任務描述任務分析根據任務要求，使用prompt()函數接收通過鍵盤輸入的內容。在編寫代碼時，先聲明一個變量，將輸入的結果保存到變量中，然后通過警示對話框在頁面上輸出結果。詩詞對答——提示對話框【任務四】<scripttype="text/javascript">varresult;varpoem="黑發不知勤學早";result=prompt("寫出下列詩詞的下一句\n"+poem);if(result=="白首方悔讀書遲")alert("回答正確");elsealert("回答錯誤");</script>在JavaScript中，數值處理函數本質上是由JavaScript的內置對象的方法實現的，它能夠對數據進行判斷、格式化等，具體介紹如下。.2數值處理函數

isNaN()函數用來確定一個變量是否為非數字。如果是非數字，返回true；如果是數字，則返回false，如下列代碼所示。

1.isNaN()、isFinite()函數isNaN(1);//返回falseisNaN(true);//返回falseisNaN(“a”);//返回trueisFinite()函數用來確定一個變量是否有限，如果這個變量不是NaN、字符串、負無窮或正無窮，那么isFinite()將返回true，否則將返回false，如下列代碼所示。

1.isNaN()、isFinite()函數isFinite(1);//返回trueisFinite(true);//返回trueisFinite(“a”);//返回false判斷數據是否為數字——isNaN()函數【任務五】使用isNaN()函數判斷數據是否為數字任務描述任務分析使用isNaN()函數判斷通過提示對話框輸入的數據是否為數字利用alert()在頁面上輸出測試結果判斷數據是否為數字——isNaN()函數【任務五】parseFloat()函數用來將數字或者數字與字母混合的字符串轉換成浮點數。對于由數字和字母組成的字符串，如果開頭不是數字，則返回NaN；如果開頭是數字，那么將第一個字母前面的數字轉換成浮點數。parseInt()函數同parseFloat()類似，用來將數字或者數字和字母混合的字符串轉換成整數，如果字符串有小數部分，則只保留整數部分。對于由數字和字母組成的字符串，如果開頭不是數字，則返回NaN；如果開頭是數字，那么將第一個字母前面的數字轉換成整數，如下列代碼所示。

2.parseFloat()、parseInt()函數parseFloat("123.45");//返回123.45parseFloat("123.4abc");//返回123.4parseFloat("abc123.45");//返回NaNparseInt("123.45");//返回123parseInt("123.45abc");//返回123parseInt(true);//返回NaN格式化數據——parseFloat()和parseInt()函數【任務六】通過parseFloat()和parseInt()函數將字符串分別顯式轉換成浮點數和整數。任務描述任務分析通過提示對話框輸入數據，使用parseFloat()和parseInt()函數將數字表達式分別轉換成浮點數和整數。利用document.write()在頁面上輸出測試結果格式化數據——parseFloat()和parseInt()函數【任務六】toString()函數用來將數值型的數據轉換為字符串型，也可以返回指定進制的數據（默認為十進制數據），語法格式如下。具體如下：

3.toString()、toFixed()函數num.toString([進制]);//如果未指定進制，將num轉換為默認的十進制的字符串；如果指定進制，那么返回相應進制的數據varnum=12;document.write(num.toString());//頁面顯示字符串12document.write(num.toString(8));//頁面顯示12的八進制數14toFixed()函數用來將浮點數轉換為固定小數位數的數字。語法格式如下。具體如下：

3.toString()、toFixed()函數num.toFixed([位數]);//將num四舍五入，保留指定位數的小數；若省略參數，則只保留整數部分。varnum=12.5678;document.write(num.toFixed());//頁面顯示13document.write(num.toFixed(2));//頁面顯示12四舍五入并保留2位小數的結果12.57在JavaScript中，字符串處理函數同前面介紹的消息對話框函數、數值處理函數一樣，都是由JavaScript的內置對象的方法實現的，字符串處理函數能夠對字符串進行一定的操作，具體介紹如下。.3字符串處理函數eval()函數用來計算字符串中的表達式，并返回表達式的值，如下列代碼所示1.eval()函數alert(eval("30+9/3"));返回33alert(eval("3>4"));返回falsealert(eval("6>5"));返回true計算表達式的值——eval()函數【任務七】通過eval()函數計算輸入的表達式的值任務描述任務分析通過提示對話框輸入表達式，使用eval()函數計算表達式的值。利用警示對話框在頁面上輸出測試結果計算表達式的值——eval()函數【任務七】escape()函數和unescape()函數是一對互逆函數。escape()函數用于對字符串中的字符（除字母和數字）進行編碼轉換，轉換為%AA或者%UUUU的形式。AA指的是字符ASCII的十六進制數的形式，UUUU指的是非ASCII字符（如漢字）的Unicode的形式，如下列代碼所示。2.escape()、unescape()函數alert(escape("Hello，小芳！"));//此處返回Hello%uFF0C%u5C0F%u82B3%uFF01alert(unescape("Hello%2C%u738B%u5C0F%u4E3D%uFF01"));//此處返回Hello，小芳！相關知識

聲明自定義函數在編寫代碼時，可能會出現非常多相同的代碼，或者功能類似的代碼，這些代碼需要重復使用。例如，下面3段代碼實現了相似的功能。聲明自定義函數這3段代碼的共同點在于，i的結束值不一樣，其他代碼都是相同的，如果重復書寫，會造成代碼冗余。為了解決這個問題，我們引入自定義函數，將一段代碼封裝起來，實現代碼的重復使用。那么該如何創建和調用自定義函數呢？在接下來的任務中進行探索。自定義函數是根據需要自己定義的一段程序代碼具體分為兩類：有名函數和匿名函數自定義有名函數，必須先聲明函數.1聲明自定義函數聲明自定義函數使用下面的語法格式function是定義函數的關鍵字，后面是函數名，必選項，且唯一參數是可選項，多個參數之間要用逗號分隔函數體是必選項，用于實現函數的功能return語句是可選的，用于返回函數值表達式可以為任意的表達式、變量或者常量聲明自定義函數function函數名([參數1],[參數2]…){

函數體；

[return表達式;]}計算商品總價——函數定義【任務八】定義函數，實現計算商品總價任務描述任務分析為實現計算功能，函數體要用到算術表達式——總價=單價×數量在實現計算功能時，可以先聲明3個變量price、num和total，分別用來保存單價、數量以及總價計算商品總價——函數定義【任務八】自定義函數定義好之后，就可以同內置函數一樣，在程序中進行調用。一般來說，在程序中調用函數有如下3種方式。2調用自定義函數在JavaScript程序中，可以直接使用函數名來調用函數。無論是內置函數還是自定義函數，調用的方法是一樣的。用函數名來調用函數的形式是“函數名()”，在調用函數時后面必須加括號。1.使用函數名調用函數printStr();在HTML中，可以使用超鏈接（在<a>標簽的href屬性中使用“javascript：”）的方式來調用JavaScript函數。調用方法如下2.在HTML中用超鏈接的方式來調用函數<ahref="javascript:函數名(參數)">…</a>在事件處理中，可以將JavaScript函數作為事件處理函數來調用。當觸發事件時會自動調用指定的JavaScript函數。3.在事件處理中用與事件結合的方式調用函數計算商品總價——使用函數名調用函數【任務九】要求直接通過函數名來調用【任務八】中自定義的函數total()，在頁面上輸出計算結果。任務描述任務分析直接使用函數名調用自定義函數具體實現時在<script>…</script>標簽中通過total()調用計算商品總價——使用函數名調用函數【任務九】計算商品總價——使用超鏈接調用函數【任務十】要求直接通過超鏈接的方式來調用【任務八】中定義的函數任務描述任務分析與【任務九】調用同一個自定義函數，采用超鏈接調用函數的方法來進行，即通過“javascript:total()”調用具體實現時代碼為“<ahref="javascript:total()">…</a>”計算商品總價——使用超鏈接調用函數【任務十】JavaScript函數在定義和調用時是可以有參數和返回值的，本小節將針對函數的參數和返回值進行講解。.2函數的參數和返回值按照函數定義的語法格式，在創建自定義函數時，在函數名后面可以有1個或多個參數，如下所示1.函數的參數function函數名([參數1],[參數2]…){

函數體；

[return表達式;]}我們把定義函數時指定的參數稱為形式參數，簡稱形參；而把調用函數時為形參實際傳遞值的參數稱為實際參數，簡稱實參。如果定義的函數中有參數，那么調用這種函數的方式如下所示1.函數的參數函數名(實參1,實參2,…);計算任意商品總價——有參函數【任務十一】通過定義有參函數計算商品的總價任務描述任務分析通過帶有參數的函數來實現計算商品總價指定兩個形參price、num，分別表示單價和數量在調用時，用單價和數量的實際值（實參）代替price和num兩個形參，就可以得到商品的總價計算任意商品總價——有參函數【任務十一】函數的返回值是指函數在調用后獲得的數據。在定義函數時，可以為函數指定一個返回值，函數的返回值可以是任何類型的數據。在JavaScript中使用return語句得到返回值并退出函數。return語句的語法格式如下所示。這條語句的作用是結束函數體的執行，并把表達式的值作為函數的返回值。2.函數的返回值return表達式;求兩個數的較大數——return語句【任務十二】定義函數，求兩個數中的較大數，并通過return語句得到其結果任務描述任務分析根據要求，求兩個數中的最大數，可定義有兩個參數的函數，通過比較將最大數保存在變量max中。返回值是最大數，直接返回變量max。求兩個數的較大數——return語句【任務十二】變量只有在它的作用范圍內才可以被調用，這個作用范圍就是變量的作用域。

在ES6標準出現之后，JavaScript變量的作用域按照其作用的范圍可以分為：全局作用域、局部作用域和塊級作用域3種。作用域對應的變量分別為全局變量、局部變量和塊級變量。4函數變量的作用域全局變量：在函數體外聲明的變量或者在函數內省略var關鍵字聲明的變量稱為全局變量，它在同一頁面文件中的所有腳本內部都可以使用。局部變量：在函數體內利用var關鍵字定義的變量稱為局部變量，僅在該函數內部有效。在函數體外，即使使用同一個名字的變量，也被看作另一個變量。注意，如果局部變量和全局變量同名，在函數體內，只有局部變量是有效的。塊級變量：用ES6標準中新增的let關鍵字聲明的變量稱為塊級變量，它僅在包含它的最小代碼塊中有效。4函數變量的作用域輸出變量的值——變量的作用域【任務十三】測試變量的作用域任務描述任務分析分別通過3種具體的應用測試3種變量的作用域首先聲明全局變量a，并進行賦值。然后定義函數，在函數中聲明局部變量a，在函數中輸出的a是局部變量。接下來在for循環中定義塊級變量a，輸出的a是塊級變量。最后測試輸出的變量a，結果是全局變量輸出變量的值——變量的作用域【任務十三】函數的嵌套是指在一個函數內包含另外一個函數。

在JavaScript中，一個函數體內的語句可以調用另外一個函數，這就是函數的嵌套調用。在函數嵌套調用時，被調用的函數應該先寫好，否則不能完成函數的嵌套調用。5函數的嵌套求1+(1+2)+(1+2+3)+…+(1+2+…+n)的值——函數嵌套【任務十四】使用函數嵌套的方式求出1+(1+2)+(1+2+3)+…+(1+2+…+n)的值任務描述任務分析分析該算式，實際上是求1～n的累加和的累加和，所以可以編寫一個函數sum()求1～n的累加和，再編寫一個函數sum_all()對這些累加和進行累加利用sum_all()函數嵌套sum()函數即可實現目的累加和的求法可使用循環語句來實現求1+(1+2)+(1+2+3)+…+(1+2+…+n)的值——函數嵌套【任務十四】相關知識函數進階函數表達式是指將聲明的函數賦值給一個變量，通過變量完成函數的調用。4.函數表達式varfn=functiongetSum(num1,num2){returnnum1+num2;};fn(2,4);比較一下前面學習過的自定義的有名函數和函數表達式函數表達式函數表達式就是在自定義函數的基礎上，將自定義函數賦值給一個變量，不同的是函數表達式必須在調用的時候采用“變量名()”的形式，而不是采用“函數名()”的形式調用。顧名思義，匿名函數就是沒有名稱的函數，它是函數表達式的另一種形式匿名函數匿名函數就是在函數表達式的基礎上去掉函數名。觀察匿名函數的調用，通過“變量名()”的形式，可以將整個function部分替換成“變量名”,于是就有了如下自調用的方式，這種方