JavaScript: obtenga el elemento mínimo y máximo de la matriz

En esta guía, aprenda cómo obtener los elementos más grandes y más pequeños (mínimo y máximo) de una matriz en JavaScript, utilizando los métodos `Math.min()` y `Math.max()`, el operador de propagación, `reduce( )`, el método `apply()` y un bucle `for`.

Introducción

Cuando trabajamos con JavaScript, a menudo nos encontramos con situaciones que requieren que obtengamos los elementos mínimos y máximos de una matriz, ya sea para establecer límites para un control deslizante o mostrar las estadísticas a un usuario.

En este artículo, veremos cómo obtener el elemento mínimo y máximo de una matriz en JavaScript. También veremos cuatro métodos diferentes y compararemos sus velocidades cuando se trata de arreglos grandes.

Cómo obtener los elementos mínimos y máximos de una matriz mediante el objeto Math {#cómo obtener los elementos mínimos y máximos de una matriz mediante el objeto matemático}

Math es el objeto de conveniencia global incorporado de JavaScript que contiene una gran cantidad de métodos y constantes que puede necesitar al realizar operaciones matemáticas. Dos métodos que usaremos en este artículo son Math.min() y Math.max(); ambos aceptan una lista de números como argumentos. Como sugieren sus nombres, uno devuelve el elemento con el valor más bajo y el otro devuelve uno cuyo valor es el más alto:

1
2
3
4
5
console.log(Math.min(20, 23, 27)); // 20
console.log(Math.max(20, 23, 27)); // 27

console.log(Math.min(-20, -23, -27)); // -27
console.log(Math.max(-20, -23, -27)); // -20

Si al menos uno de los elementos pasados ​​no es un número o no se puede convertir a un número, tanto Math.min() como Math.max() devuelven NaN:

1
2
console.log(Math.min('-20', -23, -27)); // -27
console.log(Math.max('number', -23, -27)); // NaN

De manera similar, si tratamos de pasar una matriz como argumento de la función Math.min(), obtenemos un NaN, ya que se trata como un solo elemento, que no se puede convertir en un valor escalar:

1
2
const myArray = [2, 3, 1];
console.log(Math.min(myArray)); // NaN

Sin embargo, una solución rápida para esto es usar el operador de propagación para desenvolver los elementos:

1
2
const myArray = [2, 3, 1];
console.log(Math.min(...myArray)); // 1

If you'd like to read more about the Spread Operator - read our Guía del operador de propagación en JavaScript!

Obtenga el elemento máximo y mínimo con reduce()

Las operaciones de reducción, a veces conocidas como plegado, son algunas de las operaciones más poderosas de la programación funcional, con una amplia variedad de aplicaciones. La función reduce() ejecuta una función reductora (definida en una devolución de llamada) en cada elemento de la matriz y devuelve un único valor al final.

Vale la pena cubrir el método debido a la forma universal en que se puede aplicar:

1
2
3
4
5
6
7
const myArray = [20, 23, 27];

let minElement = myArray.reduce((a, b) => {
    return Math.min(a, b);
});

console.log(minElement); // 20

Encuentra el elemento mínimo y máximo con apply()

El método apply() se usa para invocar una función con un valor this dado y una matriz de argumentos. Esto nos permite ingresar matrices en la función estática Math.min():

1
2
3
4
5
6
7
const myArray = [20, 23, 27];

let minElement = Math.min.apply(Math, myArray);
console.log(minElement); // 20
// Or
let minElement = Math.min.apply(null, myArray);
console.log(minElement); // 20

Obtención de elementos mínimos y máximos con bucles estándar: el rendimiento más rápido

Los bucles se utilizan en JavaScript para realizar tareas repetidas en función de una condición. Las condiciones devuelven “verdadero” o “falso”. Un ciclo continuará ejecutándose hasta que la condición definida devuelva falso. En nuestro caso, utilizaremos el ciclo for; se usa comúnmente para ejecutar código varias veces.

Obtener elemento mínimo

Primero, inicializaremos el elemento mínimo al primer elemento de una matriz. Luego, recorremos toda la matriz para ver si el valor de cualquier otro elemento es menor que el valor mínimo actual; si lo es, estableceremos el nuevo valor mínimo en el valor del elemento actual:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const myArray = [20, 23, 27];

let minElement = myArray[0];
for (let i = 1; i < arrayLength; ++i) {
    if (myArray[i] < minElement) {
        minElement = myArray[i];
    }
}

console.log(minElement); // 20

Obtener elemento máximo

Primero inicializaremos el elemento máximo al primer elemento de la matriz. Luego, recorreremos toda la matriz para ver si algún otro elemento es mayor que el elemento inicializado, por lo que lo reemplaza:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const myArray = [20, 23, 27];

let maxElement = myArray[0];
for (let i = 1; i < arrayLength; ++i) {
    if (myArray[i] > maxElement) {
        maxElement = myArray[i];
    }
}

console.log(maxElement); // 27

Punto de referencia de rendimiento {#punto de referencia de rendimiento}

Usando JS Benchmark: hemos ejecutado todos estos enfoques en entradas variables, de 100 a 1000000 elementos en la matriz. El rendimiento es relativo y depende de la longitud de la matriz.

  • Para matrices pequeñas (100), el método reduce() funcionó mejor, seguido de los bucles estándar, el operador de propagación y luego el método apply(). Los subcampeones son casi iguales en rendimiento.
  • Para matrices medianas (1000), los bucles estándar funcionan mejor, seguidos de reduce(), el operador de propagación y el método apply(). Los bucles estándar son significativamente más rápidos que reduce() aquí, que a su vez, es bastante más rápido que los subcampeones.
  • Para matrices realmente grandes (1000000), los bucles estándar superan a todos los demás métodos en un grado tan grande que el argumento a favor de los bucles estándar es muy sólido.

Los bucles estándar escalan muy bien y solo pierden frente a la competencia cuando se aplican a arreglos pequeños. Si está tratando con algunos elementos o matrices más pequeñas, todos los métodos serán bastante fluidos. Cuanto más grande sea la matriz, mayor será el beneficio de usar bucles estándar.

{.icon aria-hidden=“true”}

Nota: ¡No tome los puntos de referencia al pie de la letra! Se ejecutan en diferentes máquinas, con versiones de navegador y motores JS probablemente diferentes. Pruébelos en su aplicación y elija la opción más rápida y escalable para su propio caso de uso.

Conclusión

En esta guía, hemos analizado cómo obtener los elementos mínimos y máximos de una matriz en JavaScript. Echamos un vistazo a los métodos Math.min() y Math.max(), el operador de propagación, el método reduce(), el método apply() y escribimos un enfoque personalizado para obtener los elementos a través de un bucle for.

Finalmente, hemos evaluado los resultados, señalando que realmente no importa qué enfoque use para arreglos pequeños, mientras que debería tender a usar bucles for estándar para arreglos más grandes.