JavaScript - Sortiranje nizova

Sortiranje niza

Sortiranje je uobičajen zadatak pri radu s nizovima. Koristi se, na primjer ako želite prikazati imena gradova ili okruga u abecednom redu. Objekt JavaScript Array ima ugrađenu metodu sort() za sortiranje elemenata niza po abecednom redu. Sljedeći primjer pokazuje kako to funkcioniše: 

var fruits = ["Banana", "Narandža", "Jabuka", "Papaja", "Mango"];
var sorted = fruits.sort();

alert(fruits); // Ispisuje: Jabuka,Banana,Mango,Narandža,Papaja
alert(sorted); // Ispisuje: Jabuka,Banana,Mango,Narandža,Papaja
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Sortiranje niza abecedno</title>
</head>
<body>
    <script>
    var fruits = ["Banana", "Narandža", "Jabuka", "Papaja", "Mango"];
    var sorted = fruits.sort();
    
    document.write(fruits + "<br>"); // Ispisuje: Jabuka,Banana,Mango,Narandža,Papaja
    document.write(sorted); // Ispisuje: Jabuka,Banana,Mango,Narandža,Papaja
    </script>
</body>
</html>

Obrtanje niza

Možete koristiti metodu reverse() da biste promijenili redosljed elemenata niza. Ova metoda preokreće niz na takav način da prvi element niza postaje zadnji, a posljednji element niza postaje prvi. Pogledajmo primjer: 

var counts = ["jedan", "dva", "tri", "četiri", "pet"];
var reversed = counts.reverse(); 

alert(counts); // Ispisuje: pet,četiri,tri,dva,jedan
alert(reversed); // Ispisuje: pet,četiri,tri,dva,jedan
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Obrtanje redosljeda niza</title>
</head>
<body>
    <script>
    var counts = ["jedan", "dva", "tri", "četiri", "pet"];
    var reversed = counts.reverse(); 
    
    document.write(counts + "<br>"); // Ispisuje: pet,četiri,tri,dva,jedan
    document.write(reversed); // Ispisuje: pet,četiri,tri,dva,jedan
    </script>
</body>
</html>

Sortiranje numeričkih nizova

Metoda sort() može proizvesti neočekivan rezultat kada se primijeni na numeričke nizove (tj. nizove koji sadrže numeričke vrijednosti). Pogledajmo primjer: 

var numbers = [5, 20, 10, 75, 50, 100];
numbers.sort(); // Poredaj brojeve niza
alert(numbers); // Ispisuje: 10,100,20,5,50,75
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Sortiranje numeričkih nizova</title>
</head>
<body>
    <script>
    var numbers = [5, 20, 10, 75, 50, 100];
    numbers.sort(); // Sortira niz brojeva
    document.write(numbers); // Ispisuje: 10,100,20,5,50,75
    </script>
</body>
</html>

Kao što vidite, rezultat se razlikuje od očekivanog. To se događa zato što metoda sort() sortira elemente numeričkih nizova pretvarajući ih u stringove (tj. 20 postaje "20", 100 postaje "100", itd.), a od prvog znaka niza "20" (tj. "2") dolazi nakon prvog znaka niza "100" (tj. "1"), zato se vrijednost 20 razvrstava nakon 100. Da biste riješili ovaj problem s sortiranjem numeričkih nizova, možete prosljediti funkciju upoređivanja, poput ove: 

var numbers = [5, 20, 10, 75, 50, 100];

// Sortiranje niza pomoću funkcije upoređivanja
numbers.sort(function(a, b) {
    return a - b;
});
alert(numbers); // Ispisuje: 5,10,20,50,75,100
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pravilno sortirajte numerički niz pomoću funkcije upoređivanja</title>
</head>
<body>
    <script>
    var numbers = [5, 20, 10, 75, 50, 100];

    // Sortiranje niza pomoću funkcije upoređivanja
    numbers.sort(function(a, b) {
        return a - b;
    });
    document.write(numbers); // Ispisuje: 5,10,20,50,75,100
    </script>
</body>
</html>

Kao što vidite, ovaj put smo dobili tačan rezultat. Da vidimo kako to funkcioniše. Kad je navedena funkcija upoređivanja, elementi niza se sortiraju prema povratnoj vrijednosti funkcije upoređivanja. Na primjer, kada upoređujete a i b:

  • Ako funkcija upoređivanja vrati vrijednost manju od 0, tada dolazi prva a.
  • Ako funkcija upoređivanja vrati vrijednost veću od 0, tada b dolazi prvo.
  • Ako funkcija upoređivanja vrati 0, a i b ostaju nepromijenjeni jedni prema drugima, ali su razvrstani u odnosu na sve ostale elemente.

Dakle, budući da je 5 - 20 = -15 što je manje od 0, dakle 5 dolazi prvo, slično 20 - 10 = 10 što je veće od 0, dakle 10 dolazi prije 20, isto tako 20 - 75 = -55 što je manje od 0 , tako 20 dolazi prije 75, a 50 dolazi prije 75, i tako dalje.


Pronalaženje maksimalne i minimalne vrijednosti u nizu

Možete koristiti metodu apply() u kombinaciji s Math.max() i Math.min() da biste pronašli maksimalnu i minimalnu vrijednost unutar niza, kako što je prikazano u sljedećem primjeru: 

var numbers = [3, -7, 10, 8, 15, 2];

// Definisanje funkcije za pronalaženje maksimalne vrijednosti
function findMax(array) {
    return Math.max.apply(null, array);
}

// Definisanje funkcije za pronalaženje minimalne vrijednosti
function findMin(array) {
    return Math.min.apply(null, array);
}

alert(findMax(numbers)); // Ispisuje: 15
alert(findMin(numbers)); // Ispisuje: -7
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pronalaženje maksimalne i minimalne vrijednosti niza</title>
</head>
<body>
    <script>
    var numbers = [3, -7, 10, 8, 15, 2];

    // Definisanje funkcije za pronalaženje maksimalne vrijednosti
    function findMax(array){
        return Math.max.apply(null, array);
    }
    
    // Definisanje funkcije za pronalaženje minimalne vrijednosti
    function findMin(array){
        return Math.min.apply(null, array);
    }
    
    document.write(findMax(numbers) + "<br>"); // Ispisuje: 15
    document.write(findMin(numbers)); // Ispisuje: -7
    </script>
</body>
</html>

Metoda apply() pruža pogodan način za prosljeđivanje vrijednosti polja kao argumenata funkciji koja prihvata više argumenata na način sličan nizu, ali ne i niz (npr. ovdje su metode Math.max() i Math.min()). Dakle, rezultat izjava Math.max.apply (null, brojevi) u gornjem primjeru ekvivalentna je Math.max (3, -7, 10, 8, 15, 2).


Sortiranje niza objekata

Metoda sort() se može koristiti i za sortiranje nizova objekata pomoću funkcije upoređivanja. Sljedeći primjer će vam pokazati kako sortirati niz objekata po vrijednostima svojstava: 

var persons = [
    { name: "Miloš", age: 29},
    { name: "Stefan", age: 30 },
    { name: "Marija", age: 18 },
    { name: "Ante", age: 42 },
    { name: "Huso", age: 26 }
];

// Sortiraj po godinama
persons.sort(function (a, b) {
    return a.age - b.age;
});

console.log(persons);

// Sortiraj po imenu
persons.sort(function(a, b) {
    var x = a.name.toLowerCase(); // Zanemari velika i mala slova
    var y = b.name.toLowerCase(); // Zanemari velika i mala slova
    if(x < y) {
        return -1;
    }
    if(x > y) {
        return 1;
    }
    // Imena se moraju podudarati
    return 0;
});

console.log(persons);
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Sortiranje niza objekata</title>
</head>
<body>
    <script>
    var persons = [
        { name: "Miloš", age: 29},
        { name: "Stefan", age: 30 },
        { name: "Marija", age: 18 },
        { name: "Ante", age: 42 },
        { name: "Huso", age: 26 }
    ];
    
    // Sortiraj po godinama
    persons.sort(function (a, b) {
        return a.age - b.age;
    });
    
    console.log(persons);
    
    // Sortiraj po imenu
    persons.sort(function(a, b) {
        var x = a.name.toLowerCase(); // Zanemari velika i mala slova
        var y = b.name.toLowerCase(); // Zanemari velika i mala slova
        if(x < y) {
            return -1;
        }
        if(x > y) {
            return 1;
        }
        // Imena se moraju podudarati
        return 0;
    });
    
    // Prelistaj sve elemente niza
    for(var i in persons)  {  
        // Prelistaj sva svojstva objekta 
        for(var prop in persons[i]) {  
            document.write(prop + ": " + persons[i][prop] + "<br>"); 
        }
        document.write("<hr>");
    }
    </script>
</body>
</html>