如何在JavaScript中查詢陣列的最小/最大元素？

在本教程中，我們將學習在JavaScript中查詢陣列最大和最小元素的不同方法。最小元素是陣列中所有元素中最小的元素，而最大元素是其中最大的元素。

以下是我們可以用來查詢陣列最小/最大元素的方法。

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

讓我們透過程式示例來討論這些方法。

方法1：遍歷整個陣列

在這種方法中，我們將使用**for**迴圈遍歷整個陣列，並將當前元素與較小元素的上一個值進行比較；如果當前元素小於較小元素的上一個值，我們將更新其值。同樣，對於最大元素，如果當前元素大於最大元素的上一個值，我們將更新其值。解決這個問題需要**線性**或**O(n)**的時間。

讓我們看一個上述方法的例子，以便更好地理解它的實現——

步驟

  • **步驟1**——第一步，我們將定義一個我們將搜尋最小和最大元素的數字陣列，並宣告最小和最大變數，其初始值都賦值為陣列的第一個元素。
  • **步驟2**——下一步，我們需要使用for迴圈遍歷陣列，並使用更新最小和最大變數值的邏輯。
  • **步驟3**——在這個步驟中，我們將編寫使用JavaScript在使用者螢幕上顯示輸出的邏輯。

示例1

下面的例子將說明使用**O(1)**額外空間的簡單遍歷方法。

<html> 
<body> 
    <p>The original array: [28, 45, 69, 20, 15, 7, 98]</p> 
    <p id="result"></p> 
    <script> 
       let array = [28, 45, 69, 20, 15, 7, 98]; 
       let min = array[0], max = array[0]; 
       for (let i = 1; i < array.length; i++) { 
          if (array[i] > max) 
             max = array[i]; 
          if (array[i] < min) 
             min = array[i]; 
        } 
        document.getElementById('result').innerHTML = 
           "The maximum or the largest element of the array is: " + max + "<br>" + 
           "The minimum or the smallest element of the array is: " + min; 
    </script> 
</body> 
</html>

在這個例子中，我們聲明瞭一個名為**array**的數字陣列，然後聲明瞭兩個變數**min**和**max**，其初始值都是陣列的第一個元素，這兩個變數都將表示陣列中的最小和最大元素。執行這些步驟後，我們將使用for迴圈遍歷陣列元素，並在每次迭代中將**min**和**max**的值更新為陣列中當前的最小和最大元素。

方法2：使用Math.min()和Math.max()方法

在這種查詢陣列中最大和最小元素的方法中，我們將使用JavaScript的內建**Math.max()**和**Math.min()**方法以及**apply()**方法或陣列解構語法。

**Math.max()**和**Math.min()**方法一次只能對多個數值起作用。**Math.max()**方法返回傳遞給它的所有數字中的最大數，而**Math.min()**方法返回最小值。但是這兩種方法都不適用於陣列，因為它們只能用於不同的數字。

因此，為了使用這些方法在陣列中查詢最小/最大元素，我們需要將陣列轉換為一組不同的數字。在**ES6**或**ES2015**之前，我們使用**apply()**方法將陣列轉換為一組不同的數字。但在**ES6**之後，當引入**陣列解構**語法來解構陣列時，我們開始使用該語法來實現相同的目的。

讓我們看看使用上述兩種方法在JavaScript中查詢陣列中最小/最大元素的實現。

使用apply()方法

在JavaScript中，apply()方法用兩個引數呼叫，第一個是**this**值，另一個是我們正在搜尋最小/最大元素的陣列。

語法

let arr=[];
let min=Math.min.apply(null, arr);
let max=Math.max.apply(null, arr);

在上面的語法中，我們使用**null**代替**this**值，因為在這種情況下我們不需要這個變數。

示例2

下面的例子將解釋如何使用JavaScript的apply()方法結合Math.max()和Math.min()方法。

<html>
<body>
   <p>The array : [49, 58, 22, 17, 79, 6, 92]</p>
   <p id="result"></p>
   <script>
      let array = [49, 58, 22, 17, 79, 6, 92];
      let min = Math.min.apply(null, array);
      let max = Math.max.apply(null, array);
      document.getElementById('result').innerHTML = "The max element: " + max + "<br>" + "The min element: " + min ;
   </script>
</body>
</html>

使用陣列解構語法方法

陣列解構首先是在ES6引入的。陣列解構是一個非常有用的方法。它可以用來區分陣列的元素，合併兩個陣列，單獨訪問陣列元素。

在這種情況下，我們將使用此語法來區分陣列的數字。

語法

以下是陣列解構的語法。

let arr=[];
console.log(…arr); // logs the array elements distinctly in the console

我們使用要解構的陣列名稱之前的三個點(…)。

示例3

下面的例子將說明如何使用JavaScript的Math.max()和Math.min()方法結合陣列解構來查詢陣列中的最小/最大值——

<html>
<body>
   <p>The array is: [56, 68, 23, 9, 77, 65, 2, 89]</p>
   <p id="result"></p>
   <script>
      let array = [56, 68, 23, 9, 77, 65, 2, 89];
      let min = Math.min(...array);
      let max = Math.max(...array);
      document.getElementById('result').innerHTML = "The maximum element of the array is: <b>" + max + "</b><br>" + "The minimum element of the array is: <b>" + min + "</b>";
   </script>
</body>
</html>

在上面的兩個例子中，我們已經看到如何用兩種不同的語法以兩種不同的方式使用JavaScript的Math.min()和Math.max()方法來查詢JavaScript陣列中的最小/最大元素。

在本教程中，我們深入討論了在JavaScript中查詢陣列中最小/最大元素的兩種不同方法，併為每種方法提供了程式碼示例。

更新於：2022年10月31日

11K+ 瀏覽量

啟動您的職業生涯

透過完成課程獲得認證

開始
廣告