El metodo sort() ordena una matriz alfabéticamente:
Ejemplo
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.sort();
document.getElementById("demo2").innerHTML = fruits;
Salida Apple,Banana,Mango,Orange
Invertir una matriz (array)
El metodo reverse() invierte los elementos en una matriz.
Este metodo se puede usar para ordenar una matriz de forma descendiente
Ejemplo
// Crea y muestra una matriz:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
// Primero ordena la matriz
fruits.sort();
// Despues hace la inversion
fruits.reverse();
document.getElementById("demo2").innerHTML = fruits;
Salida Apple,Banana,Mango,Orange
...
Ordenacion numerica
La funcion sort() por defecto ordena los valores como cadenas
Funciona muy bien con las cadenas (strings), pero si queremos ordenar los numeros como cadenas la funcion te dice que "25" es mayor que "100", como ya deben tener notado el "2" inicial de "25" es mayor que el "1" inicial de "100"
Debido a este problema el metodo sort() producirá un resultado incorrecto al ordenar números.
Podemos solucionar este problema con una funcion de comparacion
Ejemplo
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo1").innerHTML = points;
points.sort(function(a, b){return a - b});
document.getElementById("demo2").innerHTML = points;
Salida 1,5,10,25,40,100
Podemos usar el mismo metodo para ordenar descendientemente
Ejemplo
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo1").innerHTML = points;
points.sort(function(a, b){return b - a});
document.getElementById("demo2").innerHTML = points;
Salida 100,40,25,10,5,1
función de comparación
La funcion de este metodo es defenir una orden comparando los valores
La funcion devuelve un valor negativo, cero o positivo
Sintaxis
function(a, b){return a - b}
Cuando la function sort() compara dos valores, envía los valores a la función de comparación y ordena los valores de acuerdo con los devueltos (negativo, valor cero, positivo).
Si el resultado es negativo, a se ordena antes b.
Si el resultado es positivo, b está ordenado antes a.
Si el resultado es 0, no se realizan cambios con el orden de clasificación de los dos valores.
Explicacion
La función de comparación compara todos los valores de la matriz, dos valores a la vez. tiempo (a, b).
Al comparar 20 a 100, el metodo sort() llama a la función de comparación (20, 100).
La función calcula 20 - 100 (a - b) dado que el resultado es negativo (-80) entonces la funcion cualifica el primero numero como inferior al segundo
Puede usar el seguiente codigo para ordenar alfabeticamente o numericamente
Codigo de ordenacion numerica o alfabetica
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort the array alphabetically or numerically.</p>
<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
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
Con el metodo sort() y la funcion Match.random() podemos ordenar una cadena de numeros aleatoriamente
Codigo de ordenacion aleatoria
<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>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function(){return 0.5 - Math.random()});
document.getElementById("demo").innerHTML = points;
}
</script>
Metodo Fisher Yates
El ejemplo anterior, array .sort(), no es exacto. favorecerá a algunos números sobre los demás
El método correcto más popular, se llama el método aleatorio de Fisher Yates
Este metodo ya fue implementado en la ciencia de datos en 1938
Codigo del metodo
<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>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
for (let i = points.length -1; i > 0; i--) {
let j = Math.floor(Math.random() * (i+1));
let k = points[i];
points[i] = points[j];
points[j] = k;
}
document.getElementById("demo").innerHTML = points;
}
</script>
valor de matriz más alto (o más bajo)
En javascript no hay funciones integradas para encontrar el máximo o mínimo valor en una matriz.
Pero podemos usar algunos trucos para encontrar el valor mas alto o mas bajo
- Ordenamos la matriz
- Usamos el indice para encontrar el numero deseado
Codigo de ejemplo
<p>El número más bajo es <span id="demo"></span>.</p>
<script>
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = points[0];
</script>
Salida 1
Clasificación descendente:
Codigo de ejemplo
<p>El número más alto es <span id="demo"></span>.</p>
<script>
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
document.getElementById("demo").innerHTML = points[0];
</script>
Salida 100
Ordenar una matriz completa es un método muy ineficiente si solo desea encontrar el valor más alto (o más bajo)
Math.max() en una matriz
Para encontrar un numero mas alto en una matriz podemos usar el metodo Math.max()
Codigo de ejemplo
<h2>JavaScript Array Sort</h2>
<p>El numero mas alto es <span id="demo"></span>.</p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
</script>
Salida 100
Math.max.apply(null, [1, 2, 3]) es equivalente a Math.max(1, 2, 3).
Metodo Math.min()
En Javascript el metodo Match.min encuentra el numero mas bajo de una matriz
Codigo de ejemplo
<h2>JavaScript Array Sort</h2>
<p>El numero mas alto es <span id="demo"></span>.</p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);
function myArrayMin(arr) {
return Math.min.apply(null, arr);
}
</script>
Salida 1
Encontrar el Maximo y minimo
Podemos usar una funcion para encontrar el maximo o el minimo con una funcion
Ejemplo
<h2>JavaScript Array Sort</h2>
<p>El numero mas alto es: <span id="demo"></span>.</p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);
function myArrayMax(arr) {
let len = arr.length;
let max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
}
return max;
}
</script>
Salida El numero mas alto es: 100.
Esta función recorre una matriz comparando cada valor con el más bajo valor encontrado:
<h2>JavaScript Array Sort</h2>
<p>El numero mas bajo es: <span id="demo"></span>.</p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);
function myArrayMin(arr) {
let len = arr.length;
let min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
}
}
return min;
}
</script>
Salida El numero mas bajo es: 1.
matrices de objetos
Las matrices de JavaScript a menudo contienen objetos:
const 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 metodo sort() se puede utilizar para ordenar la matriz.
La solución es escribir una función de comparación para comparar los valores de propiedad:
Ejemplo
cars.sort(function(a, b){return a.year - b.year});
Comparar propiedades de cadenas es un poco más complejo:
Codigo de ejemplo
<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>
const cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
displayCars();
function myFunction() {
cars.sort(function(a, b){
let x = a.type.toLowerCase();
let 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>
Salida
BMW 2010
Saab 2001
Volvo 2016
Puede ver la referencia de matriz completa en javascript
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias