在 JavaScript 中求平均值的示例

JavaScript 沒有內建函式可計算陣列的算術平均數。常用公式是將所有數值相加，再除以數值的個數。你可以用迴圈實作這項計算，再從 HTML 按鈕呼叫該函式，或直接將數值傳給函式。

平均值公式的運作方式

以 28、78、32 和 14 為例，將數值相加得到 152，再除以 4，算術平均數就是 38。通用公式為 sum / count。JavaScript 數字的運算結果可能包含小數，因此除非應用程式需要特定的顯示格式，否則不必四捨五入。例如，toFixed(2) 會將數字格式化成小數點後兩位的字串；若後續計算仍需要數值，請保留原本的數字結果。

執行以下範例：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

function average(values) {
  let sum = 0;
  for (const value of values) {
    sum += value;
  }
  return sum / values.length;
}

console.log(average([28, 78, 32, 14]));

38

此範例使用 for...of 迴圈將陣列中的每個元素相加，再將總和除以陣列的 length。提供的 JavaScript 執行結果為 38。

在 HTML 頁面中計算陣列平均值

以下完整頁面會將按鈕連結到自訂的 calculateAverage 函式。按下按鈕後，頁面會計算四個數值的平均值，並以警示視窗顯示結果。迴圈會先將每個數值相加，再除以陣列長度。這些數值的平均值為 38。

本節中的程式碼以及顯示的標籤或輸出仍為英文。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Calculate an array average</title>
</head>
<body>
  <h1>Average of 28, 78, 32, and 14</h1>
  <button type="button" onclick="calculateAverage()">Click to get Average</button>
  <script>
    function calculateAverage() {
      const values = [28, 78, 32, 14];
      let sum = 0;

      for (const value of values) {
        sum += value;
      }

      alert(`Average of (${values}) is: ${sum / values.length}`);
    }
  </script>
</body>
</html>

HTML 按鈕的 onclick 處理常式會在讀者點擊時呼叫函式。這是頁面自行定義的函式，並非 JavaScript 提供的平均值方法。迴圈會逐一處理每個項目，而 values.length 會提供除數，因此更改陣列時不必另外修改數值個數。HTML 程式碼區塊呈現的是瀏覽器頁面原始碼，並不代表曾在瀏覽器中執行。

從函式引數計算平均值

如果呼叫函式時傳入的是個別數值，而不是陣列，可以使用 rest 參數將它們收集成陣列。這個函式可接收一個或多個數值引數，並使用相同的總和除以個數公式。若沒有傳入引數，就沒有平均值可計算，因此函式會回傳 null，而不會除以零：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

function average(...numbers) {
  if (numbers.length === 0) {
    return null;
  }

  let sum = 0;
  for (const number of numbers) {
    sum += number;
  }
  return sum / numbers.length;
}

console.log(average(28, 78, 32, 14));

38

...numbers rest 參數會收集傳入的引數。輸入不為空時，函式會回傳一個數字，呼叫端可以在後續計算中重複使用；若沒有提供任何數值，呼叫端則可以檢查是否回傳 null。這是自訂函式，不是陣列或 JavaScript 的 Math 物件的方法。提供的 JavaScript 執行結果為 38。

處理空白或無效的輸入

空陣列沒有算術平均數，因為沒有可供相除的數值個數。將其總和除以陣列長度會得到 NaN，因此計算前應先檢查輸入。像 "12" 這種看起來是數字的字串，在此用途下本身並不是數字；null 或 NaN 等值也不應在未檢查的情況下加入總和。Number.isFinite 只接受有限的 JavaScript 數字，不會隱式轉換字串。

若要重複使用程式碼，請先確認輸入是非空陣列，且每個項目都是有限數值，再進行加總。若輸入不是陣列、陣列為空，或任何值未通過 Number.isFinite，此函式會回傳 null；只有所有檢查都通過後才會加總：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

function averageValidated(values) {
  if (!Array.isArray(values) || values.length === 0) {
    return null;
  }

  if (!values.every(Number.isFinite)) {
    return null;
  }

  let sum = 0;
  for (const value of values) {
    sum += value;
  }
  return sum / values.length;
}

由於 Number.isFinite 不會強制轉換值，因此字串和 null 會與 NaN 及正負無限大一樣遭到拒絕。呼叫端可以檢查是否回傳 null，並在顯示結果前提示使用者。將輸入驗證與公式分開，能讓算術邏輯更容易檢查。

顯示結果時，只在呈現階段進行格式化。若將底層數值四捨五入，後續計算可能受到影響；toFixed 格式化則適合用於顯示。這些檢查將輸入處理與計算本身分開，也有助於避免顯示令人誤解的 NaN 警示。