Tutorial de JavaScript : Conceptos

Otro método muy útil de la clase Array es sort. La sintaxis más sencilla y por defecto es para ordenar una lista de string:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        let nombres = ['marcos', 'ana', 'luis', 'jorge', 'carlos'];
        document.write('Vector antes de ordenarlo<br>');
        for (let f = 0; f < nombres.length; f++) {
            document.write(nombres[f] + '<br>');
        }
        nombres.sort();
        document.write('Vector después de ordenarlo<br>');
        for (let f = 0; f < nombres.length; f++) {
            document.write(nombres[f] + '<br>');
        }
    </script>

</body>

</html>

Como vemos creamos un vector con una lista de string:

        let nombres = ['marcos', 'ana', 'luis', 'jorge', 'carlos'];

Luego con llamar simplemente al método sort el mismo se encarga de intercambiar las componentes de tal forma que el menor alfabéticamente se encuentra al principio y así sucesivamente:

        nombres.sort();

Para ordenar una lista de enteros se complica el algoritmo ya que debemos pasar al método sort una función anónima indicando como implementar la comparación entre elementos:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        let vec = [100, 5, 60, 3, 90];
        document.write('Vector antes de ordenarlo<br>');
        for (let f = 0; f < vec.length; f++) {
            document.write(vec[f] + '<br>');
        }
        vec.sort(function(v1, v2) {
            if (v1 < v2)
                return -1; // v1 es menor que v2
            else
                return 1; // v1 es mayor que v2
        });
        document.write('Vector después de ordenarlo<br>');
        for (let f = 0; f < vec.length; f++) {
            document.write(vec[f] + '<br>');
        }
    </script>

</body>

</html>

Como vemos al método sort hemos pasado una función que retorna un 1 o -1:

        vec.sort(function(v1, v2) {
            if (v1 < v2)
                return -1; // v1 es menor que v2
            else
                return 1; // v1 es mayor que v2
        });

Los parámetros v1 y v2 son los elementos que se comparan:

Si el contenido de v1 es menor que v2, se sitúa v1 en un indice menor que v2 (debe retornar un valor menor a cero)

Si el contenido de v1 es mayor que v2, se sitúa v2 en un indice menor que v1 (debe retornar un valor mayor a cero)

El siguiente método a analizar en éste concepto es reverse(), como podemos intuir este método invierte el orden de los elementos del vector. Nos puede ser de utilidad si tenemos ordenado un vector en orden ascendente y lo queremos en forma descendente.

Problema

Crear un vector con 10 elementos enteros con valores aleatorios. Ordenarlos de menor a mayor. Luego invertir el vector para verlo de mayor a menor.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        let vec = new Array(10);
        for (let f = 0; f < vec.length; f++) {
            vec[f] = parseInt(Math.random() * 1000);
        }
        vec.sort(function(v1, v2) {
            if (v1 > v2)
                return 1;
            else
                return -1;
        });
        document.write('Vector ordenado en forma ascendente<br>');
        for (let f = 0; f < vec.length; f++) {
            document.write(vec[f] + '<br>');
        }
        vec.reverse();
        document.write('Vector ordenado en forma descendente<br>');
        for (let f = 0; f < vec.length; f++) {
            document.write(vec[f] + '<br>');
        }
    </script>

</body>

</html>

El resultado de ejecutar el programa es:

Vector ordenado en forma ascendente
32
131
329
364
488
515
860
864
919
919
Vector ordenado en forma descendente
919
919
864
860
515
488
364
329
131
32

Como vemos luego de imprimirlo en forma ordenada procedemos a llamar al método reverse() que invierte los elementos del vector (es decir el último pasa a ser primero, el anteúltimo pasa a ser segundo y así sucesivamente)

Problema

Definir un arreglo de cuatro elementos de tipo objeto, cada objeto representa una persona con su nombre y edad.
Imprimir el vector previo y posteriormente a su ordenamiento por la edad.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        let personas = [{
            nombre: 'diego',
            edad: 53
        }, {
            nombre: 'carlos',
            edad: 26
        }, {
            nombre: 'ana',
            edad: 70
        }, {
            nombre: 'victoria',
            edad: 15
        }];
        document.write('Personas y sus edades<br>');
        for (let f = 0; f < personas.length; f++) {
            document.write('Nombre:' + personas[f].nombre + ' - ' + 'Edad:' + personas[f].edad + '<br>');
        }
        document.write('Personas ordenadas por su edad sus edades<br>');
        personas.sort(function(persona1, persona2) {
            if (persona1.edad > persona2.edad) {
                return -1;
            } else {
                return 1;
            }
        });
        document.write('Personas y sus edades<br>');
        for (let f = 0; f < personas.length; f++) {
            document.write('Nombre:' + personas[f].nombre + ' - ' + 'Edad:' + personas[f].edad + '<br>');
        }
    </script>

</body>

</html>

Ahora en la función anónima del método sort debemos acceder al atributo edad de cada persona:

        personas.sort(function(persona1, persona2) {
            if (persona1.edad > persona2.edad) {
                return -1;
            } else {
                return 1;
            }
        });

Array: métodos sort y reverse

Retornar