iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 8
0
Modern Web

JavaScript初心者ノ研究日記。系列 第 8

八日目:JavaScript 函式function 関数ノ章

晚安 ✧٩(ˊωˋ*)و✧ 我是 SONYKO
上班上課辛苦了。
今天要介紹函式~♫

有沒有每次打函式都會變成韓式的困擾啊(

Q : 為什麼函式會被發明?
A : 因為人類很懶 (O
 


▶︎function 是什麼?

我們生活中有很多重複性質的事情,我們為了方便解決那些事情,函式就被發明出來了。

拿餐廳的收銀系統來舉例,今天如果沒有收銀機,每次結帳店員都要拿出計算機慢慢按再跟你說金額,可能輪到你點餐你也飽了。因此計算金額的用的函式被發明,讓我們的生活更簡便。
 
 

▶︎函式的基本概念

函式可以說是 JavaScript 最核心也最容易被誤用的東c 惹,變數型別時有寫到「除了基本型別以外通通都物件」,所以函式... ??

你可能會想到要用 typeof 去檢査 function ,然後看到結果:
「靠邀啊!他回傳function啊!騙新手?!」

不 不要生氣。雖然你會得到function 的結果、可能會誤以為function 也是JavaScript 定義的一種型別,但它實際上仍屬於Object的一種。 就把它想像成一種,可以被呼叫的特殊物件就好哩~
 
 

▶︎函式怎麼寫 ??

函式是 將一or 多段程式指令包裝起來,可拿來重複用
他的宣告方法有好幾種,一般的函式、箭頭函式(ES6)、立即函式... 很多很多。
之後再獨立出來寫 (不然我撐不完30天)
 
範例:

/* 函式結構 */
function cat(num1,num2){
	// 函式內容寫在大括號裡面
	return num1 * num2 ;
};

/* 呼叫函式 */
cat(1,2);                      // 1*2 得到 2
cat(2,5);                      // 10

// function : 函式
// cat : 函式名(自己命名ㄛ)
// num1,num2 : 他們是**參數**(arguments)。 
  • 參數與參數中間用逗號隔開。
  • 參數要帶幾個都不是問題,但建議不要超過五個。
     
     

▶︎參數是什麼?

簡單來說就是:會改變的東西、每次帶的數字都會不一樣的東西。

以餐廳來說,我今天要算貓貓買了10個漢堡、兔兔買了20個薯條,參數就不會是漢堡跟薯條,因為金額是固定的。
這邊的參數就會是 貓貓買的漢堡數量 & 兔兔買的薯條數量。
 
 

▶︎return 是幹嘛用的?

回傳結果用的。如果沒有 return 回傳,則預設會回傳 undefined 。

Q:可是我每次都不是到我要回傳什麼結果 QAQ
A:孩子,長大了你就會知道了。

在寫code 前可以先靜下心思考一下,我現在要做什麼,參數要設什麼,我最後想得到的結果是什麼。
不用急著寫下去~
 

// 如果沒有return 
function cat(num1,num2) {
	2*num1 + 2*num2;
}
console.log(cat(2,3));          // undefined

// 加上 return
function rabbit(num1,num2) {
	return 2*num1 + 2*num2;
}
console.log(rabbit(2,3));           // 10

 
 

▶︎function 裡面宣告的變數是區域變數

今天我們在function 的大括號中宣告一個變數,他只會存活在那個大括號裡,沒辦法在大括號外取得他的値。因為他是區域變數。
 
舉例:

function sum(num1,num2) {
  var a = 2*num1 + 2*num2;
}
console.log(a);          // Uncaught ReferenceError: a is not defined

再更清楚的講解 內層變數外層 的差異:

初學者大家都是從var 開始, ES6 之後有let 跟const 新的宣告方法,但我們先講var ~♪
 
 

▶︎變數的有效範圍 Scope

var 的 變數有效範圍 最小切分單位是 function,你剛剛是不是在內心蛤了一下?

var a = 100 ;

var cat = function(b){
	var a = 1000 ;
	return a + b
};

console.log (cat(1000));        // (°д°)?
console.log ( a );              // (°д°)?

思考一下 ~

(°д°) 3
 (°д°) 2
  (°д°) 1 . . .

console.log ( cat (1000)) = 2000 ;
console.log ( a ) = 100 ;

聰明的你應該知道為什麼了!
 
function 裡面的 var a = 1000 跟外面的 var a = 100 是"不一樣的 a "
var a = 1000 只會活在 cat 函式中
就像波利只會活在 RO 不會跑去楓之谷,你可以把 var a = 100 當作楓之谷。
 


♫ 函式範例
 
今天我要確認客人消費金額有沒有達到VIP門檻200
這個函式的目的為「確認客人的VIP門檻」。

var VIPTotal = 200;
var hamburger = 50;
var fries = 30;

function isVIPfunction(myName,hamNum,friedNum){
  var total = hamburger*hamNum + fries*friedNum ;
  var checkVIP = total >= VIPTotal ;
  return myName + ": 消費金額 NT."+ total + ",VIP結果為" + checkVIP
}
console.log(isVIPfunction('貓貓',100,200));
                                    // "貓貓: 消費金額 NT.11000, VIP結果為 true"
console.log(isVIPfunction('兔兔',2,0));
                                    // "兔兔: 消費金額 NT.100, VIP結果為 false"

 
  
上面這個範例就是結合我們這7天的知識,
就能寫出的一個 很簡易的計算函式 (U 'ᴗ' U)
 
讓我們繼續累積知識,寫出更多厲害的東西8 !
今天先到這邊~ じゃあね〜(U 'ᴗ' U)♫

 
 


♫ SONYKO的 前端日文小教室 (U 'ᴗ' U)♫

今天新增了 day 1 ~ 3 和 day7 的日文單字發音音檔
有需要知道發音讀法的朋友可以聽聽看!

那今天講到函式,我們來講函式相關的日文。

No. 日本語 平仮名 中・英 羅馬拼音
1 関数 かんすう 函式 Kan Suu
2 呼び出す よびだす 呼叫 YoBiDaSu
3 スコープ すこーぷ 作用域 scope SuCo~Pu
4 引数 ひきすう 參數 HiKiSuu
5 表示 ひょうじ 顯示 Hyou Ji

 
附上音檔


上一篇
七日目:JavaScript if...elseノ章
下一篇
九日目:JavaScript switchノ章
系列文
JavaScript初心者ノ研究日記。30

1 則留言

0
隱士者
iT邦新手 5 級 ‧ 2020-09-22 08:42:32

好專業!!!!!!!! 30天一次學到JS跟日文好划算

是你不嫌棄~~~~ (U 'ᴗ' U)
日文上有問題都可以留言問我~~~~

我要留言

立即登入留言