如何在 TypeScript 中使用 Lambda 表示式?


Lambda 表示式提供了一種簡潔且富有表現力的方式來定義 TypeScript 中的函式,並且用途廣泛,可以作為類方法、物件屬性以及高階函式中的回撥函式使用。本教程旨在深入探討 Lambda 表示式的語法,突出其相對於傳統函式的優勢,並提供有關如何在 TypeScript 中有效使用 Lambda 表示式的指導。

什麼是 Lambda 表示式?

Lambda 表示式,通常稱為箭頭函式,最早在 ECMAScript 6 中引入,並在現代 JavaScript 和 TypeScript 程式碼中得到廣泛使用。這些表示式提供了一種簡潔的語法來定義這兩種語言中的函式。儘管與傳統的 JavaScript 函式類似,但它們也有一些明顯的區別。

語法

這是在 TypeScript 中宣告 Lambda 表示式/箭頭函式的基本語法:

(parameter1: type, parameter2: type, ...) => expression

函式的引數由"parameter1""parameter2"等表示,它們各自的資料型別由"type"關鍵字指定。函式體可以是單個表示式或用花括號括起來的語句塊。在前一種情況下,當呼叫函式時,表示式會被計算並返回。

當 Lambda 函式定義中只有一個引數時,可以省略括號。以下是一個示例:

parameter1: type => expression;

此 Lambda 表示式接受一個引數,返回的值表示式可以是單個值或用花括號括起來的語句塊。

在 TypeScript 中使用 Lambda 表示式

在 TypeScript 中使用 Lambda 表示式是一個簡單的過程 - 我們只需使用 "const" 或 "let" 關鍵字宣告一個變數,然後使用 Lambda 表示式的語法。

示例 1

Lambda 表示式允許我們定義傳統函式並透過使用變數名並傳入相關引數來呼叫它們。這是一個接受三個型別為"number"的引數的"multiply"函式的示例:

// traditional function declaration
function multiplyTraditional(x: number, y: number, z: number): number {
   return x * y * z;
}
// lambda expression or arrow function declaration
const multiplyLambda = (x: number, y: number, z: number): number => x * y *z;
console.log(`The output of multiplyTraditional function is: ${multiplyTraditional(2, 2, 5)}`);
console.log(`The output of multiplyLambda function is: ${multiplyLambda(2, 2, 5)}`);

編譯後,它將生成以下 JavaScript 程式碼:

// traditional function declaration
function multiplyTraditional(x, y, z) {
   return x * y * z;
}
// lambda expression or arrow function declaration
var multiplyLambda = function (x, y, z) { return x * y * z; };
console.log("The output of multiplyTraditional function is: ".concat(multiplyTraditional(2, 2, 5)));
console.log("The output of multiplyLambda function is: ".concat(multiplyLambda(2, 2, 5)));

輸出

以上程式碼將產生以下輸出:

The output of multiplyTraditional function is: 20
The output of multiplyLambda function is: 20

示例 2

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}`);

以下 Lambda 表示式接受一個引數並返回其平方。透過使用"map"方法將此表示式應用於陣列中的每個元素,會生成一個包含平方數的新陣列。

編譯後,它將生成以下 JavaScript 程式碼:

var numbers = [1, 2, 3, 4, 5];
var squaredNumbers = numbers.map(function (x) { return x * x; });
console.log("Original array: ".concat(numbers));
console.log("Squared array: ".concat(squaredNumbers));

輸出

以上程式碼將產生以下輸出:

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

示例 3

Lambda 表示式可以在 TypeScript 中用作類方法或物件屬性。下面是一個包含作為 Lambda 表示式組成的函式的類的示例:

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

在此示例中,add方法(它是Calculator類的屬性)被定義為 Lambda 表示式。

編譯後,它將生成以下 JavaScript 程式碼:

var Calculator = /** @class */ (function () {
   function Calculator() {
      this.add = function (x, y, z) { return x + y + z; };
   }
   return Calculator;
}());
var objec = new Calculator();
console.log("The result is: ".concat(objec.add(4, 3, 2)));

輸出

以上程式碼將產生以下輸出:

The result is: 9

示例 4

高階函式(接受一個或多個函式作為引數和/或返回一個函式作為結果的函式)可以使用 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); // 30
console.log(result1);
const result2 = applyOp(10, 20, (a, b) => a * b); // 200
console.log(result2);

考慮以下示例:我們將兩個數字和一個函式傳遞給"applyOp"函式。此函式返回傳遞的函式的結果,該函式對兩個數字引數進行操作。

編譯後,它將生成以下 JavaScript 程式碼:

var applyOp = function (x, y, operation) {
   return operation(x, y);
};
var result1 = applyOp(10, 20, function (a, b) { return a + b; }); // 30
console.log(result1);
var result2 = applyOp(10, 20, function (a, b) { return a * b; }); // 200
console.log(result2);

輸出

以上程式碼將產生以下輸出:

30
200

示例 5

TypeScript 中的 Lambda 表示式具有詞法作用域並充當閉包,這意味著它們可以訪問與 Lambda 表示式相同的範圍內定義的變數。一旦定義,Lambda 表示式就會捕獲作用域中任何變數的值,並在以後執行時應用這些值。

這是一個演示相同的示例。

function declareCounter() {
   let count = 0;
   return () => {
      count++;
      console.log(`Current count is ${count}`);
   };
}

const counter = declareCounter();
counter();  // Current count is 1
counter(); // Current count is 2

以下示例中的"declareCounter"函式返回一個 Lambda 表示式,每次呼叫該表示式時都會遞增並記錄"count"變數。"count"變數是在與 Lambda 表示式相同的範圍內定義的,使 Lambda 表示式能夠訪問其值並更新它。

透過呼叫"counter"函式兩次,當前計數將記錄兩次,從 1 開始,每次執行 Lambda 表示式時遞增 1。

編譯後,它將生成與上面相同的 JavaScript 程式碼。

輸出

JavaScript 程式碼將產生以下輸出:

Current count is 1
Current count is 2

使用 TypeScript 中的 Lambda 表示式的優勢

與傳統函式相比,Lambda 表示式具有多種優勢:

  • 簡潔性 - 透過提供更緊湊的語法,Lambda 表示式允許我們編寫更易於閱讀和理解的函式。

  • 清晰度 - 當用作高階函式(如 map 或 filter)中的回撥函式時,Lambda 表示式可以使函式的目的更加明顯。

  • 效能 - 由於其簡化的語法,Lambda 表示式有時可能比傳統函式更快,因為它們可以由 JavaScript 引擎進行最佳化。

  • 作用域 - Lambda 表示式具有詞法作用域,使它們能夠訪問周圍作用域中的變數,從而導致強大的程式設計技術,如柯里化和記憶化。

結論

TypeScript 中的 Lambda 表示式提供了多種優勢,例如清晰度、簡潔性、作用域和效能。它們可以用作類方法、物件屬性以及高階函式中的回撥函式。透過使用簡潔的語法和詞法作用域,您可以建立更具表現力和模組化的程式碼。但是,隨著 Lambda 表示式變得越來越複雜,它們可能變得難以閱讀,在這種情況下,傳統函式可能成為更好的選擇。然而,總的來說,Lambda 表示式提高了程式碼的可讀性和可維護性。

更新於: 2023年9月4日

6K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告