鴻蒙開發TypeScript語言:【函式】

烧脑猴發表於2024-04-18

函式是一組一起執行一個任務的語句。

您可以把程式碼劃分到不同的函式中。如何劃分程式碼到不同的函式中是由您來決定的,但在邏輯上,劃分通常是根據每個函式執行一個特定的任務來進行的。

函式宣告告訴編譯器函式的名稱、返回型別和引數。函式定義提供了函式的實際主體。


函式定義

函式就是包裹在花括號中的程式碼塊,前面使用了關鍵詞 function:

語法格式如下所示:

function function_name()
{
    // 執行程式碼
}

例項

TypeScript

function () {   
    // 函式定義
    console.log("呼叫函式") 
}

呼叫函式

函式只有透過呼叫才可以執行函式內的程式碼。

語法格式如下所示:

function_name()

例項

TypeScript

function test() {   // 函式定義
    console.log("呼叫函式") 
} 
test()              // 呼叫函式

函式返回值

有時,我們會希望函式將執行的結果返回到呼叫它的地方。

透過使用 return 語句就可以實現。

在使用 return 語句時,函式會停止執行,並返回指定的值。

語法格式如下所示:

function function_name():return_type { 
    // 語句
    return value; 
}
  • return_type 是返回值的型別。
  • return 關鍵詞後跟著要返回的結果。
  • 一般情況下,一個函式只有一個 return 語句。
  • 返回值的型別需要與函式定義的返回型別(return_type)一致。

例項

TypeScript

// 函式定義
function greet():string { // 返回一個字串
    return "Hello World" 
} 
 
function caller() { 
    var msg = greet() // 呼叫 greet() 函式 
    console.log(msg) 
} 
 
// 呼叫函式
caller()
  • 例項中定義了函式 greet() ,返回值的型別為 string。
  • greet() 函式透過 return 語句返回給呼叫它的地方,即變數 msg,之後輸出該返回值。。

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

// 函式定義
function greet() {
    return "Hello World";
}
function caller() {
    var msg = greet(); // 呼叫 greet() 函式 
    console.log(msg);
}
// 呼叫函式
caller();

帶引數函式

在呼叫函式時,您可以向其傳遞值,這些值被稱為引數。

這些引數可以在函式中使用。

您可以向函式傳送多個引數,每個引數使用逗號 , 分隔:

語法格式如下所示:

function func_name( param1 [:datatype], param2 [:datatype]) {   
}
  • param1、param2 為引數名。
  • datatype 為引數型別。

例項

TypeScript

function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1,2))
  • 例項中定義了函式 add() ,返回值的型別為 number。
  • add() 函式中定義了兩個 number 型別的引數,函式內將兩個引數相加並返回。

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

function add(x, y) {
    return x + y;
}
console.log(add(1, 2));

輸出結果為:

3

可選引數和預設引數

可選引數

在 TypeScript 函式里,如果我們定義了引數,則我們必須傳入這些引數,除非將這些引數設定為可選,可選引數使用問號標識 ?。

例項

TypeScript

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
 
let result1 = buildName("Bob");                  // 錯誤,缺少引數
let result2 = buildName("Bob", "Adams", "Sr.");  // 錯誤,引數太多了
let result3 = buildName("Bob", "Adams");         // 正確

以下例項,我們將 lastName 設定為可選引數:

TypeScript

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
 
let result1 = buildName("Bob");  // 正確
let result2 = buildName("Bob", "Adams", "Sr.");  // 錯誤,引數太多了
let result3 = buildName("Bob", "Adams");  // 正確

可選引數必須跟在必需引數後面。 如果上例我們想讓 firstName 是可選的,lastName 必選,那麼就要調整它們的位置,把 firstName 放在後面。

如果都是可選引數就沒關係。

預設引數

我們也可以設定引數的預設值,這樣在呼叫函式的時候,如果不傳入該引數的值,則使用預設引數,語法格式為:

function function_name(param1[:type],param2[:type] = default_value) { 
}

注意:引數不能同時設定為可選和預設。

例項

以下例項函式的引數 rate 設定了預設值為 0.50,呼叫該函式時如果未傳入引數則使用該預設值:

TypeScript

function calculate_discount(price:number,rate:number = 0.50) { 
    var discount = price * rate; 
    console.log("計算結果: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

function calculate_discount(price, rate) {
    if (rate === void 0) { rate = 0.50; }
    var discount = price * rate;
    console.log("計算結果: ", discount);
}
calculate_discount(1000);
calculate_discount(1000, 0.30);

輸出結果為:

計算結果:  500
計算結果:  300

剩餘引數

有一種情況,我們不知道要向函式傳入多少個引數,這時候我們就可以使用剩餘引數來定義。

剩餘引數語法允許我們將一個不確定數量的引數作為一個陣列傳入。

TypeScript

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
  
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

函式的最後一個命名引數 restOfName 以 ... 為字首,它將成為一個由剩餘引數組成的陣列,索引值從0(包括)到 restOfName.length(不包括)。

TypeScript

function addNumbers(...nums:number[]) {  
    var i;   
    var sum:number = 0; 
    
    for(i = 0;i<nums.length;i++) { 
       sum = sum + nums[i]; 
    } 
    console.log("和為:",sum) 
 } 
 addNumbers(1,2,3) 
 addNumbers(10,10,10,10,10)

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

function addNumbers() {
    var nums = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        nums[_i] = arguments[_i];
    }
    var i;
    var sum = 0;
    for (i = 0; i < nums.length; i++) {
        sum = sum + nums[i];
    }
    console.log("和為:", sum);
}
addNumbers(1, 2, 3);
addNumbers(10, 10, 10, 10, 10);

輸出結果為:

和為: 6
和為: 50

匿名函式

匿名函式是一個沒有函式名的函式。

匿名函式在程式執行時動態宣告,除了沒有函式名外,其他的與標準函式一樣。

我們可以將匿名函式賦值給一個變數,這種表示式就成為函式表示式。

語法格式如下:

var res = function( [arguments] ) { ... }

例項

不帶引數匿名函式:

TypeScript

var msg = function() { 
    return "hello world";  
} 
console.log(msg())

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

var msg = function () {
    return "hello world";
};
console.log(msg());

輸出結果為:

hello world

帶引數匿名函式:

TypeScript

var res = function(a:number,b:number) { 
    return a*b;  
}; 
console.log(res(12,2))

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

var res = function (a, b) {
    return a * b;
};
console.log(res(12, 2));

輸出結果為:

24

匿名函式自呼叫

匿名函式自呼叫在函式後使用 () 即可:

TypeScript

(function () { 
    var x = "Hello!!";   
    console.log(x)     
 })()

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

(function () { 
    var x = "Hello!!";   
    console.log(x)    
})()

輸出結果為:

Hello!!

建構函式

TypeScript 也支援使用 JavaScript 內建的建構函式 Function() 來定義函式:

語法格式如下:

var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)

引數說明:

  • arg1, arg2, ... argN:引數列表。
  • functionBody:一個含有包括函式定義的 JavaScript 語句的字串。

例項

TypeScript

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

輸出結果為:

12

遞迴函式

遞迴函式即在函式內呼叫函式本身。

舉個例子:
從前有座山,山裡有座廟,廟裡有個老和尚,正在給小和尚講故事呢!故事是什麼呢?"從前有座山,山裡有座廟,廟裡有個老和尚,正在給小和尚講故事呢!故事是什麼呢?'從前有座山,山裡有座廟,廟裡有個老和尚,正在給小和尚講故事呢!故事是什麼呢?……'"

例項

TypeScript

function factorial(number) {
    if (number <= 0) {         // 停止執行
        return 1; 
    } else {     
        return (number * factorial(number - 1));     // 呼叫自身
    } 
}; 
console.log(factorial(6));      // 輸出 720

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

function factorial(number) {
    if (number <= 0) { // 停止執行
        return 1;
    }
    else {
        return (number * factorial(number - 1)); // 呼叫自身
    }
}
;
console.log(factorial(6)); // 輸出 720

輸出結果為:

720

Lambda 函式

Lambda 函式也稱之為箭頭函式。

箭頭函式表示式的語法比函式表示式更短。

函式只有一行語句:

( [param1, param2,…param n] )=>statement;

例項

以下例項宣告瞭 lambda 表示式函式,函式返回兩個數的和:

TypeScript

var foo = (x:number)=>10 + x 
console.log(foo(100))      //輸出結果為 110

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

var foo = function (x) { return 10 + x; };
console.log(foo(100)); //輸出結果為 110

輸出結果為:

110

函式是一個語句塊:

( [param1, param2,…param n] )=> {
 
    // 程式碼塊
}

例項

以下例項宣告瞭 lambda 表示式函式,函式返回兩個數的和:

TypeScript

var foo = (x:number)=> {    
    x = 10 + x 
    console.log(x)  
} 
foo(100)

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

var foo = function (x) {
    x = 10 + x;
    console.log(x);
};
foo(100);

輸出結果為:

110

我們可以不指定函式的引數型別,透過函式內來推斷引數型別:

TypeScript

var func = (x)=> { 
    if(typeof x=="number") { 
        console.log(x+" 是一個數字") 
    } else if(typeof x=="string") { 
        console.log(x+" 是一個字串") 
    }  
} 
func(12) 
func("Tom")

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

var func = function (x) {
    if (typeof x == "number") {
        console.log(x + " 是一個數字");
    }
    else if (typeof x == "string") {
        console.log(x + " 是一個字串");
    }
};
func(12);
func("Tom");

輸出結果為:

12 是一個數字
Tom 是一個字串

單個引數 () 是可選的:

TypeScript

var display = x => { 
    console.log("輸出為 "+x) 
} 
display(12)

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

var display = function (x) {
    console.log("輸出為 " + x);
};
display(12);

輸出結果為:

輸出為 12

無引數時可以設定空括號:

TypeScript

var disp =()=> { 
    console.log("Function invoked"); 
} 
disp();

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

var disp = function () {
    console.log("呼叫函式");
};
disp();

輸出結果為:

呼叫函式

函式過載

過載是方法名字相同,而引數不同,返回型別可以相同也可以不同。

每個過載的方法(或者建構函式)都必須有一個獨一無二的引數型別列表。

引數型別不同:

function disp(string):void; 
function disp(number):void;

引數數量不同:

function disp(n1:number):void; 
function disp(x:number,y:number):void;

引數型別順序不同:

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

如果引數型別不同,則引數型別應設定為 any

引數數量不同你可以將不同的引數設定為可選。

例項

以下例項定義了引數型別與引數數量不同:

TypeScript

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 
 
function disp(x:any,y?:any):void { 
    console.log(x); 
    console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

function disp(x, y) {
    console.log(x);
    console.log(y);
}
disp("abc");
disp(1, "xyz");

輸出結果為:

abc
undefined
1
xyz

相關文章