🗞 8/13 (五) - 函式傳參數、return 練習

tags: JavaScript 必修篇 - 前端修練全攻略

本日對應章節為:函式 function。

function 章節複習

歡迎同學複製以下程式碼丟進開發人員工具或 CodePen 觀察執行情況唷!

觀念一: 函式參數介紹 (參考章節)

function a(num, num2) { console.log(num); console.log(num2); } a(1, 2);//呼叫並帶入參數至函式 a(num 為1、num2 為2) a(3, 4);//(num 為3、num2 為4) //觀念補充:參數只存活在大括號 console.log(num)//會被誤會成是變數,但沒有 num 這個變數,會報錯

觀念二: 參數寫法-兩個數字相加工具 (參考章節)

同學可以嘗試呼叫想相加的數值,並觀察結果:

function add(num1,num2){ console.log(`您加總的數字為${num1+num2}`) } add(2,3);

觀念三: return 寫法教學 (參考章節)

function calcTotalScore(chineseScore,mathScore){ return chineseScore + mathScore; //回傳,會把值回傳到呼叫 calcTotalScore 的地方 } // return 回傳後的值,可以被賦予在變數上 //我宣告一個變數,名為 markTotalScore,並賦予右邊函式的值。 let markTotalScore = calcTotalScore(40,60);//會先將參數丟進 calcTotalScore 運算後,接收 return 回傳的值 console.log(markTotalScore)//100

觀念四: return 可以有多個 (參考章節一參考章節二)

範例一: return 會中斷函式執行,後面的程式碼不會執行

function calcTotalScore(chineseScore,mathScore){ return chineseScore + mathScore; //return 會中斷該函式 /*此分隔線以下都不會執行*/ console.log('123'); return 123; } let shannonScore = calcTotalScore(80,20);

範例二:搭配 if else if 可以撰寫多個 return

// 檢查學生成績是否及格的函式 function checkScore(score){ if(score >= 60){ return '及格'; }else{ return '不及格'; } console.log('123');//因為前方有 return 中斷函式,所以不會執行 } let shannonScore = checkScore(50); console.log(shannonScore)//不及格 let tomScore = checkScore(80); console.log(tomScore)//及格

問題

題目一

請同學參考觀念二 - 參數寫法-兩個數字相加工具後,撰寫出兩個數字相減工具,並透過 return 的方式,賦予回傳的值至以下變數:

let num;

題目二(已修正)

情境題:

炎炎夏日,小格到豆花專賣店前想吃一碗豆花:

  • 豆花內用售價為 56 元

  • 豆花外帶售價為 61 元

  • 小格現有財產為 60 元

參數對照表:

num 豆花數量

price 豆花售價

isTakeout 是否外帶

於是小格寫出以下程式碼想判斷自己能不能購買成功!
請同學參考以上四個 function 觀念,協助小格使用 console.log 印出結果。

function checkOrder(num, price, isTakeout) { if (isTakeout === true) { if (calTotal(num, price) <= 60) { return "外帶成功!"; } else { return "外帶失敗!"; } } else if (isTakeout === false) { if (calTotal(num, price) <= 60) { return "內用成功!"; } else { return "內用失敗!"; } } else { return "用餐方式輸入錯誤!"; } } function calTotal(num, price) { return num * price; } //情境一:小格想內用一碗豆花 //請呼叫 checkOrder 函式並依照情境帶入參數 //使用下方 console.log() 印出結果 console.log(); //情境二:小格想外帶一碗豆花 //請呼叫 checkOrder 函式並依照情境帶入參數 //使用下方 console.log() 印出結果 console.log();

回報流程

Fork 一份此範例(已修正),並將答案寫在 CodePen 複製 CodePen 連結貼至下方作業投稿區中回報就算完成了喔!

作業投稿區(學員自行投稿)

  1. 範例投稿(可點此連結觀看解答)
  2. Shelly
  3. Jane Lin
  4. Mimino
  5. teddy wu
  6. Shoppingq
  7. Bucky
  8. 詠銓
  9. 肉鬆
  10. JarvisYu
  11. Yunei
  12. 陳sam
  13. Allen Lin
  14. Jack
  15. InchIK
  16. LMY
  17. Wei
  18. JuneFish
  19. Arista
  20. Chiang
  21. Sandy
  22. 予予
  23. Judy Wei
  24. axlrock1021
  25. Eva
  26. 黃士桓
  27. 群嘉
  28. Howard
  29. Ulysses
  30. andersonshen
  31. Bear
  32. Izumi 泉
  33. 中年大叔
  34. LALA
  35. curry
  36. Joe Kuo
  37. 皮皮
  38. Willy
  39. weiliang
  40. 草皮
  41. wind
  42. 番茄
  43. Nick
  44. Lucien
  45. LOMO
  46. Fred
  47. 乃萱
  48. Allensph
  49. Yue
  50. kimn
  51. Hedy
  52. Rain Liao
  53. DoraYu
  54. Rogan
  55. Yu Sung
  56. AmberCYT
  57. 肉魚
  58. ans9323052
  59. shehome
  60. yojanni
  61. Margo
  62. 陳茄
  63. zhaoJames
  64. Susan
  65. Yiren
  66. janice
  67. Amber_Lin
  68. Wilson Han
  69. YinChenCheng
  70. Jung
  71. Shiny
  72. 安迪
  73. Peter
  74. claire
  75. Eileen
  76. SeanChang
  77. 莎賓娜
  78. LucieW
  79. PeggyTsai
  80. Joy Cheng
  81. Gill
  82. WA
  83. Tim
  84. else
  85. Kmberly
  86. betty Chen
  87. Will
  88. Sunny
  89. BrunoYu
  90. Hailey
  91. RuoAn
  92. 庭瑋
  93. JimmyFang
  94. Min
  95. Jay
  96. 沈依蓉
  97. Alice
  98. int Huang
  99. Peihan Wang
  100. JackC
  101. Cindy Huang
  102. Kevin Jiang
  103. shio
  104. sophielam
  105. YI
  106. 0808jessie
  107. Cliff
  108. Winnie
  109. Cary
  110. amy
  111. Anna
  112. Alex
  113. piha
  114. sasimi
  115. qoq77416416
  116. Eden
  117. yunifer
  118. chih
  119. KiKi
  120. HaoJing
  121. wei
  122. ABEI
  123. qqprzi
Select a repo