Ordenando Arrays Javascript

El método short() ordena un Array alfabéticamente.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>The sort() method sorts an array alphabetically.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
fruits.sort();
document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

Invertir una matriz

El método reverse() invierte los elementos de una matriz. Puedes usarlo para ordenar una matriz en orden descendente.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort Reverse</h2>

<p>The reverse() method reverses the elements in an array.</p>
<p>By combining sort() and reverse() you can sort an array in descending order.</p>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
// Create and display an array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
// First sort the array
fruits.sort();
// Then reverse it:
fruits.reverse();
document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

Orden numérico

De forma predeterminada, la función sort() ordena los valores como cadenas. Esto funciona bien para cadenas (“Apple” viene antes que “Banana”). Sin embargo, si los números se ordenan como cadenas, “25” es mayor que “100”, porque “2” es mayor que “1”. Debido a esto, el método sort() producirá un resultado incorrecto al ordenar números. Puedes solucionar este problema proporcionando una función de comparación.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>
<p>Click the button to sort the array in ascending order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;

function myFunction() {
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

Usa el mismo truco para ordenar una matriz descendente.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>
<p>Click the button to sort the array in descending order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;

function myFunction() {
points.sort(function(a, b){return b - a});
document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

La función de comparación

El propósito de la función de comparación es definir un orden de clasificación alternativo. La función de comparación debe devolver un valor negativo, cero o positivo, según los argumentos.

function(a, b){return a - b}

Cuando la función sort() compara dos valores, envía los valores a la función de comparación y ordena los valores según el valor devuelto (negativo, cero, positivo).

Si el resultado es negativo, a se ordena antes que b.

Si el resultado es positivo, b se ordena antes que a.

Si el resultado es 0, no se realizan cambios con el orden de clasificación de los dos valores.

Ejemplo:

La función de comparación compara todos los valores de la matriz, dos valores a la vez (a, b).

Al comparar 40 y 100, el método sort() llama a la función de comparación (40, 100).

La función calcula 40 – 100 (a – b), y dado que el resultado es negativo (-60), la función de clasificación clasificará 40 como un valor menor que 100.

Puedes utilizar este fragmento de código para experimentar con la clasificación numérica y alfabética.

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Ordenar Arrays Javascript</h2>
<p>Haz clic en los botones para ordenar el Array alfabéticamente o numéricamente</p>
<button onClick="myFunction1()">Ordena alfabéticamente</button>
<button onClick="myFunction2()">Ordena numéricamente</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 19];

document.getElementById("demo").innerHTML = points;

function myFunction1()
{
points.sort();
document.getElementById("demo").innerHTML = points;
}

function myFunction2()
{
points.sort(function(a,b){return(a-b)});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>

Ordenar una matriz en orden aleatorio

Veamos un ejm.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>Click the button (again and again) to sort the array in random order.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;

function myFunction() {
points.sort(function(a, b){return 0.5 - Math.random()});
document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

El método Fisher Yates

El ejemplo anterior, array.sort(), no es exacto, favorecerá algunos números sobre otros.

El método correcto más popular se llama Fisher Yates shuffle y se introdujo en la ciencia de datos ya en 1938.

En JavaScript, el método se puede traducir a esto.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<h3>The Fisher Yates Method</h3>

<p>Click the button (again and again) to sort the array in random order.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;

function myFunction() {
var i, j, k;
for (i = points.length -1; i > 0; i--) {
j = Math.floor(Math.random() * i)
k = points[i]
points[i] = points[j]
points[j] = k
}
document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

Encuentra el valor de matriz más alto (o más bajo)

No hay funciones integradas para encontrar el valor máximo o mínimo en una matriz.

Sin embargo, después de haber ordenado una matriz, puedes usar el índice para obtener los valores más altos y más bajos.

Clasificación ascendente.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>The lowest number is <span id="demo"></span>.</p>

<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = points[0];
</script>

</body>
</html>

Clasificación descendente.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>The highest number is <span id="demo"></span>.</p>

<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
document.getElementById("demo").innerHTML = points[0];
</script>

</body>
</html>

Ordenar una matriz completa es un método muy ineficiente si solo desea encontrar el valor más alto (o más bajo).

Usando Math.max() en una matriz

Puedes usar Math.min.apply para encontrar el número más bajo en una matriz.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
<h2>Ordenar Arrays Javascript</h2>
<p>El número más bajo es <span id="demo"></span>.</p>

<script>
var points = [40, 100, 1, 5, 45, 10];
document.getElementById("demo").innerHTML = myArraymin(points);

function myArraymin(arr)
{
return Math.min.apply(null,arr);
}
</script>
</body>
</html>

Math.min.apply (null, [1, 2, 3]) es equivalente a Math.min (1, 2, 3)

Métodos Javascript Min / Max

La solución más rápida es utilizar un método “hecho en casa”. Esta función recorre una matriz que compara cada valor con el valor más alto encontrado:

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>The highest number is <span id="demo"></span>.</p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
var len = arr.length;
var max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
}
return max;
}
</script>

</body>
</html>

Esta función recorre una matriz que compara cada valor con el valor más bajo encontrado:

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>The lowest number is <span id="demo"></span>.</p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);

function myArrayMin(arr) {
var len = arr.length;
var min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
}
}
return min;
}
</script>

</body>
</html>

Ordenando objetos Javascript

Los Arrays Javascript a menudo contienen objetos.

Ejm

var cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];

Incluso si los objetos tienen propiedades de diferentes tipos de datos, el método sort() se puede utilizar para ordenar la matriz.

La solución es escribir una función de comparación para comparar los valores de las propiedades.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort car objects on age.</p>
<button onclick="myFunction()">Sort</button>
<p id="demo"></p>

<script>
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];

displayCars();

function myFunction() {
cars.sort(function(a, b){return a.year - b.year});
displayCars();
}

function displayCars() {
document.getElementById("demo").innerHTML =
cars[0].type + " " + cars[0].year + "<br>" +
cars[1].type + " " + cars[1].year + "<br>" +
cars[2].type + " " + cars[2].year;
}
</script>

</body>
</html>

Comparar las propiedades de las cadenas es un poco más complejo

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort car objects on type.</p>
<button onclick="myFunction()">Sort</button>
<p id="demo"></p>

<script>
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];

displayCars();

function myFunction() {
cars.sort(function(a, b){
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
displayCars();
}

function displayCars() {
document.getElementById("demo").innerHTML =
cars[0].type + " " + cars[0].year + "<br>" +
cars[1].type + " " + cars[1].year + "<br>" +
cars[2].type + " " + cars[2].year;
}
</script>

</body>
</html>