IT TUTORIJALI | jQuery

JavaScript - Nizovi

Šta su nizovi u JavaScript?

Nizovi su složene varijable koje nam omogućuju da pohranimo više od jedne vrijednosti ili grupe vrijednosti pod jedan naziv varijable. JavaScript nizovi mogu pohraniti bilo koju valjanu vrijednost, uključujući stringove, brojeve, objekte, funkcije, pa čak i druge nizove, omogućavaju tako stvaranje složenijih struktura podataka kao što su niz objekata ili niz nizova. Pretpostavimo da želite da pohranite naziv boja u vaš JavaScript kod. Spremanje imena boja jedne pa drugu u varijablu može izgledati ovako:

var color1 = "Crvena";
var color2 = "Zelena";
var color3 = "Plava";

Ali što se događa ako trebate pohraniti naziv države ili grada u varijable, a ovaj put ne samo tri, jer mogu biti stotine? Prilično je teško i dosadno pohraniti svaki od njih u zasebnu varijablu. Takođe, korištenje toliko varijabli istovremeno i praćenje svih njih biće vrlo težak zadatak. I ovdje se igra igra. Nizovi rješavaju ovaj problem pružanjem naručene strukture za pohranu više vrijednosti ili grupe vrijednosti.

Kreiranje nizova

Najjednostavniji način stvaranja niza u JavaScript je zatvaranje popisa vrijednosti odvojenih zarezom u uglaste zagrade ([]), kao što je prikazano u sljedećoj sintaksi:

var myArray = [element0, element1, ..., elementN];

Niz se može kreirati i pomoću konstruktora Array() kao što je prikazano u sljedećoj sintaksi. Zbog jednostavnosti se preporučuje prethodna sintaksa.

var myArray = new Array(element0, element1, ..., elementN);

Evo nekoliko primjera nizova stvorenih koristeći sintaksu niza:

var colors = ["Crvena", "Zelena", "Plava"]; 
var voce = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubrnica"];
var cities = ["London", "Pariz", "New York"];
var person = ["Miloš", "Stefan", 32];

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Kreiranje nizova u JavaScript</title>
</head>
<body>
    <script>
    // Kreiranje varijabli
    var colors = ["Crvena", "Zelena", "Plava"]; 
    var voce = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubrnica"];
    var cities = ["London", "Pariz", "New York"];
    var person = ["Miloš", "Stefan", 32];
    
    // Ispisivanje vrijednosti varijabli
    document.write(colors + "<br>");
    document.write(fruits + "<br>");
    document.write(cities + "<br>");
    document.write(person);
    </script>
</body>
</html>

Napomena!

Niz je naručena zbirka vrijednosti. Svaka vrijednost u nizu naziva se elementom, a svaki element ima numerički položaj u nizu, poznat kao njegov indeks.

Pristup elementima niza

Elementima niza može se pristupiti pomoću njihovih indeksa koristeći notaciju u obliku zagrade. Indeks je broj koji predstavlja poziciju elementa u nizu. Indeksi niza se baziraju na nuli. To znači da je prva stavka niza spremljena u indeksu 0, a ne 1, druga stavka je pohranjena u indeksu 1, i tako dalje. Indeksi niza počinju od 0 i prelaze na broj elemenata -1. Dakle, niz pet elemenata imao bi indekse od 0 do 4. Sljedeći primjer će vam pokazati kako dobiti pojedinačni niz polja po njihovom indeksu.

var voce = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubenica"];
 
document.write(voce[0]); // Ispisuje: Jabuka
document.write(voce[1]); // Ispisuje: Banana
document.write(voce[2]); // Ispisuje: Kruška
document.write(voce[voce.length - 1]); // Ispisuje: Lubenica

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pristup pojedinačnim elementima niza</title>
</head>
<body>
    <script>
    var voce = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubenica"];
 
    document.write(voce[0]); // Ispisuje: Jabuka
    document.write(voce[1]); // Ispisuje: Banana
    document.write(voce[2]); // Ispisuje: Kruška
    document.write(voce[voce.length - 1]); // Ispisuje: Lubenica
    </script>
</body>
</html>

Napomena!

U JavaScript nizovi su zaista samo posebna vrsta objekata koji kao ključeve imaju numeričke indekse. Operator typeof vratiće "objekt" za nizove.

Dobijanje dužine niza

Svojstvo length vraća dužinu polja, što je ukupni broj elemenata koji se nalaze u nizu. Dužina niza je uvijek veća od indeksa bilo kog njegovog elementa.

var voce = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubenica"];
document.write(voce.length); // Ispisuje: 5

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dobianje dnužine niza</title>
</head>
<body>
    <script>
    var voce = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubenica"];
    document.write(voce.length); // Ispisuje: 5
    </script>
</body>
</html>

Pregledavanje elemenata niza

Možete koristiti petlju da biste pristupili svakom elementu niza, kao što je prikazano u sljedećem primjeru:

var voce = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubenica"];
 
// Interakcija preko elemenata niza
for(var i = 0; i < voce.length; i++) {    
    document.write(voce[i] + "<br>"); // Ispisuje elemente niza
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Korištenje for petlje u nizu</title>
</head>
<body>
    <script>
    var voce = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubenica"];
 
    // Interakcija preko elemenata niza
    for(var i = 0; i < voce.length; i++) {    
        document.write(voce[i] + "<br>"); // Ispisuje elemente niza
    }
    </script>
</body>
</html>

ECMAScript 6 uveo je jednostavniji način za ponavljanje elementa niza, koji je for-of petlja. U ovoj petlji ne morate inicijalizovati i pratiti varijablu brojača petlje (i). Evo istog primjera napisanog pomoću for-of petlje:

var fruits = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubenica"];
 
// Interakcija preko elemenata niza
for(var fruit of fruits) {    
    document.write(fruit + "<br>"); // Ispisuje elemente niza
}

Takođe možete ponoviti elemente niza pomoću for-in petlje, kao što je prikazano u sljedećem primjeru:

var fruits = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubenica"];
 
// Pregledajte sve elemente u nizu
for(var i in fruits) {  
    document.write(fruits[i] + "<br>");
}

Napomena!

Petlja for-in ne bi se trebala koristiti za ponavljanje niza gdje je redosljed indeksa važan. Petlja za unos je optimizovana za ponavljanje svojstava objekta, bolje bi bilo koristiti petlju s numeričkim indeksom ili for-of.

Dodavanje novih elemenata u niz

Za dodavanje novog elementa na kraju niza, jednostavno koristite push() metodu, kao u sljedećem primjeru:

var colors = ["Crvena", "Zelena", "Plava"]; 
colors.push("Žuta");
 
document.write(colors); // Ispisuje: Crvena,Zelena,Plava,Žuta
document.write(colors.length); // Ispisuje: 4

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dodavanje elementa na kraj niza</title>
</head>
<body>
    <script>
    var colors = ["Crvena", "Zelena", "Plava"]; 
    colors.push("Žuta");
 
    document.write(colors); // Ispisuje: Crvena,Zelena,Plava,Žuta
    document.write(colors.length); // Ispisuje: 4
    </script>
</body>
</html>

Slično tome, za dodavanje novog elementa na početak niza koristite metodu unshift(), kao u sljedećem primjeru:

var colors = ["Crvena", "Zelena", "Palava"]; 
colors.unshift("Žuta");
 
document.write(colors); // Ispisuje: Žuta,Crvena,Zelena,Palava
document.write(colors.length); // Ispisuje: 4

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dodavanje elementa na početak niza</title>
</head>
<body>
    <script>
    var colors = ["Crvena", "Zelena", "Palava"]; 
    colors.unshift("Žuta");
 
    document.write(colors); // Ispisuje: Žuta,Crvena,Zelena,Palava
    document.write(colors.length); // Ispisuje: 4
    </script>
</body>
</html>

Takođe možete dodati više elemenata odjednom koristeći metode push() i unshift(), kao u sljedećem primjeru:

var colors = ["Crvena", "Zelena", "Plava"];
colors.push("Pink", "Ljubičasta");
colors.unshift("Žuta", "Siva");
 
document.write(colors); // Ispisuje: Žuta,Siva,Crvena,Zelena,Plava,Pink,Ljubičasta
document.write(colors.length); // Ispisuje: 7

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dodavanje više elemenata odjednom u niz</title>
</head>
<body>
    <script>
    var colors = ["Crvena", "Zelena", "Plava"];
    colors.push("Pink", "Ljubičasta");
    colors.unshift("Žuta", "Siva");
 
    document.write(colors); // Ispisuje: Žuta,Siva,Crvena,Zelena,Plava,Pink,Ljubičasta
    document.write(colors.length); // Ispisuje: 7
    </script>
</body>
</html>

Uklanjanje elemenata iz niza

Za uklanjanje posljednjeg elementa iz niza možete koristiti pop() metodu. Ova metoda vraća vrijednost koja je iskazana. Pogledajmo primjer:

var colors = ["Crvena", "Zelena", "Plava"];
var last = colors.pop();
 
document.write(last); // Ispisuje: Plava
document.write(colors.length); // Ispisuje: 2

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Uklanjanje zadnjeg elementa niza</title>
</head>
<body>
    <script>
    var colors = ["Crvena", "Zelena", "Plava"];
    var last = colors.pop();
 
    document.write(last); // Ispisuje: Plava
    document.write(colors.length); // Ispisuje: 2
    </script>
</body>
</html>

Slično tome, možete ukloniti prvi element iz niza pomoću metode shift(). Ova metoda takođe vraća vrijednost koja je iskazana. Pogledajmo primjer:

var colors = ["Crvena", "Zelena", "Plava"];
var first = colors.shift();
 
document.write(first); // ispisuje: Crvena
document.write(colors.length); // ispisuje: 2

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Uklanjanje prvog elementa niza</title>
</head>
<body>
    <script>
    var colors = ["Crvena", "Zelena", "Plava"];
    var first = colors.shift();
 
    document.write(first); // ispisuje: Crvena
    document.write(colors.length); // ispisuje: 2
    </script>
</body>
</html>

Savjet!

Metode push() i pop() pokreću se brže od unshift() i shift(), jer metode push() i pop() jednostavno dodaju i uklanjaju elemente na kraju niza, zbog toga se elementi ne kreću, dok unshift() i shift() dodaju i uklanjaju elemente na početku polja koji zahtijevaju ponovno indeksiranje čitavog niza.

Dodavanje ili uklanjanje elemenata na bilo kojoj poziciji

Metoda splice() je vrlo svestran način niza koji vam omogućava dodavanje ili uklanjanje elemenata iz bilo kog indeksa, koristeći sintaksu arr.splice (startIndex, deleteCount, elem1, ..., elemN). Ova metoda uzima tri parametra: prvi parametar je indeks na kojem treba započeti spajanje matrice, drugi parametar je broj elemenata koje treba ukloniti (upotrebite 0 ako ne želite ukloniti nijedan element), izborno je, a treći parametar je skup zamjenskih elemenata, takođe je neobavezan. Sljedeći primjer će vam pokazati kako to funkcioniše:

var colors = ["Crvena", "Zelena", "Plava"];
var removed = colors.splice(0,1); // Uklanja prvi element
 
document.write(colors); // Ispisuje: Zelena,Plava
document.write(removed); // Ispisuje: Crvena (niz predmeta)
document.write(removed.length); // Ispisuje: 1
 
removed = colors.splice(1, 0, "Pink", "Žuta"); // Umetnite dvije stavke na prvo mjesto
document.write(colors); // Ispisuje: Zelena,Pink,Žuta,Plava
document.write(removed); // Prazan niz
document.write(removed.length); // Ispisuje: 0
 
removed = colors.splice(1, 1, "Siva", "Ljubičasta"); // Umetnite dve vrednosti, uklonite jednu
document.write(colors); //Ispisuje: Zelena,Siva,Ljubičasta,Žuta,Plava
document.write(removed); // Ispisuje: Pink (niz predmeta)
document.write(removed.length); // Ispisuje: 1

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dodavanje i uklanjanje elementa niza na bilo kom mijestu</title>
</head>
<body>
    <script>
    var colors = ["Red", "Green", "Blue"];
    var removed = colors.splice(0,1); // Remove the first element
     
    document.write(colors + "<br>"); // Prints: Green,Blue
    document.write(removed + "<br>"); // Prints: Red (one item array)
    document.write(removed.length + "<br>"); // Prints: 1
     
    removed = colors.splice(1, 0, "Pink", "Yellow"); // Insert two items at position one
    document.write(colors + "<br>"); // Prints: Green,Pink,Yellow,Blue
    document.write(removed + "<br>"); // Empty array
    document.write(removed.length + "<br>"); // Prints: 0
     
    removed = colors.splice(1, 1, "Purple", "Voilet"); // Insert two values, remove one
    document.write(colors + "<br>"); //Prints: Green,Purple,Voilet,Yellow,Blue
    document.write(removed + "<br>"); // Prints: Pink (one item array)
    document.write(removed.length); // Prints: 1
    </script>
</body>
</html>

Metoda splice() vraća niz izbrisanih elemenata ili prazan niz ako nisu izbrisani elementi, kao što možete vidjeti u gornjem primjeru. Ako je drugi argument izostavljen, uklanjaju se svi elementi od početka do kraja polja. Za razliku od metoda slice() i concat(), metoda splice() modifikuje niz na koji se poziva.

Stvaranje stringa iz niza

Možda postoje situacije u kojima jednostavno želite stvoriti string pridruživanjem elemenata nizu. Da biste to učinili možete koristiti metodu join(). Ova metoda uzima neobavezni parametar koji je niz separatora koji se dodaje između svakog elementa. Ako izostavite separator, JavaScript će prema zadanim postavkama koristiti zarez (,). Sledeći primjer pokazuje kako to funkcioniše:

var colors = ["Crvena", "Zelena", "Plava"];
 
document.write(colors.join()); // Ispisuje: Crvena,Zelena,Plava
document.write(colors.join("")); // Ispisuje: CrvenaZelenaPlava
document.write(colors.join("-")); // Ispisuje: Crvena-Zelena-Plava
document.write(colors.join(", ")); // Ispisuje: Crvena, Zelena, Plava

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Spajanje svih elementa niza u string</title>
</head>
<body>
    <script>
    var colors = ["Crvena", "Zelena", "Plava"];
 
    document.write(colors.join()); // Ispisuje: Crvena,Zelena,Plava
    document.write(colors.join("")); // Ispisuje: CrvenaZelenaPlava
    document.write(colors.join("-")); // Ispisuje: Crvena-Zelena-Plava
    document.write(colors.join(", ")); // Ispisuje: Crvena, Zelena, Plava
    </script>
</body>
</html>

String takođe možete pretvoriti u niz odvojen zarezom pomoću toString(). Ova metoda ne prihvata parametar razdvajanja poput join(). Pogledajmo primjer:

var colors = ["Crvena", "Zelena", "Plava"];
document.write(colors.toString()); // Ispisuje: Crvena,Zelena,Plava

Izdvajanje dijela niza

Ako želite izdvojiti dio niza (tj. Subarray), ali zadržati izvorni niz netaknut, možete koristiti metodu slice(). Ova metoda uzima 2 parametra: početni indeks (indeks na kojem treba započeti ekstrakciju) i fakultativni krajnji indeks (indeks prije kog treba završiti ekstrakciju), poput arr.slice (startIndex, endIndex). Pogledajmo primjer:

var fruits = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubenica"];
var subarr = fruits.slice(1, 3);
document.write(subarr); // Ispisuje: Banana,Kruška

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Izdvajanje dijela niza</title>
</head>
<body>
    <script>
    var fruits = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubenica"];
    var subarr = fruits.slice(1, 3);
    document.write(subarr); // Ispisuje: Banana,Kruška
    </script>
</body>
</html>

Ako je parametar endIndex izostavljen, svi elementi na kraju niza se izdvajaju. Možete odrediti i negativne indekse ili nadoknade. U tom slučaju metoda slice() izvlači elemente sa kraja niza, a ne sa početka. Pogledajmo primjer:

var fruits = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubenica"];
 
document.write(fruits.slice(2)); // Ispisuje: Kruška,Narandža,Lubenica
document.write(fruits.slice(-2)); // Ispisuje: Narandža,Lubenica
document.write(fruits.slice(2, -1)); // Ispisuje: Kruška,Narandža

Spajanje dva ili više nizova

Metoda concat() može se koristiti za spajanje ili kombinaciju dvaju ili više nizova. Ova metoda ne mijenja postojeći niz, umjesto toga vraća novi niz. Pogledajmo primjer:

var pets = ["Mačka", "Pas", "Riba"];
var wilds = ["Tigar", "Vuk", "Zebra"];
 
// Stvaranje novog niza kombiniranjem nizova kućnih ljubimaca i divljih životinja
var animals = pets.concat(wilds); 
document.write(animals); // Ispisuje: Mačka,Pas,Riba,Tigar,Vuk,Zebra

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Spajanje dva niza</title>
</head>
<body>
    <script>
    var pets = ["Mačka", "Pas", "Riba"];
    var wilds = ["Tigar", "Vuk", "Zebra"];
 
    // Stvaranje novog niza kombiniranjem nizova kućnih ljubimaca i divljih životinja
    var animals = pets.concat(wilds); 
    document.write(animals); // Ispisuje: Mačka,Pas,Riba,Tigar,Vuk,Zebra
    </script>
</body>
</html>

Metoda concat() može uzeti bilo koji broj argumenata niza, tako da možete stvoriti niz iz bilo kog broja drugih nizova, kao što je prikazano u sljedećem primjeru:

var pets = ["Mačka", "Pas", "Riba"];
var wilds = ["Tiger", "Vuk", "Zebra"];
var bugs = ["Jelen", "Medved"];
 
// Stvaranje novog niza kombiniranjem nizova kućnih ljubimaca, divljih životinja i bugova
var animals = pets.concat(wilds, bugs); 
document.write(animals); // Ispisuje: Mačka,Pas,Riba,Tiger,Vuk,Zebra,Jelen,Medved

Pretraživanje niza

Ako želite pretražiti niz za određenu vrijednost, jednostavno možete koristiti indexOf() i lastIndexOf(). Ako se vrijednost pronađe, obe metode vraćaju indeks koji predstavlja element polja. Ako vrijednost nije pronađena, vraća se -1. Metoda indexOf() vraća prvo pronađeno polje, dok lastIndexOf() vraća posljednje pronađeno polje.

var fruits = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubenica"];
 
document.write(fruits.indexOf("Jabuka")); // Ispisuje: 0
document.write(fruits.indexOf("Banana")); // Ispisuje: 1
document.write(fruits.indexOf("Šljiva")); // Ispisuje: -1

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pretraživanje da li niz uključuje određenu vrijednost</title>
</head>
<body>
    <script>
   var fruits = ["Jabuka", "Banana", "Kruška", "Narandža", "Lubenica"];
 
    document.write(fruits.indexOf("Jabuka")); // Ispisuje: 0
    document.write(fruits.indexOf("Banana")); // Ispisuje: 1
    document.write(fruits.indexOf("Šljiva")); // Ispisuje: -1
    </script>
</body>
</html>

Obe metode prihvataju i neobvezni integralni parametar iz indeksa koji specifikuje indeks u nizu na kojem započinje pretraživanje. Pogledajmo primjer:

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
// Traži napred, počevši od indeksa
document.write(arr.indexOf(1, 2)); // Ispisuje: 3
 
// Traži unazad, počevši od indeksa
document.write(arr.lastIndexOf(1, 2)); // Ispisuje: 0

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pretražanje niza za određenu vrijednost izvan određenog indeksa</title>
</head>
<body>
    <script>
    var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
    // Traži napred, počevši od indeksa
    document.write(arr.indexOf(1, 2)); // Ispisuje: 3
 
    // Traži unazad, počevši od indeksa
    document.write(arr.lastIndexOf(1, 2)); // Ispisuje: 0
    </script>
</body>
</html>

Možete koristiti i includes() metodu da biste saznali uključuje li niz određeni element ili ne. Ova metoda uzima iste parametre kao i metode indexOf() i lastIndexOf(), ali vraća vrijednost true ili false umjesto broja indeksa. Pogledajmo primjer:

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
document.write(arr.includes(1)); // Ispisuje: true
document.write(arr.includes(6)); // Ispisuje: false
document.write(arr.includes(1, 2)); // Ispisuje: true
document.write(arr.includes(3, 4)); // Ispisuje: false

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pronalaženje da li niz uključuje određenu vrijednost</title>
</head>
<body>
    <script>
    var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
    document.write(arr.includes(1)); // Ispisuje: true
    document.write(arr.includes(6)); // Ispisuje: false
    document.write(arr.includes(1, 2)); // Ispisuje: true
    document.write(arr.includes(3, 4)); // Ispisuje: false
    </script>
</body>
</html>

Ako želite pretraživati niz na temelju određenog stanja, tada možete koristiti JavaScript find() metodu koja je novo uvedena u ES6. Ova metoda vraća vrijednost prvog elementa u nizu koji zadovoljava pruženu funkciju testiranja. U suprotnom se vraća neodređeno (undefined). Pogledajmo primjer:

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.find(function(element) {
  return element > 4;
});
document.write(result); // Ispisuje: 5

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pretraživanje niz na osnovu određenog stanja</title>
</head>
<body>
    <script>
    var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
    var result = arr.find(function(element) {
        return element > 4;
    });
    document.write(result); // Ispisuje: 5
    </script>
</body>
</html>

Postoji još jedna metoda slična metodi find(), a to je findIndex(), koja vraća indeks pronađenog elementa u nizu umjesto njegove vrijednosti. Pogledajmo primjer:

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.findIndex(function(element) {
  return element > 6;
});
document.write(result); // Ispisuje: 8

Metoda find() traži samo prvi element koji zadovoljava dato testiranje. Međutim, ako želite saznati sve podudarne elemente, možete koristiti filter() metodu. Metoda filter() kreira novi niz sa svim elementima koji uspješno prolaze dati test. Sljedeći primjer će vam pokazati kako to zapravo funkcioniše:

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.filter(function(element) {
  return element > 4;
});
document.write(result); // Ispisuje: 5,7
document.write(result.length); // Ispisuje: 2

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Filtriranje niz</title>
</head>
<body>
    <script>
    var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
    var result = arr.filter(function(element) {
        return element > 4;
    });
    document.write(result); // Ispisuje: 5,7
    document.write(result.length); // Ispisuje: 2
    </script>
</body>
</html>