iT邦幫忙

2021 iThome 鐵人賽

DAY 8
1
Modern Web

我的JavaScript日常系列 第 8

JavaScript Day 8. 淺談 Function-操作實例

上一篇大略的說明了 function 的兩個大類別,這裡試著放比較多的簡易操作實例。

註冊多組函式

一個函式可以註冊多組函式,並且在執行的時候也可以看見他的執行順序。

// 執行1
function morningAction () {
    console.log("起床");
    console.log("摺棉被");
    console.log("刷牙");
}
//執行2
function nightAction () {
    console.log("吃麵包");
    console.log("吃薯條");
    console.log("喝牛奶");
}

morningAction (); // 起床、摺棉被、刷牙
nightAction (); // 吃麵包、吃薯條、喝牛奶

雖然說照著上面這樣子寫的確也可以正常執行,但會造成程式碼變的很長,也很容易會有重複,如果很單純的這樣子寫,整篇程式碼其實會看起來非常的雜亂。

在函式裡面的函式

其實函式裡面仍然可以執行另一個函式,以這個概念去寫的話,可以減少不斷需要重複寫或是太冗長的情況。

function morningAction () {
    console.log("起床");
    console.log("摺棉被");
    seeMe();
    console.log("刷牙");
}
function nightAction () {
    console.log("吃麵包");
    console.log("吃薯條");
    seeMe();
    console.log("喝牛奶");
}
	function seeMe () {
    console.log("歐害幽");
}

morningAction (); // 起床、摺棉被、歐害幽、刷牙
seeMe(); // 歐害幽
nightAction (); // 吃麵包、吃薯條、歐害幽、喝牛奶

函式上的參數

理解到上面的簡易操作概念之後,接著要討論的是函式如何代入參數。在自定義名稱旁邊的括號就是代入參數的地方,要注意的部分是參數只存活在大括號裡。

// num 這個參數只能存活在大括號裡,隨著大括號結束,也就跟著消失了
function any(num) {
    console.log(num);
}

// 在這個部分 1 會代入到 num 因此結果會出現 1
any (1); // num 是 1
any (2); // num 是 2

// 除此之外參數也可以代入兩個
function any(num, num2) {
    console.log(num);
		console.log(num2);
}

any (1,2); // num 是 1、2
any (3,4); // num 是 3、4

只存活在函式裡的參數

上面提到參數只存活在大括號裡,這個部分也可以透過操作來證實,可以看見最後的結果是沒有東西。

function any(num, num2) {
    console.log(num);
		console.log(num2);
}

any (1,2); // num 是 1、2
console.log(num) // error

透過參數相加

透過函式裡面的參數,還可以有很多有趣的變化,譬如做一個小型的相加程式。

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

add(1,1); // 2

使用 return 回傳

return 也是在使用函式的時候很常碰到的功能,return 語意上為:「終止一個函式執行,並且從該函式返回一個值。」,光是這麼說實在很抽象,因此可以直接看範例。

function add(num1,num2) {
		// 在這個地方會把值回傳到 addNumber
    return  num1 + num2;
}

let addNumber = add(123456789,987654321);
console.log(addNumber);

簡單說,當我們需要把資料回傳到外層時,就是一個使用 return 的時機。另外,return 也可以有很多個,當我們熟悉它的時候,真的會覺得是一個很好用的方法。


上一篇
JavaScript Day 7. 淺談 Function
下一篇
JavaScript Day 9. if、else if、if包if
系列文
我的JavaScript日常31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言