函式是一組一起執行一個任務的語句。
您可以把程式碼劃分到不同的函式中。如何劃分程式碼到不同的函式中是由您來決定的,但在邏輯上,劃分通常是根據每個函式執行一個特定的任務來進行的。
函式宣告告訴編譯器函式的名稱、返回型別和引數。函式定義提供了函式的實際主體。
函式定義
函式就是包裹在花括號中的程式碼塊,前面使用了關鍵詞 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