如何在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+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告