一篇文章帶你了解JavaScript函數(shù)
一個JavaScript函數(shù)是一個為執(zhí)行特定任務(wù)而設(shè)計的代碼塊，JavaScript函數(shù)當(dāng)調(diào)用時被執(zhí)行。
一、函數(shù)語法
一個JavaScript函數(shù)使用function關(guān)鍵字定義，后面跟一個函數(shù)名稱，后面跟一對括號()。
函數(shù)名可以包含字母、數(shù)字、下劃線和美元符號(與變量相同的規(guī)則)。
圓括號可以包括參數(shù)名稱以逗號分隔: (parameter1, parameter2, ...)。
函數(shù)要執(zhí)行的代碼，被放置在括號內(nèi): {}。
語法：
- function name(parameter1, parameter2, parameter3) {
- code to be executed
- }
函數(shù)形式參數(shù)是函數(shù)定義中列出的名稱,實際參數(shù)是函數(shù)調(diào)用時接收的實際值。
在函數(shù)中，實際參數(shù)(形式參數(shù))表現(xiàn)為局部變量。
例：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項目</title>
- </head>
- <body>
- <h1>JavaScript 函數(shù)</h1>
- <p>調(diào)用函數(shù)完成計算，并返回結(jié)果:</p>
- <p id="demo"></p>
- <script>
- function myFunction(p1, p2) {
- return p1 * p2; /* 函數(shù)返回p1和p2的乘積*/
- }
- document.getElementById("demo").innerHTML = myFunction(4, 3);
- </script>
- </body>
- </html>
注：
在其他編程語言中，函數(shù)與過程或子程序非常相似。
1. 函數(shù)調(diào)用
當(dāng)某些情況下調(diào)用函數(shù)時，函數(shù)內(nèi)的代碼將執(zhí)行。
- //當(dāng)事件發(fā)生（例如：當(dāng)用戶單擊按鈕）。
- //當(dāng)從JavaScript代碼中調(diào)用時。
- //自動執(zhí)行 (自己調(diào)用）。
2. 函數(shù)返回
當(dāng)JavaScript達到一個return語句，函數(shù)將停止執(zhí)行。
如果從一個語句調(diào)用了函數(shù)，JavaScript將“回歸”到調(diào)用語句后繼續(xù)執(zhí)行代碼。
函數(shù)通常計算返回值. 返回值返回給調(diào)用者。
例：
- var x = myFunction(4, 3); // 函數(shù)被調(diào)用，返回值賦值給x
- function myFunction(a, b) {
- return a * b; // 函數(shù)返回a和b的乘積
- }
完整代碼：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項目</title>
- </head>
- <body>
- <h1>JavaScript 函數(shù)</h1>
- <p>此示例調(diào)用一個函數(shù)，該函數(shù)執(zhí)行計算并返回結(jié)果:</p>
- <p id="demo"></p>
- <script>
- function myFunction(a, b) {
- return a * b;
- }
- document.getElementById("demo").innerHTML = myFunction(4, 3);
- </script>
- </body>
- </html>
二、為什么使用函數(shù)?
您可以重用代碼：定義代碼一次，并多次使用它。
您可以使用同一代碼多次使用不同的參數(shù)，產(chǎn)生不同的結(jié)果。
- function toCelsius(fahrenheit) {
- return (5/9) * (fahrenheit-32);
- }
- document.getElementById("demo").innerHTML = toCelsius(77);
1. 使用()操作符調(diào)用函數(shù)
使用上面的例子，toCelsius指函數(shù)對象，而toCelsius()指作用的結(jié)果。
- function toCelsius(fahrenheit) {
- return (5/9) * (fahrenheit-32);
- }
- document.getElementById("demo").innerHTML = toCelsius;
2. 用作變量值的函數(shù)
函數(shù)可以像變量一樣使用，在所有類型的公式、賦值和計算中都可以使用。
- var x = toCelsius(77);
- var text = "The temperature is " + x + " Celsius";
三、總結(jié)
文章主要從倆個方面介紹了JavaScript函數(shù)的應(yīng)用，從函數(shù)的語法，怎么去調(diào)用函數(shù)，函數(shù)的返回值，以及在編程中為什么需要函數(shù)的加入等等，都做了詳細(xì)講解。通過實踐案例的操作，運行效果的展示，能夠讓讀者更好的理解。
本文轉(zhuǎn)載自微信公眾號「前端進階學(xué)習(xí)交流」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端進階學(xué)習(xí)交流公眾號。
