如何在 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+ 次瀏覽

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告