iT邦幫忙

2022 iThome 鐵人賽

DAY 27
0
自我挑戰組

一趟30天網頁設計的學習冒險#explain like i‘m five 系列 第 27

Day 27 function 打包程式碼好用的函式~

  • 分享至 

  • xImage
  •  

前言

補充說明關於資料型態裡面,數值變成字串的用法。

舉例示範,原本應該要是數字的簡單運算相加,如下圖

let age = 28;
      console.log(age + 10);

https://ithelp.ithome.com.tw/upload/images/20221012/20151470Znz4KurcbD.jpg

可以看到數字被toString這個方法,改成字串,但如果不是放在console.log裡面,放在前一行的話,就不會變成字串加總喔。

let age = 28;
      console.log(age.toString() + 10);

https://ithelp.ithome.com.tw/upload/images/20221012/20151470M2hO0iYX6X.jpg

let age = 28;
      age.toString(); //在這段命令會被變成字串
      console.log(age + 10); //但到這裡又會回歸變成數字相加

函式就有三個概念要注意

  • 怎麼建立跟呼叫函式
  • 學會使用函式的參數
  • 函式的回傳值。

函式

函式即是將程式碼中重複使用的部分單獨出來,在應用時只要呼叫就可以用了

主要因為程式開發的內容越來越多,難免在操作時會有許多相同的程式動作跟判斷,不免會產生許多相似或重複的內容,那如果我們把重複的程式碼整理出來變成一個區段,就可以在城市中隨時呼叫使用,這樣的程式區段就是函式,讓程式碼更精簡清楚。

函式名稱的命名規則跟變數、常數是相同的,設定時候不可以跟其他的函式或是變數名稱相同。

函式的內外要區分得非常清楚

  • 建立函式

function是固定的會在語法出現的,代表我們要建立函式摟!

//建立函式
function函式名稱(參數名稱列表){
函式內部的程式區塊;
}
//呼叫函式
函式名稱(參數資料列表)
//建立函式
function test(){
	console.log("Hello");
	}//大括號以內的內容截至目前還是不會執行
test();//除非這裡有執行呼叫函式,才會執行大括號裡的程式碼
test();

無參數版本:

function funnything() {
        alert("歡迎光臨 鐵人挑戰賽");
      }
      funnything();

https://ithelp.ithome.com.tw/upload/images/20221012/20151470StLyds2MU1.jpg
單一參數的狀況

可以看到我們在funnything後面裡面的小括號裡放入一個參數並且命名為sayhi,裡面不能放數值,布林值或是字串等固定的資料,要放入彈性可以變化的,這樣我們才可以在之後印出想要的資料

像是下面的案例,我們想要印出"Hello"跟"Are U still there?",就把字串放到參數的位置呼叫即可。

舉個單一參數的案例:

function funnything(sayhi) {
        console.log(sayhi);
      }
      funnything("Hello");
      funnything("Are U still there?");

https://ithelp.ithome.com.tw/upload/images/20221012/20151470xNPchRmYqe.jpg

多個參數(參數間用逗號隔開):

function add(x1, x2) {
        let result = x1 + x2;//宣告一個變數結果,是兩個參數相加
        console.log(result);//把結果印出來
      }
      add(10, 79);
      add("Hello", "Are U still there?");

https://ithelp.ithome.com.tw/upload/images/20221012/20151470w2HZTkhWe7.jpg

那我們來嘗試參數相除:

//做除法變數這裡名稱就會打divide,相加就會用add,方便其他人閱讀
function divide(x1, x2) {
        let result = x1 / x2;
        console.log(result);
      }
      divide(109, 10);
      divide("Hello", "Are U still there?");

這裡看到,程式依舊正常運作,沒有顯示錯誤出現表示,雖然字串相除聽起來就不合理,但在程式上面規則是可以的,只是電腦會顯示出NaN,就是指Not a Number,這不是數字。
https://ithelp.ithome.com.tw/upload/images/20221012/201514702iAh4rxJxq.jpg

建立函式的另一種寫法(把函式名稱往前放,但還是一樣):

let 函式名稱=function(參數名稱列表){
	函式內部程式區塊;
	}

return回傳值

將資料從函式內部傳回呼叫函式的位置,可以回傳在函式中處理後的結果

在函式後面使用return就會馬上結束不會繼續運作括號裡面後面的命令,直接帶出回傳值。

回傳值可以是任何的資料(數字、字串、布林值、空值)都可以

function函式名稱(參數名稱列表){
函式內部的程式區塊;
return;
}
函式名稱(參數資料列表)

設計有意義的回傳值

function add(x1, x2) {
        let sum = x1 + x2;
        return sum;//回傳加法的結果
      }
      let result = add(189, 234);
      console.log(result);

https://ithelp.ithome.com.tw/upload/images/20221012/20151470x26iB2i7n5.jpg


第二十七天挑戰結束

邏輯不難,還需要大量練習


上一篇
Day 26 轉吧轉呀 迴圈呦~
下一篇
Day 28 Object & Array
系列文
一趟30天網頁設計的學習冒險#explain like i‘m five 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言