函式返回值

關於函式，還有一個重要的概念需要討論——返回值。有些函式不返回有意義的值，而另一些則返回。理解它們的返回值、如何在程式碼中使用它們以及如何使函式返回有用的值非常重要。我們將在下面介紹所有這些內容。

先決條件	對 HTML 和 CSS 的基本瞭解，JavaScript 入門，函式——可重用的程式碼塊。
目標	瞭解函式返回值，以及如何使用它們。

什麼是返回值？

返回值顧名思義——函式在執行完畢後返回的值。你已經多次遇到過返回值，雖然你可能沒有明確地思考過它們。

讓我們回到一個熟悉的例子（來自本系列的上一篇文章）

const myText = "The weather is cold";
const newString = myText.replace("cold", "warm");
console.log(newString); // Should print "The weather is warm"
// the replace() string function takes a string,
// replaces one substring with another, and returns
// a new string with the replacement made

replace() 函式在 myText 字串上呼叫，並傳遞兩個引數

要查詢的子字串（'cold'）
要替換它的字串（'warm'）

當函式完成（執行完畢）時，它會返回一個值，該值是一個新的字串，其中進行了替換。在上面的程式碼中，此返回值的結果儲存在變數 newString 中。

如果你檢視replace() 函式的 MDN 參考頁面，你會看到一個名為返回值的部分。瞭解和理解函式返回的值非常有用，因此我們儘可能地包含這些資訊。

有些函式不返回值。（在這些情況下，我們的參考頁面將返回值列為void 或undefined。）例如，在displayMessage() 函式（我們在上一篇文章中構建的）中，呼叫函式時不會返回任何特定值。它只是讓一個框出現在螢幕上的某個位置——就這麼簡單！

通常，返回值用於函式作為某種計算中的中間步驟。你想要得到最終結果，這涉及一些需要由函式計算的值。函式計算完值後，它可以返回結果，以便將其儲存在變數中；你可以將此變數用在計算的下一階段。

在自己的函式中使用返回值

要從自定義函式返回一個值，你需要使用return 關鍵字。我們最近在random-canvas-circles.html 示例中看到了這一點。我們的 draw() 函式在 HTML<canvas> 上繪製 100 個隨機圓圈

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgb(255 0 0 / 50%)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

在每次迴圈迭代中，都會呼叫 random() 函式三次，分別為當前圓圈的x 座標、y 座標和半徑生成一個隨機值。random() 函式接受一個引數——一個整數——並返回一個介於 0 和該數字之間的隨機整數。它看起來像這樣

function random(number) {
  return Math.floor(Math.random() * number);
}

這可以寫成：

function random(number) {
  const result = Math.floor(Math.random() * number);
  return result;
}

但第一個版本寫起來更快，更緊湊。

每次呼叫函式時，我們都會返回計算結果 Math.floor(Math.random() * number)。此返回值出現在呼叫函式的位置，程式碼繼續執行。

因此，當你執行以下操作時

ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);

如果三個 random() 呼叫分別返回 500、200 和 35 的值，那麼該行實際上將像這樣執行：

ctx.arc(500, 200, 35, 0, 2 * Math.PI);

該行上的函式呼叫將首先執行，它們的返回值將替換函式呼叫，然後才執行該行本身。

主動學習：我們自己的返回值函式

讓我們嘗試編寫一些包含返回值的自己的函式。

從 GitHub 上建立一個function-library.html 檔案的本地副本。這是一個簡單的 HTML 頁面，包含一個文字<input> 欄位和一個段落。還包含一個<script> 元素，我們在其中儲存了對這兩個 HTML 元素的引用，儲存在兩個變數中。此頁面允許你在文字框中輸入一個數字，並在下面顯示與之相關的不同數字。

在兩個現有行下面的 <script> 元素中新增一些有用的函式

function squared(num) {
  return num * num;
}

function cubed(num) {
  return num * num * num;
}

function factorial(num) {
  if (num < 0) return undefined;
  if (num === 0) return 1;
  let x = num - 1;
  while (x > 1) {
    num *= x;
    x--;
  }
  return num;
}

squared() 和 cubed() 函式相當明顯——它們返回作為引數傳遞給它們的數字的平方或立方。factorial() 函式返回給定數字的階乘。

透過在現有函式下面新增以下事件處理程式，包含一種方法來列印有關在文字輸入中輸入的數字的資訊

input.addEventListener("change", () => {
  const num = parseFloat(input.value);
  if (isNaN(num)) {
    para.textContent = "You need to enter a number!";
  } else {
    para.textContent = `${num} squared is ${squared(num)}. `;
    para.textContent += `${num} cubed is ${cubed(num)}. `;
    para.textContent += `${num} factorial is ${factorial(num)}. `;
  }
});

儲存程式碼，在瀏覽器中載入它，然後試用它。

以下是步驟 3 中 addEventListener 函式的一些解釋

透過向 change 事件新增一個監聽器，每當文字輸入中觸發 change 事件時，此函式就會執行——也就是說，當在文字 input 中輸入一個新值並提交時（例如，輸入一個值，然後透過按 Tab 或 Return 取消輸入焦點）。當此匿名函式執行時，input 中的值將儲存在 num 常量中。
if 語句在輸入的值不是數字時列印一條錯誤訊息。該條件檢查表示式 isNaN(num) 是否返回 true。isNaN() 函式測試 num 值是否不是數字——如果是，它返回 true，如果不是，它返回 false。
如果該條件返回 false，則 num 值是一個數字，並且該函式在段落元素中打印出一句話，說明該數字的平方、立方和階乘值。該語句呼叫 squared()、cubed() 和 factorial() 函式來計算所需的值。

注意：如果你無法使示例正常工作，請將你的程式碼與GitHub 上的完成版本進行比較（檢視其線上執行），或者向我們尋求幫助。

現在輪到你了！

在這一點上，我們希望你能嘗試編寫一些自己的函式，並將它們新增到庫中。數字的平方根或立方根怎麼樣？或者給定半徑的圓的周長？

一些關於函式的額外提示

看看在函式中編寫錯誤處理的另一個示例。通常，最好檢查所有必要的引數是否已驗證，以及所有可選引數是否提供了一些預設值。這樣，你的程式將不太可能丟擲錯誤。
考慮建立函式庫的想法。隨著你在程式設計生涯中的不斷前進，你會發現自己一遍又一遍地做著同樣的事情。建立一個自己的實用函式庫來執行這些操作是一個好主意。你可以將它們複製到新的程式碼中，甚至可以將它們應用到任何需要它們的 HTML 頁面。

深入瞭解函式——一個詳細的指南，涵蓋了更多關於函式的高階資訊。
JavaScript 中的回撥函式——一種常見的 JavaScript 模式是將一個函式作為引數傳遞給另一個函式。然後在第一個函式內部呼叫它。這超出了本課程的範圍，但在不久的將來值得學習。

函式返回值

什麼是返回值？

在自己的函式中使用返回值

主動學習：我們自己的返回值函式

現在輪到你了！

測試您的技能！

結論

另請參見