函數是計算機程序的主要部分之一。它們是 JavaScript 的基本構建塊之一并且被廣泛使用。在本文中,我們將討論函數的定義以及它們?yōu)楹稳绱酥匾?。我還將向您展示如何開始使用 JavaScript 編寫函數。
讓我們開始學習吧!
JavaScript 中的函數是什么?
函數是一個代碼塊,它封裝了一個獨立的、自包含的行為,供計算機執(zhí)行。
函數是一組有組織的指令,它們對應于用戶想要在他們的程序中實現的特定任務或特定功能,以實現單個所需的結果。
函數內的代碼僅在需要時運行,即僅在調用時運行。
函數是編程中一個重要且有用的部分,因為它們創(chuàng)建了可重用的代碼。
無需在程序的不同部分復制、粘貼和重復相同的代碼,您可以使用函數僅在一處編寫該代碼。然后,您可以在需要時反復使用它。
當您想對程序進行更改或調試并嘗試修復錯誤時,這也很有幫助。
無需尋找代碼可能位于的不同部分,您只需查看一個使代碼更具可讀性的特定位置。
如何在 JavaScript 中聲明函數
在 JavaScript 中創(chuàng)建函數的一般語法如下所示:
function name(parameter1,parameter2,...) {
// the code statements to be executed
}
讓我們分解一下:
- 你用function關鍵字聲明一個函數。
- 接下來,您為該函數指定一個您選擇的名稱。JavaScript 中的函數名稱區(qū)分大小寫,約定和最佳實踐是使用駝峰命名法。
- 函數名稱后跟一組左括號和右括號。
函數可以通過輸入來接收數據。這些輸入括在括號中,稱為參數。
參數用作值的局部占位符變量,這些值將在調用函數時作為輸入傳遞到函數中。它們完全是可選的,如果有多個,則用逗號分隔它們。
- 最后是花括號,在它們內部是函數的主體以及在調用函數時要執(zhí)行的代碼語句。這是處理函數輸入的地方。
如何在 JavaScript 中聲明和調用一個簡單的函數
function greeting() {
console.log('Hello World!');
}
上面,我們創(chuàng)建了一個名為greeting的函數。
這個功能是一個非?;镜墓δ埽墓δ芊浅我弧K唤邮苋魏屋斎?,唯一執(zhí)行的事件就是將Hello World!打印到控制臺。
定義一個函數本身并不會在函數體內運行代碼。如果我們想要看到運行結果,必須調用該函數。這也稱為函數調用。
要調用不接受輸入的函數,只需編寫函數名稱,后跟括號和分號。
greeting();
//output
//Hello World!
現在,您只需多次調用該函數本身即可多次重用該函數。這有助于避免重復代碼:
greeting();
greeting();
greeting();
//output
// Hello World!
// Hello World!
// Hello World!
如何在 JavaScript 中聲明和調用帶參數的函數
我們可以修改前面的示例以獲取輸入。如前所述,我們將使用參數執(zhí)行此操作。
參數是您在聲明函數時傳遞給函數的值。
function greeting(name) {
console.log('Hello ' + name + ' !' );
}
命名的greeting函數現在接受一個參數name。在函數中將hello字符串使用+與name 和末尾的感嘆號連接 。
調用接受參數的函數時,需要傳入參數。
參數是您在調用函數時提供的值,它們對應于在函數的聲明行中傳遞的參數。
例如:
greeting('Jenny');
//Output
// Hello Jenny !
參數是值Jenny,您可以將其視為name = 'Jenny'。name,參數,是占位符變量,Jenny是調用函數時傳入的值。
函數可以接受多個參數,也可以將數據返回給程序的用戶:
function addNums(num1,num2) {
return num1 + num2;
}
上面的代碼創(chuàng)建了一個名為addNums的函數,它接受兩個參數 num1和num2,用逗號分隔。
與函數輸入的方式相同,它們也輸出一個值
該函數將num1和 num2的和作為其輸出返回。這意味著它處理這兩個參數,執(zhí)行請求的計算,并將最終值作為結果返回給用戶。
調用函數時,必須傳入兩個參數,因為它接受兩個參數:
addNums(10,20);
//Output
// 30
// think of it as num1 = 10 and num2 = 20
每次調用該函數時,您都可以傳入不同的參數:
addNums(2,2);
// 4
addNums(3,15);
//18
JavaScript 函數中的變量范圍
變量范圍是指變量對程序不同部分的可見性。
在函數塊外部和之前定義的變量具有全局作用域,可以從函數內部訪問:
const num = 7;
function myFunc() {
console.log(num);
}
//Access the variable with a global scope from anywhere in the program:
console.log(num);
//Output
//7
//Call the function with the variable with global scope
myFunc();
//Output
// 7
但是,如果該變量是在函數內部定義的,它將具有局部作用域,并且僅在定義它的函數中受到限制和可見。
您無法從函數外部訪問它:
function myFunc() {
const num = 7;
console.log(num);
}
// Try to access the variable with local scope from outside the function scope:
console.log(num);
//Otput:
//Uncaught ReferenceError: num is not defined
//Call the function with the variable defined inside the function:
myFunc();
//Ouput
//7
函數表達式
您還可以使用表達式創(chuàng)建函數。
這些函數是在表達式中創(chuàng)建的,而不是像您目前看到的那樣使用函數聲明創(chuàng)建。
const name = function(firstName) {
return 'Hello ' + firstName ;
}
在這里,我們使用變量name來存儲函數。
要調用該函數,您可以像這樣使用變量名:
console.log(name('Jenny'));
//Output
//"Hello Jenny"
這種類型的函數也稱為匿名函數,因為它們不需要名稱。
下面列出了命名函數和匿名函數之間的區(qū)別:
//named
function name(firstName) {
console.log('Hello ' + firstName);
}
name('Jenny');
//anonymous
const name = function(firstName) {
return 'Hello ' + firstName ;
}
console.log(name('Jenny'));
匿名函數中的變量也可以用作其他變量的值:
const name = function(firstName) {
return 'Hello ' + firstName ;
}
const myName = name('Timmy');
console.log(myName);
//Ouput
//"Hello Timmy"