JavaScript karta, smanjenje i filtriranje - funkcije JS niza objašnjene s primjerima koda

Mapiranje, smanjivanje i filtriranje sve su metode niza u JavaScript-u. Svaki će se iterirati preko niza i izvršiti transformaciju ili izračunavanje. Svaki će vratiti novi niz na temelju rezultata funkcije. U ovom ćete članku naučiti zašto i kako ih koristiti.

Evo zabavnog sažetka Stevena Luschera:

Karta / filtriranje / smanjenje u tvitu:

karta ([?,?,?], kuhati)

=> [?,?,?]

filter ([?,?,?], jeVegetarijanski)

=> [?,?]

smanjiti ([?,?], jesti)

=>?

- Steven Luscher (@steveluscher) 10. lipnja 2016

Karta

map()Metoda se koristi za stvaranje nove niz od postojećeg, primjenom funkcije za svaki od elemenata prvog niza.

Sintaksa

var new_array = arr.map(function callback(element, index, array) { // Return value for new_array }[, thisArg])

U povratnom pozivu elementpotreban je samo niz . Obično se izvrši neka radnja na vrijednosti, a zatim se vrati nova vrijednost.

Primjer

U sljedećem primjeru svaki se broj u nizu udvostručuje.

const numbers = [1, 2, 3, 4]; const doubled = numbers.map(item => item * 2); console.log(doubled); // [2, 4, 6, 8]

filtar

filter()Metoda uzima svaki element u nizu i to se odnosi na uvjetnu izjavu protiv nje. Ako ovaj uvjetni uvjet vrati true, element se gura u izlazni niz. Ako uvjet vrati false, element se neće gurnuti u izlazni niz.

Sintaksa

var new_array = arr.filter(function callback(element, index, array) { // Return true or false }[, thisArg])

Sintaksa for filterje slična map, osim što bi se funkcija povratnog poziva trebala vratiti trueda zadrži element ili u falsesuprotnom. U povratnom pozivu elementpotreban je samo znak .

Primjeri

U sljedećem primjeru neparni brojevi su "filtrirani", a ostaju samo parni brojevi.

const numbers = [1, 2, 3, 4]; const evens = numbers.filter(item => item % 2 === 0); console.log(evens); // [2, 4]

U sljedećem primjeru filter()koristi se za dobivanje svih učenika čije su ocjene veće ili jednake 90.

const students = [ { name: 'Quincy', grade: 96 }, { name: 'Jason', grade: 84 }, { name: 'Alexis', grade: 100 }, { name: 'Sam', grade: 65 }, { name: 'Katie', grade: 90 } ]; const studentGrades = students.filter(student => student.grade >= 90); return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]

Smanjiti

reduce()Način smanjuje niz vrijednosti dolje samo jedne vrijednosti. Da bi dobila izlaznu vrijednost, izvršava funkciju reduktora na svakom elementu niza.

Sintaksa

arr.reduce(callback[, initialValue])

callbackArgument je funkcija koja će se zvati jednom za svaku stavku u polju. Ova funkcija uzima četiri argumenta, ali često se koriste samo prva dva.

  • akumulator - vraćena vrijednost prethodne iteracije
  • currentValue - trenutna stavka u polju
  • indeks - indeks trenutne stavke
  • niz - izvorni niz na kojem je pozvan reducirati
  • initialValueArgument je neobavezan. Ako je naveden, koristit će se kao početna vrijednost akumulatora u prvom pozivu funkcije povratnog poziva.

Primjeri

Sljedeći primjer dodaje svaki broj zajedno u niz brojeva.

const numbers = [1, 2, 3, 4]; const sum = numbers.reduce(function (result, item) { return result + item; }, 0); console.log(sum); // 10

U sljedećem primjeru reduce()koristi se za transformiranje niza nizova u jedan objekt koji pokazuje koliko se puta svaki niz pojavljuje u nizu. Primijetite ovaj poziv za smanjenje {}kao initialValueparametar prolazi prazan objekt . To će se koristiti kao početna vrijednost akumulatora (prvi argument) proslijeđen funkciji povratnog poziva.

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit']; var petCounts = pets.reduce(function(obj, pet){ if (!obj[pet]) { obj[pet] = 1; } else { obj[pet]++; } return obj; }, {}); console.log(petCounts); /* Output: { dog: 2, chicken: 3, cat: 1, rabbit: 1 } */

Video objašnjenje

Pogledajte video u nastavku sa YouTube kanala freeCodeCamp.org. Obuhvaća raspravljene metode niza i još nekoliko njih.