[JS] 函式參數、算數、回傳、函式間互相傳遞

Greta Ma
馬格蕾特的樹洞
6 min readJun 10, 2019

差不多一個多禮拜沒更新了,原因是中間隔了一個端午連假,不過連假中我還是有盡本分把 JavaScript 的函式章節上完,這都多虧了我是一個一放鬆就會有罪惡感的人。(?)

上一次學到一些關於函式的基本觀念,這一次則是要來了解如何用函式進行較複雜的運算。首先要從參數開始說起。

函式代入參數

有時候函式需要一些特定資訊才能完成它的工作,因此宣告函式時需要再給予它參數。在這樣的函式中,參數的功能就有如變數。參數放置的位置,在函式名稱後面的小括號裡。
以下是代入一個參數的函式:

function count(oneNum){
var total = oneNum * 10;
console.log( '總價格:' + total + '元');
}
count(8);
//oneNum:參數的名稱,可以自己取,就像變數一樣
//count(8):呼叫函式時,一併輸入參數值

這樣函式就會顯示「總價格:80元」的結果。

參數不一定只能代入一個,可以代入很多個,例如要做加總的時候,可以參考下面的例子。

function count(oneNum,twoNum){
var total = oneNum + twoNum;
console.log( '總價格:' + total + '元');
}
count(8,2);

這樣函式就會顯示「總價格:10元」的結果。

學會將參數代入函式之後,即可進入下一個 level:用函式進行運算。

如何觸發一個計算函式

假設我們今天去麥X勞買漢堡跟飲料,需要計算消費的金額,要怎麼做出一個簡單的計算函式呢?

  1. 在 HTML 撰寫輸入漢堡及可樂數量的欄位,及一個按鈕(點擊後開始計算金額)。
  2. 回到 JS,如果按鈕發生了一個 onclick 事件,就會觸發一個函式。

小補充:

  • value 屬性可以撈出文字欄位的值,value 甚至可以當作一個 HTML 屬性,作為設定文字欄位預設值之用。
  • 回顧一下,如何讓 JS 與 HTML 交互作用?就是用一個 id 選取 HTML 元素去綁一個事件。
  • 那 parseInt() 是什麼意思?為何要包住選取 DOM 的語法?請接著往下看。

字串與數字,傻傻分不清

JavaScript 有個特別的地方,就是在表單欄位輸入的數字會被認定為是字串,直接讓兩個表單欄位的數字相加的話,會變成兩個數字的結合。

var num1= '10';
var num2= '20';
var total = num1+num2;
console.log(total);
//答案是 '1020'

但是,如果字串型態的數字使用乘法跟除法的話,卻能正常進行運算!
(所以就算沒把字串變數轉換成數字變數,使用乘法跟加法還是能夠得到正確的答案,但是最好還是不要這樣。)

那麼要如何將字串變數轉為數字變數?

使用 parseInt 語法

  1. 宣告一個變數 = 字串型態的數字
    var num = '3';
  2. 該變數 = parseInt(該變數)
    num = parseInt(num);

補充:查詢型別的語法 typeof()

使用 typeof 語法能夠幫助我們查詢某個東西是什麼類型的語法,在此處可以輔助我們查詢變數類型。
typeof(num);

return 的意義

函式可以透過 return 回傳函式運算完的結果,回傳的值可在函式外透過宣告變數來儲存;若函式不回傳值,則可省略 return。 當 return 執行時,解譯器會跳出該函式,所以如果 return 後面還有程式碼,則不會被執行。因此,用 return 回傳空值也具有「中止」程式碼的功能。

函式結合 return 的用法

在函式中使用 return,可以讓程式碼寫得較簡短,也可以拿來處理字串。只要直接讓函式代入參數,就能取代原本一行行的加減乘除。

例如下面這個名為 add 的函式,它會把傳入的兩個數字相加後並 return,所以下面的變數 result 會接收 add(15,45) 的結果,故 result 就會等於 60。

function add(numOne,numTwo){
return numOne + numTwo;
}
var result = add(15,45);
// result 為 60

函式間的傳遞

剛剛我們了解 return 的基本用法,那函式間如果需要互相傳遞各自運算出來的結果,要怎麼做呢?
先看一段比較簡單的程式碼:

// 設計一個含有參數的函式,用來回傳兩個數值相加的結果
function count(a, b) {
return a + b;
}
// 設計另一個函式,帶數字 1 跟 2 進去前一個函式計算總和,並用變數儲存回傳的值
function sum() {
var total = count(1,2);
console.log(total);
}
// 呼叫第二個函式,輸出變數 total 的值
sum();
// total 為 3

看完上面的範例,接下來我們試試看情境題:

function count(price){
return addTax(price*0.8);
} //(2)(3)
function addTax(price){
return price*1.1;
} //(4)
console.log(count(500)); //(1)

(1) 我們想要計算一件衣服的價格,所以呼叫 count 函式而衣服為 500 元。
(2) 在 count 函式中因為全館衣服打 8 折而先乘上 0.8。
(3) 但是因為要加收 10% 營業稅,所以把乘上 0.8 的價格再丟入 addTax 函式。
(4) 在 addTax 函式中因為要加收 10% 營業稅所以價格要乘上 1.1。(兩個函式中的 price 值是不一樣的,在 count 中指的是原價,在 addTax 中指得是打 8 折過後的價格)
(5) 等到 addTax 回傳結果後再回到 (1)。最後的售價為 440 元。

新手誤區

胡立老師在鐵人賽文章中有針對這篇文章的內容提點一個新手容易搞混的地方,以下引用自後設鐵人 Day4:請幫我簽個名好嗎?

以我自己帶過新手的經驗,最容易搞混的就是 return 跟 console.log,分不清楚回傳跟印出到底差別在哪裡。尤其是 function 長這樣的時候:

function add(a, b) {
console.log(a + b)
}
add(1, 2)

有些新手會以為 add(1, 2) 的回傳值是 3,但不是,那是因為它在裡面 console.log() 所以把結果印出來了。如果真的要有回傳值的話要這樣寫:

function add(a, b) {
return a + b
}
console.log(add(1, 2))

這樣才叫做有回傳值。

--

--

Greta Ma
馬格蕾特的樹洞

正一類,大學一畢業就去當公務員,中間因緣際會轉職為前端工程師,之後又再任公職。這就是終點了嗎?我不那麼覺得。