如何在JavaScript陣列中找到最大值？

在本教程中，我們將學習在JavaScript陣列中查詢最大值的各種方法。陣列是不同值的集合。我們將定義一個數字陣列，並在其中搜索最大值。

下面列出了三種在JavaScript陣列中查詢最大值的方法：

  • 遍歷整個陣列
  • 使用reduce()方法
  • 使用Math.max()和apply()方法

遍歷整個陣列

這是查詢陣列中最大值最簡單或最直接的方法，我們將逐個遍歷陣列的每個元素，並將其與前一個元素進行比較；如果當前元素較大，則更新最大元素的值。

步驟

  • 步驟1 - 第一步，我們將宣告一個數字陣列和一個名為largest的變數，該變數最初賦值為陣列的第一個元素的值。
  • 步驟2 - 第二步，我們宣告一個函式來評估陣列中的最大值。
  • 步驟3 - 下一步，我們將使用for迴圈遍歷從第二個元素到最後一個元素的陣列，並將它們與各自的前一個元素進行比較，以更新largest的值。
  • 步驟4 - 在這一步中，我們將呼叫在第二步中宣告的函式，以便它評估最大值並將其列印在使用者螢幕上。

讓我們來看一個程式碼示例來實現上述方法：

示例1

<html>
<body>
   <h3>Finding the largest number contained in a JavaScript array</h3>
   <p>The Dummy array is: [5, 10, 20, 3, 98, 95]</p>
   <p id="result"></p>
   <script>
      let arr = [5, 10, 20, 3, 98, 95];
      let largest = arr[0];
      function largestNumber() {
         for (let i = 1; i < arr.length; i++) {
            if (arr[i] > largest)
            largest = arr[i];
         }
         document.getElementById('result').innerHTML = "The largest element of the array is: " + largest;
      }
      largestNumber();
   </script>
</body>
</html>

在這個例子中，我們聲明瞭一個數字陣列arr，然後使用for迴圈遍歷它，將largest的值更新為陣列中的最大值。

使用reduce()方法

JavaScript中的reduce()方法接受一個函式，該函式充當陣列的歸約函式，並返回一個單一值，該值將是函式計算的結果。它不會影響原始陣列，並且不適用於空陣列元素。

步驟

  • 步驟1 - 我們需要將數字陣列宣告為演算法的第一步。
  • 步驟2 - 在第二步中，我們將定義一個變數來儲存reduce()方法返回的值。
  • 步驟3 - 在最後一步中，我們將編寫邏輯以在使用者螢幕上顯示陣列中的最大值。

讓我們透過一個程式碼示例來理解：

<html>
<body>
   <h3>Finding the largest number contained in a JavaScript array</h3>
   <p>The Dummy array is: [20, 22, 18, 25, 75, 62, 88]</p>
   <p id="result"></p>
   <script>
      let arr = [20, 22, 18, 25, 75, 62, 88];
      let largest = arr.reduce(function (a, b) {
            return (a > b) ? a : b;
         }
      );
      document.getElementById('result').innerHTML = "The largest element of the array using reduce() method is: " + largest;
   </script>
</body>
</html>

在上面的例子中，我們在數字陣列arr上使用了reduce()方法，並使用reduce()方法的歸約函式內的三元運算子返回陣列中最大的值。

使用Math.max()和apply()方法

在這種方法中，我們一起使用兩種JavaScript方法來解決這個問題。讓我們看看這些函式在解決這個問題中的作用。

Math.max()方法 - 此方法用於在從零開始的數值中查詢最大值。我們可以向其中傳遞任意數量的值。但是，它不適用於陣列，因為它對單獨傳遞的數字執行操作，而不是一次對所有數字執行操作。

語法

console.log(Math.max(8, 2, 3, 9)); // logs largest value i.e. 9

上面的程式碼將把傳遞的值中的最大值記錄到控制檯中。

語法

var array=[6, 23, 9, 5];
console.log(Math.max(array)); // logs NaN in the console

如果您嘗試執行上面的程式碼，它將在控制檯中列印NaN（非數字），因為它不適用於陣列。

apply()方法 - 為了解決上述問題或使Math.max適用於陣列，我們使用apply()方法。apply()方法使用兩個引數呼叫：一個是給定的this值，另一個是我們想要對其進行操作的陣列。

語法

var array=[6, 23, 9, 5];
console.log(Math.max.apply(null, array));

上面編寫的程式碼將記錄陣列中最大的數字，在本例中為23。在這裡，我們將null傳遞給apply()方法，因為apply()方法的第一個引數this在這裡沒有使用，所以我們使用null代替。

步驟

  • 步驟1 - 在這一步中，我們將定義一個數字陣列，在其中我們將搜尋最大值。
  • 步驟2 - 下一步涉及使用上面討論的Math.max.apply()方法，並將返回值儲存在一個變數中。
  • 步驟3 - 作為演算法的最後一步，我們將把從前面步驟獲得的最大值顯示在使用者螢幕上。

讓我們來看一個程式碼示例來完全理解：

示例3

下面的例子將解釋如何使用Math.max()和apply()方法在陣列中查詢最大值：

<html>
<body>
   <h3>Find the largest number contained in a JavaScript array</h3>
   <p>The Dummy array is: [44, 28, 18, 55, 68, 11, 70]</p>
   <p id="result"></p>
   <script>
      let arr = [44, 28, 18, 55, 68, 11, 70];
      let largest = Math.max.apply(null, arr);
      document.getElementById('result').innerHTML = "The largest element of the array using Math.max() and apply() method together is: " + largest;
   </script>
</body>
</html>

在這個例子中，我們在陣列arr上使用了Math.max.apply()，它返回陣列中的最大值，該值將儲存在一個新的變數largest中。

注意 - 在上面的討論中，您必須注意我們沒有使用JavaScript的filter()和map()方法來查詢陣列中的最大值，原因是它們接受回撥函式並根據函式中定義的條件返回修改後的陣列，這會影響原始陣列。

在本教程中，我們學習了三種在JavaScript陣列中查詢最大值的不同的方法，它總是隻返回一個值，該值將是所有陣列元素中的最大值。

更新於：2022年10月31日

11K+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告