...

Metoda map()

Metoda map() kreira novi niz tako što naд elementima nekog niza izvrši određenu funkciju za svaki član pojedinačno.

Nakon izvršavanja funkcije redom nad svim elementima niza, kao rezultat se dobija novi niz.

(Niz nad kojim se vrši ova metoda će nakon toga ostati isti kao što je i bio)

 

Primer 1: 

Ako se koristi anonimna funkcija za definisanje akcije nad članovima niza:

<script>
var niz1 = [1, 2, 10, 12];
var umanjiZaJedan = niz1.map(function(x) {
   return x - 1;
});
// umanjiZaJedan je novi niz koji dobijamo kada se svaki
// element niza umanji za jedan [0, 1, 9, 11]
// niz1 i dalje ostaje da je  [1, 2, 10, 12]

Primer 2: 

Ako se koristi posebno napisana funkcija za definisanje akcije nad članovima niza:

incrementBy1 = function (el) {
  return el + 1;
}

niz2 = [1,2,3,4];

var niz3 = niz2.map(incrementBy1);
 // niz3 je [2,3,4,5]
// niz2 ostaje isti

Primer 3: 

Ako se koristi ugrađena funkcija (na primer iz klase Math) za definisanje akcije nad članovima niza:

var niz4 = [1, 4, 16];
var koren = niz.map(Math.sqrt);
// novi niz je koren: [1, 2, 4] niz kvadratnih korena elementata niza 
// niz4 i dalje ostaje da je je [1, 4, 16]
</script>

Zadatak:

Deo 1

Kreirati niz brojeva

U web stranici postaviti dugme za prikaz elemenata niza, kao i paragraf u kojem će se ti elemeti prikazati.

html:

<p id="p1"> .... ? </p>
<button onclick="prikaz(niz1)"> Prikaz niza</p>

js:

var niz1 = [1, 4, 9, 16];
function prikaz(x) {
document.getElementById("p1").innerHTML = "Elementi niza su: " + x.join();

Deo 2

Kreirati novi niz brojeva tako što će se uzeti elementi prvog niza i umanjiti za 1.

Na web stranicu dodati dugme za prikaz tog novog niza - u onaj isti paragraf kao u prvom delu zadatka.

 

js:

var umanjenNiz1 = niz1.map(function(x) { return x-1; })

html:

<button onclick="prikaz(umanjenNiz1)"> Prikaz UMANJENOG niza</p>

Deo 3

Kreirati novi niz brojeva tako što će se uzeti elementi prvog niza i pomnožiti sa 2.

Na web stranicu dodati dugme za prikaz tog novog niza - u onaj isti paragraf kao u prvom delu zadatka.

 

js:

function duplo(broj)
{
return broj*2;
}
var dupliNiz1 = niz1.map(duplo)

html:

<button onclick="prikaz(dupliNiz1)"> Prikaz DUPLOG niza</p>

Deo 4

Kreirati novi niz brojeva tako što će se uzeti elementi prvog niza i uyeti kvadratni koren od njih.

Na web stranicu dodati dugme za prikaz tog novog niza - u onaj isti paragraf kao u prvom delu zadatka.

 

js:

// ovde se koristi ugrađena funkcija sqrt iz biblioteke Math

var korenKo = niz1.map(Math.sqrt)

html:

<button onclick="prikaz(korenKo)"> Prikaz niza korenova prvog niza</p> 


Za učenike koji žele da znaju više:

1. Link ka kompletnoj lekciji i mestu gde se može vežbati: https://edusoft.matf.bg.ac.rs/eskola_veba/#/course/js/js_map

2. Pregled objekata ugrađenih u JavaScript (uključujući i Math smile

3. (opciono) Rad sa datumima: https://edusoft.matf.bg.ac.rs/eskola_veba/#/course/js/js_datumi
Last modified: Tuesday, 16 December 2025, 9:59 AM