鴻蒙TypeScript入門學習第8天：【TypeScript 函數(shù)】

1、TypeScript 函數(shù)

函數(shù)是一組一起執(zhí)行一個任務的語句。

您可以把代碼劃分到不同的函數(shù)中。如何劃分代碼到不同的函數(shù)中是由您來決定的，但在邏輯上，劃分通常是根據(jù)每個函數(shù)執(zhí)行一個特定的任務來進行的。

函數(shù)聲明告訴編譯器函數(shù)的名稱、返回類型和參數(shù)。函數(shù)定義提供了函數(shù)的實際主體。

2、函數(shù)定義

函數(shù)就是包裹在花括號中的代碼塊，前面使用了關(guān)鍵詞 function：

語法格式如下所示：

function function_name()
{
    // 執(zhí)行代碼
}

實例

TypeScript

function () { // 函數(shù)定義 console.log("調(diào)用函數(shù)") }

3、調(diào)用函數(shù)

函數(shù)只有通過調(diào)用才可以執(zhí)行函數(shù)內(nèi)的代碼。

語法格式如下所示：

function_name()

實例

TypeScript

function test() { // 函數(shù)定義 console.log("調(diào)用函數(shù)") } test() // 調(diào)用函數(shù)

4、函數(shù)返回值

有時，我們會希望函數(shù)將執(zhí)行的結(jié)果返回到調(diào)用它的地方。

通過使用 return 語句就可以實現(xiàn)。

在使用 return 語句時，函數(shù)會停止執(zhí)行，并返回指定的值。

語法格式如下所示：

function function_name():return_type { 
    // 語句
    return value; 
}

• return_type 是返回值的類型。
• return 關(guān)鍵詞后跟著要返回的結(jié)果。
• 一般情況下，一個函數(shù)只有一個 return 語句。
• 返回值的類型需要與函數(shù)定義的返回類型(return_type)一致。

實例

TypeScript

// 函數(shù)定義
function greet():string { // 返回一個字符串
    return "Hello World" 
} 
 
function caller() { 
    var msg = greet() // 調(diào)用 greet() 函數(shù) 
    console.log(msg) 
} 
 
// 調(diào)用函數(shù)
caller()

• 實例中定義了函數(shù) greet() ，返回值的類型為 string。
• greet() 函數(shù)通過 return 語句返回給調(diào)用它的地方，即變量 msg，之后輸出該返回值。。

編譯以上代碼，得到以下 JavaScript 代碼：

JavaScript

// 函數(shù)定義
function greet() {
    return "Hello World";
}
function caller() {
    var msg = greet(); // 調(diào)用 greet() 函數(shù) 
    console.log(msg);
}
// 調(diào)用函數(shù)
caller();

5、帶參數(shù)函數(shù)

在調(diào)用函數(shù)時，您可以向其傳遞值，這些值被稱為參數(shù)。

這些參數(shù)可以在函數(shù)中使用。

您可以向函數(shù)發(fā)送多個參數(shù)，每個參數(shù)使用逗號 , 分隔：

語法格式如下所示：

function func_name( param1 [:datatype], param2 [:datatype]) {   
}

• param1、param2 為參數(shù)名。
• datatype 為參數(shù)類型。

實例

TypeScript

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

• 實例中定義了函數(shù) add() ，返回值的類型為 number。
• add() 函數(shù)中定義了兩個 number 類型的參數(shù)，函數(shù)內(nèi)將兩個參數(shù)相加并返回。

編譯以上代碼，得到以下 JavaScript 代碼：

JavaScript

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

輸出結(jié)果為：

3

6、可選參數(shù)和默認參數(shù)

可選參數(shù)

在 TypeScript 函數(shù)里，如果我們定義了參數(shù)，則我們必須傳入這些參數(shù)，除非將這些參數(shù)設置為可選，可選參數(shù)使用問號標識 ？。

實例

TypeScript

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

以下實例，我們將 lastName 設置為可選參數(shù)：

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.");  // 錯誤，參數(shù)太多了
let result3 = buildName("Bob", "Adams");  // 正確

可選參數(shù)必須跟在必需參數(shù)后面。 如果上例我們想讓 firstName 是可選的，lastName 必選，那么就要調(diào)整它們的位置，把 firstName 放在后面。

如果都是可選參數(shù)就沒關(guān)系。

默認參數(shù)

我們也可以設置參數(shù)的默認值，這樣在調(diào)用函數(shù)的時候，如果不傳入該參數(shù)的值，則使用默認參數(shù)，語法格式為：

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

注意：參數(shù)不能同時設置為可選和默認。

實例

以下實例函數(shù)的參數(shù) rate 設置了默認值為 0.50，調(diào)用該函數(shù)時如果未傳入?yún)?shù)則使用該默認值：

TypeScript

function calculate_discount(price:number,rate:number = 0.50) { 
    var discount = price * rate; 
    console.log("計算結(jié)果: ",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("計算結(jié)果: ", discount);
}
calculate_discount(1000);
calculate_discount(1000, 0.30);

輸出結(jié)果為：

計算結(jié)果:  500
計算結(jié)果:  300

7、剩余參數(shù)

有一種情況，我們不知道要向函數(shù)傳入多少個參數(shù)，這時候我們就可以使用剩余參數(shù)來定義。

剩余參數(shù)語法允許我們將一個不確定數(shù)量的參數(shù)作為一個數(shù)組傳入。

TypeScript

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

函數(shù)的最后一個命名參數(shù) restOfName 以 ... 為前綴，它將成為一個由剩余參數(shù)組成的數(shù)組，索引值從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

8、匿名函數(shù)

匿名函數(shù)是一個沒有函數(shù)名的函數(shù)。

匿名函數(shù)在程序運行時動態(tài)聲明，除了沒有函數(shù)名外，其他的與標準函數(shù)一樣。

我們可以將匿名函數(shù)賦值給一個變量，這種表達式就成為函數(shù)表達式。

語法格式如下：

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

實例

不帶參數(shù)匿名函數(shù)：

TypeScript

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

編譯以上代碼，得到以下 JavaScript 代碼：

JavaScript

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

輸出結(jié)果為：

hello world

帶參數(shù)匿名函數(shù)：

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

輸出結(jié)果為：

24

匿名函數(shù)自調(diào)用

匿名函數(shù)自調(diào)用在函數(shù)后使用 () 即可：

TypeScript

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

編譯以上代碼，得到以下 JavaScript 代碼：

JavaScript

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

輸出結(jié)果為：

Hello!!

9、構(gòu)造函數(shù)

TypeScript 也支持使用 JavaScript 內(nèi)置的構(gòu)造函數(shù) Function() 來定義函數(shù)：

語法格式如下：

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

參數(shù)說明：

• arg1, arg2, ... argN ：參數(shù)列表。
• functionBody ：一個含有包括函數(shù)定義的 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);

輸出結(jié)果為：

12

10、遞歸函數(shù)

遞歸函數(shù)即在函數(shù)內(nèi)調(diào)用函數(shù)本身。

舉個例子：

從前有座山，山里有座廟，廟里有個老和尚，正在給小和尚講故事呢！故事是什么呢？"從前有座山，山里有座廟，廟里有個老和尚，正在給小和尚講故事呢！故事是什么呢？'從前有座山，山里有座廟，廟里有個老和尚，正在給小和尚講故事呢！故事是什么呢？……'"

實例

TypeScript

function factorial(number) {
    if (number <= 0) {         // 停止執(zhí)行
        return 1; 
    } else {     
        return (number * factorial(number - 1));     // 調(diào)用自身
    } 
}; 
console.log(factorial(6));      // 輸出 720復制

編譯以上代碼，得到以下 JavaScript 代碼：

JavaScript

function factorial(number) {
    if (number <= 0) { // 停止執(zhí)行
        return 1;
    }
    else {
        return (number * factorial(number - 1)); // 調(diào)用自身
    }
}
;
console.log(factorial(6)); // 輸出 720

輸出結(jié)果為：

720

11、Lambda 函數(shù)

Lambda 函數(shù)也稱之為箭頭函數(shù)。

箭頭函數(shù)表達式的語法比函數(shù)表達式更短。

函數(shù)只有一行語句：

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

實例

以下實例聲明了 lambda 表達式函數(shù)，函數(shù)返回兩個數(shù)的和：

TypeScript

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

編譯以上代碼，得到以下 JavaScript 代碼：

JavaScript

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

輸出結(jié)果為：

110

函數(shù)是一個語句塊：

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

實例

以下實例聲明了 lambda 表達式函數(shù)，函數(shù)返回兩個數(shù)的和：

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

輸出結(jié)果為：

110

我們可以不指定函數(shù)的參數(shù)類型，通過函數(shù)內(nèi)來推斷參數(shù)類型:

TypeScript

var func = (x)=> { if(typeof x=="number") { console.log(x+" 是一個數(shù)字") } 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 + " 是一個數(shù)字"); } else if (typeof x == "string") { console.log(x + " 是一個字符串"); } }; func(12); func("Tom");

輸出結(jié)果為：

12 是一個數(shù)字
Tom 是一個字符串

單個參數(shù) () 是可選的：

TypeScript

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

編譯以上代碼，得到以下 JavaScript 代碼：

JavaScript

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

輸出結(jié)果為：

輸出為 12

無參數(shù)時可以設置空括號：

TypeScript

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

編譯以上代碼，得到以下 JavaScript 代碼：

JavaScript

var disp = function () { console.log("調(diào)用函數(shù)"); }; disp();

輸出結(jié)果為：

調(diào)用函數(shù)

12、函數(shù)重載

重載是方法名字相同，而參數(shù)不同，返回類型可以相同也可以不同。

每個重載的方法（或者構(gòu)造函數(shù)）都必須有一個獨一無二的參數(shù)類型列表。

參數(shù)類型不同：

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

參數(shù)數(shù)量不同：

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

參數(shù)類型順序不同：

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

如果參數(shù)類型不同，則參數(shù)類型應設置為 any 。

參數(shù)數(shù)量不同你可以將不同的參數(shù)設置為可選。

實例

以下實例定義了參數(shù)類型與參數(shù)數(shù)量不同：

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");

輸出結(jié)果為：

abc
undefined
1
xyz

審核編輯 黃宇