Sean's Blog

An image showing avatar

Hi, I'm Sean

這裡記錄我學習網站開發的筆記
歡迎交流 (ゝ∀・)b

LinkedInGitHub

NUK JavaScript #2:函式 (Functions)

原先想將 Function 與上一篇的 let 與 const 合併在同一篇,但由於篇幅會有些過長,因此決定另外寫一篇文章介紹函式。這篇文章會介紹函式的使用方式與觀念。

函式(Functions)

函式的內容就像是一連串的動作,我們會先定義函式,再透過呼叫函式的方式去執行函式裡頭的動作。

範例:

1let a = 1;
2
3function bark() {
4  console.log('bark!!!');
5}
6
7bark();
8bark();
9bark();
10

我們宣告一個函式 bark() 之後,使用 bark() 呼叫函式執行。
這邊我們呼叫三次 bark() 後,我們能在 console 看到它叫了三次!

GITHUB

參數

此外,函式還能帶入參數,以完成更多有趣的應用。

下面我們試著做個加總的功能:

1function add(num1, num2) {
2  console.log(num1 + num2);
3}
4
5add(3, 5); // 8
6

更進階一點,我們再運用上乘法,就能製作一個收銀機功能了:

1let hamPrice = 30;
2let cokePrice = 20;
3
4// 參數 (可以看成這個參數就等同於宣告了下面兩行)
5function total(hamNum, cokeNum) {
6  // let hamNum = 10;
7  // let cokeNum = 30;
8
9  let hamTotal = hamPrice * hamNum;
10  let cokeTotal = cokePrice * cokeNum;
11  console.log(hamTotal + cokeTotal);
12}
13
14total(10, 30);
15

在這個例子中,帶入函式的參數 hamNum 與 cokeNum 其實也能看成是宣告了 let hamNum = 10let cokeNum = 30

函式練習題

這邊提供一些邏輯訓練小題目作為練習。

題一

例題一:呼叫 add() 函式得到 1, 3, 6 的結果

1function add(num1) {}
2
3add(1);
4add(2);
5add(3);
6
7// 1
8// 3
9// 6
10

解析:
題目中,add() 函式有一個參數,我們分別帶入 1, 2, 3 到 add() 裡面後,想要得到 1, 3, 6 的結果。

這邊我們可以思考看看 [1, 3, 6] 這三個數字之間有什麼關聯呢?

1 + 2 = 3
3 + 3 = 6

我們依照這個邏輯,首先宣告一個變數 a 並賦予值等於 0,然後宣告一個函式,並讓我們每次執行函式之後,函式中的 a 會更新成 a + num1。

1let a = 0;
2function add(num1) {
3  a = a + num1;
4  console.log(a);
5}
6
7add(1);
8add(2);
9add(3);
10

運用這個邏輯,我們就能得到以下的正確結果啦!

GITHUB

題二

1function test2(num1) {}
2
3test2(3);
4test2(5);
5test2(2);
6
7// 30
8// 6
9// 3
10

以下是參考解答:

1let a = 90;
2function test2(num1) {
3  a = a / num1;
4  console.log(a);
5}
6
7test2(3);
8test2(5);
9test2(2);
10

題三

最後是一題特別一點,我們來計算 BMI,並印出結果。

這邊我們預設帶入的參數是公分,體重為公斤。

1function bmi(h_num, w_num) {
2  h_num = h_num / 100;
3  let txt = w_num / (h_num * h_num);
4  console.log(txt);
5}
6bmi(168, 54);
7
  1. 將輸入的體重數值轉為公尺為單位
  2. 帶入 BMI 的計算公式,並將結果放入一個變數中
  3. 將結果顯示到 console 上

結論

函式是 JavaScript 中相當重要的觀念,而「邏輯運算能力」對於我們在理解函式之間的溝通與傳遞上有很大的幫助。
例如:製作「換頁」功能時,當前頁面的內容與前後頁碼的切換。
因此類似文末的這類邏輯考題,其實對於往後撰寫 JavaScript 時會滿有幫助的唷!

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫