TypeScript - 箭頭函式

上一頁
下一頁

箭頭函式是 TypeScript 中編寫匿名函式的簡潔方式。它們在 ES6（ECMAScript 2015）中引入。與傳統的函式宣告相比，它們提供了更短、更易讀的語法。箭頭函式也稱為 lambda 函式。Lambda 指的是程式設計中的匿名函式。

語法

您可以使用胖箭頭（=>）定義箭頭函式。胖箭頭用於分隔函式引數和函式體（語句）。

(param1, param2, ..., paramN) => statement

箭頭函式有三個部分：

  • 引數 - 函式可以選擇具有引數，param1、param2、...、paramN。

  • 胖箭頭表示法/lambda 表示法（=>） - 它也稱為“轉到”運算子。

  • 語句 - 表示函式的指令集

示例

讓我們透過一些 TypeScript 中的示例來了解箭頭函式/lambda 函式：

示例：具有單個語句的箭頭函式

我們可以按如下方式編寫具有單個語句的箭頭函式：

(x: number, y: number): number => x +y;

對於單個語句，可以選擇不寫 return 關鍵字來返回值和括號（花括號）。但如果使用括號，則需要編寫 return 關鍵字才能返回值。

(x: number, y: number): number => {return x +y;}

讓我們看下面的例子：

const add = (x: number, y: number): number => x +y;
console.log(add(20,30));

編譯後，它將生成以下 JavaScript 程式碼。

const add = (x, y) => x + y;
console.log(add(20, 30));

它將產生以下結果：

50

示例：具有多個語句的箭頭函式

您可以使用花括號編寫多個語句。您還需要編寫 return 語句才能返回值。

在下面的示例中，我們定義了一個接受兩個引數並返回其乘積的箭頭函式。

const multiply = (x: number, y: number): number => {
    let res: number = x * y;
    return res;
};
console.log(multiply(5,6));

編譯後，它將生成以下 JavaScript 程式碼。

const multiply = (x, y) => {
    let res = x * y;
    return res;
};
console.log(multiply(5, 6));

它將產生以下輸出：

30

示例：沒有引數的箭頭函式

箭頭函式的引數是可選的。

在下面的示例中，我們定義了一個不帶引數並返回字串值的箭頭函式。

const greet = () => { return "Hello World!";}
console.log(greet());

編譯後，它將生成相同的 JavaScript 程式碼。

上面程式碼示例的輸出如下：

Hello World!

示例：具有單個引數的箭頭函式

以下示例顯示了一個接受單個引數並返回該引數與 10 的和的箭頭函式。

const add = (x: number): number => {return x + 10;}
console.log(add(5));

編譯後，它將生成以下 JavaScript 程式碼。

const add = (x) => { return x + 10; };
console.log(add(5));

上面程式碼示例的輸出如下：

15

示例：具有多個引數的箭頭函式

在下面的示例中，我們定義了一個接受三個引數並返回其和的箭頭函式。

let sum: number;
const add = (a: number, b: number, c: number) => {
  sum = a + b + c;
  return sum;
};
let res = add(10, 30, 45);
console.log("The result is: " + res);

編譯後，它將生成以下 JavaScript 程式碼。

let sum;
const add = (a, b, c) => {
    sum = a + b + c;
    return sum;
};
let res = add(10, 30, 45);
console.log("The result is: " + res);

上面程式碼示例的輸出如下：

The result is: 85

示例：具有預設引數的箭頭函式

在下面的示例中，我們將引數的預設值傳遞給箭頭函式。當您不傳遞相應的引數值時，這些預設值將在函式體內部使用。

const mul = (a = 10, b = 15) => a * b;
console.log("mul(5, 8) = " + mul(5, 8));
console.log("mul(6) = " + mul(6));
console.log("mul() = " + mul());

編譯後，它將生成相同的 JavaScript 程式碼。

上面程式碼示例的輸出如下：

mul(5, 8) = 40 
mul(6) = 90 
mul() = 150

箭頭函式的應用

現在讓我們討論一些 TypeScript 中箭頭函式的應用示例。

示例：箭頭函式作為其他函式中的回撥函式

箭頭函式（Lambda 表示式）也可用作函式中的回撥，例如陣列方法（例如，map、filter、reduce）。以下是一個演示它們與“map”方法一起使用的示例：

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(x => x * x);
console.log(`Original array: ${numbers}`);
console.log(`Squared array: ${squaredNumbers}`);

編譯後，它將生成相同的 JavaScript 程式碼。

上面程式碼示例的輸出如下：

Original array: 1,2,3,4,5
Squared array: 1,4,9,16,25

示例：類中的箭頭函式

箭頭函式（Lambda 表示式）可以用作 TypeScript 中的類方法或物件屬性。以下是一個包含作為 lambda 表示式組成的方法的類的示例：

class Calculator {
   add = (x: number, y: number, z: number): number => x + y + z;
}
const obj = new Calculator();
console.log(`The result is: ${obj.add(4, 3, 2)}`);

編譯後，它將生成以下 JavaScript 程式碼。

class Calculator {
    constructor() {
        this.add = (x, y, z) => x + y + z;
    }
}
const obj = new Calculator();
console.log(`The result is: ${obj.add(4, 3, 2)}`);

它將產生以下輸出：

The result is: 9

示例：實現高階函式

高階函式（接受一個或多個函式作為引數和/或返回一個函式作為結果的函式）可以使用 TypeScript 中的 lambda 表示式方便地定義。

const applyOp = (
  x: number, 
  y: number, 
  operation: (a: number, b: number) => number
) => {
   return operation(x, y);
};
const result1 = applyOp(10, 20, (a, b) => a + b);
console.log(result1);
const result2 = applyOp(10, 20, (a, b) => a * b);
console.log(result2);

編譯後，它將生成以下 JavaScript 程式碼。

const applyOp = (x, y, operation) => {
    return operation(x, y);
};
const result1 = applyOp(10, 20, (a, b) => a + b);
console.log(result1);
const result2 = applyOp(10, 20, (a, b) => a * b);
console.log(result2);

上面程式碼示例的輸出如下：

30
200

箭頭函式在編寫匿名函式方面非常有用。

列印頁面
上一頁
下一頁
廣告