25-Sorting arrays en Javascript

Jorge Catalao febrero 19, 2023

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
Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias