🙂
JavaScript - 程式設計
  • JavaScript - 程式設計
  • 1. 簡介
    • 1.1 講者簡介
    • 1.2 課程簡介
    • 1.3 開發工具簡介
    • 1.4 第一個 JavaScript
  • 2. 網站技術簡介
    • 2.1 網站前端技術
    • 2.2 網站後端技術
    • 2.3 JavaScript 簡介
  • 3. JavaScript程式語言
    • 3.1 套用 JavaScript
    • 3.2 註解(Comment)
    • 3.3 變數(Variable)
    • 3.4 資料型態(Data Types)
    • 3.5 Strict 模式
    • 3.6 運算子(Operator)
    • 3.7 字串(String)
    • 3.8 數值(Number)
    • 3.9 陣列(Array)
    • 3.10 物件(Object)
    • 3.11 條件式(Conditional)
    • 3.12 迴圈(Loop)
    • 3.13 函式(Function)
    • 3.14 類別(Class)
    • 3.15 傳值呼叫、傳址呼叫
    • 3.16 變數可視範圍(scope)
    • 3.17 錯誤補捉(Errors)
    • 3.18 資料格式
  • 4. JavaScript常用函式及主題
    • 4.1 JSON
    • 4.2 時間間隔執行
    • 4.3 數學(Math)
    • 4.4 日期時間(Date)
    • 4.5 陣列迭代(Iteration)
    • 4.6 陣列排序(Sort)
    • 4.7 正規表達式(Regular Expression)
    • 4.8 效能測試
    • 4.9 this 關鍵字
  • 5. 參考資料
Powered by GitBook
On this page
  • 具名函式(named function)
  • 函式的宣告與呼叫執行
  • 函式的參數
  • 參數預設值
  • 函式的回傳值
  • 匿名函式(Anonymous Function)
  • 迴呼函式(Callback Function)
  • IIFE 即刻調用函式
  • 具名函式的宣告
  • 匿名函式
  • IIFE 帶入參數
  • IIFE 回傳值
  • 遞迴
  • 練習1:倒數 10 秒
  • 練習2:寫一個函式,將指定文字左邊補零
  • 練習3:使用遞迴,費氏數列(Fibonacci numbers)
  1. 3. JavaScript程式語言

3.13 函式(Function)

在 javascript/practice 資料夾下,建立 function.html 來練習。

具名函式(named function)

函式的宣告與呼叫執行

function my_function(){
  console.log("執行到這裡")
}
my_function(); // 執行到這裡

第 1 行:以 function 開頭,再空一格,輸入自訂的函式名稱,緊接著小括號、大括號。

第 2 行:該函式的被呼叫時,所要執行的程式,包在大括號裡。

第 3 行:函式的結束大括號。

第 4 行:函式的呼叫執行,函式名稱+小括號。

函式的參數

小括號裡,可以放參數。也就是函式在執行時,可以不帶參數(上例),或帶1個以上的參數,以逗號做區隔。

function add(a, b){
  console.log(a + " + " + b + " = " + (a + b));
}

add(2, 3);  // 2 + 3 = 5
add(8, 10); // 8 + 10 = 18


// 參數不足時,會有 undefined 的狀況,此例的 b 就是 undefined
add(8); // 8 + undefined = NaN

參數預設值

看以下例子,瞭解參數有預設值的寫法:

function add(a = 1, b = 2){ // a 的預設值是 1;b 的預設值是 2
  console.log(a + " + " + b + " = " + (a + b));
}

add();      // 1 + 2 = 3
add(8);     // 8 + 2 = 10
add(8, 10); // 8 + 10 = 18

函式的回傳值

使用關鍵字 return 將結果回傳,同時也結束函式的執行:

function subtraction(a, b){
  var result = a - b;
  return result; // 回傳結果,並結束函式的執行
  
  console.log("會執行到這行程式嗎"); // 不會
}

var my_num = subtraction(5, 2);
console.log("結果等於 " + my_num);

/*
結果等於 3
*/

匿名函式(Anonymous Function)

函式沒有名稱,就是匿名函式,通常這種情況,可以將匿名函式存在某個變數中:

var my_function = function(a, b){
  var result = a + b;
  return result;
};

var function_reuslt = my_function(5, 2);
console.log("執行結果 " + function_reuslt);

/*
執行結果 7
*/

迴呼函式(Callback Function)

概念:某件事情執行完之後,執行另外一件事。

執行這段程式,試著解讀:

function add(a, b, cb){
  let sum = a + b;
  return cb(sum, 2);
}
function division(sum, denominator){
  let avg = sum / denominator;
  return avg;
}

let result = add(4, 8, division);
console.log(result); // 6

換個寫法,以下的 匿名函式 就是 Callback Function:

function add(a, b, cb){
  let sum = a + b;
  return cb(sum, 2);
}

// 第三個參數 function,就是一個 callback function
let result = add(6, 8, function(sum, denominator){
  let avg = sum / denominator;
  return avg;
});

console.log(result); // 7

IIFE 即刻調用函式

IIFE = Immediately Invoked Function Expression

是一個定義完馬上就執行的函式。

具名函式的宣告

function my_func(){
  console.log("執行這裡");
}

如果希望這個函式宣告完之後,馬上執行,且也只希望執行一次,也就是 IIFE,按照以下兩個步驟:

  1. 用小括號包起來,表示避免函式的宣告。

  2. 緊接著再加上小括號,表示要執行該函式。

(function my_func(){
  console.log("執行這裡");
})();
my_func(); // 這裡可以繼續呼叫嗎?不行的,因為不存在該函式。

匿名函式

接續上例,也可以將函式的名稱移除,變成如下:

(function(){
  console.log("執行這裡");
})();

/*
執行這裡
*/

IIFE 帶入參數

(function(a, b){
  console.log(a + " + " + b + " = " + (a + b));
})(100, 200);

/*
100 + 200 = 300
*/

IIFE 回傳值

var result = (function(a, b){
  return (a + " + " + b + " = " + (a + b));
})(50, 80);

console.log(result);

/*
50 + 80 = 130
*/

遞迴

在函式的內部呼叫自己本身。例:

function test(){
  test();
}

請做以下的練習一瞭解遞迴。

練習1:倒數 10 秒

寫一個函式叫 count 函式,執行它的時候,帶一個秒數參數(假設是 10),在 console 中顯示如下畫面:

提示,先介紹 setTimeout 寫法:

setTimeout(function(){
  // 其它原始碼
}, 1000); // 1 秒之後,執行 function 裡的程式

從這裡開始寫:

function count(i){

  setTimeout(function(){
    
  }, 1000);
  
}
count(10);

參考作法:

練習2:寫一個函式,將指定文字左邊補零

寫一個函式叫 strpad(),帶兩個參數。

  • 第一個參數:任何正整數。

  • 第二個參數:指定位數,若不足的話,左邊補 0。

部份原始碼如下:

function str_pad(my_num, digits){
  // 寫在這裡
}

var result = str_pad(9, 2);
console.log(result); // 09

var result2 = str_pad(7, 3);
console.log(result2); // 007

參考作法:

累積自己的函式庫 my_funcs.js。

練習3:使用遞迴,費氏數列(Fibonacci numbers)

「費氏數列」:0、1、1、2、3、5、8、13、21、34……依此類推。

規則是:

  • 第 0 項 是 0。

  • 第 1 項是 1。

  • 第 2 項開始,是前兩項的相加。

請寫一個 fibonacci() 函式,代入一個參數,代表第幾項(從 0 開始算),就可以得知該項的數值。然後也在 console 中顯示 fibonacci 函式被執行了幾次。

部份原始碼:

var i = 0;
function fibonacci(n){
  // 程式碼寫在這
}

console.log(fibonacci(0) + "。fibonacci 函式執行了 " + i + " 次");

上述原始碼執行到第 6 行時,在 console 中,應輸出如下訊息:

執行 fibonacci(0) → 得到 「0;fibonacci 函式執行了 1 次。」 執行 fibonacci(1) → 得到 「1;fibonacci 函式執行了 1 次。」 執行 fibonacci(2) → 得到 「1,fibonacci 函式執行了 3 次。」 執行 fibonacci(3) → 得到 「2,fibonacci 函式執行了 5 次。」 執行 fibonacci(4) → 得到 「3,fibonacci 函式執行了 9 次。」 執行 fibonacci(5) → 得到 「5,fibonacci 函式執行了 15 次。」 執行 fibonacci(6) → 得到 「8,fibonacci 函式執行了 25 次。」 依此類推。

提示:

fibonacci(0) 及 fibonacci(1):

fibonacci(2):

fibonacci(3):

fibonacci(4):

參考作法:

累積自己的函式庫 my_funcs.js。

Previous3.12 迴圈(Loop)Next3.14 類別(Class)

Last updated 3 years ago