JavaScripti kaardistamine, vähendamine ja filtreerimine - koodinäidetega selgitatud JS massiivi funktsioonid

Kaardistamine, vähendamine ja filtreerimine on kõik JavaScripti massiivimeetodid. Igaüks kordab massiivi ja teostab teisenduse või arvutamise. Igaüks tagastab funktsiooni tulemuse põhjal uue massiivi. Selles artiklis saate teada, miks ja kuidas neid kõiki kasutada.

Siin on Steven Luscheri lõbus kokkuvõte:

Kaardista / filtreeri / vähenda säutsus:

kaart ([?,?,?], kokk)

=> [?,?,?]

filter ([?,?,?], on taimetoitlane)

=> [?,?]

vähendama ([?,?], sööma)

=>?

- Steven Luscher (@steveluscher) 10. juuni 2016

Kaart

map()Meetodit kasutatakse uue loomisega massiivist olemasolevaga, rakendades funktsiooni igale üks elemente esimesest massiivist.

Süntaks

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

Tagasihelistamisel elementon vajalik ainult massiiv . Tavaliselt tehakse väärtusega mõni toiming ja seejärel tagastatakse uus väärtus.

Näide

Järgmises näites on massiivi iga number kahekordistunud.

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

Filtreeri

filter()Meetod võtab iga element massiivi ja see kehtib tingimuslik avaldus vastu. Kui see tingimus tagastab tõene, lükatakse element väljundmassiivi. Kui tingimus tagastab vale, ei lükata elementi väljundmassiivi.

Süntaks

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

Rakenduse süntaks filteron sarnane map, välja arvatud see, et tagasihelistamisfunktsioon peaks trueelemendi säilitamiseks tagasi minema või falsemuul viisil. Tagasihelistamisel elementon nõutav ainult .

Näited

Järgmises näites paaritu arv "filtreeritakse" välja, jättes ainult paarisarvud.

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

Järgmises näites filter()kasutatakse selleks, et saada kõik õpilased, kelle hinne on suurem või võrdne 90-ga.

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 } ]

Vähenda

reduce()Meetod vähendab massiivi väärtuste alla vaid üks väärtus. Väljundväärtuse saamiseks käivitab see massiivi igal elemendil reduktori funktsiooni.

Süntaks

arr.reduce(callback[, initialValue])

callbackArgument on funktsioon, mis saab nimeks üks kord iga elemendi massiivist. See funktsioon võtab neli argumenti, kuid sageli kasutatakse ainult kahte esimest.

  • akumulaator - eelmise iteratsiooni tagastatud väärtus
  • currentValue - massiivi praegune üksus
  • indeks - praeguse üksuse register
  • massiiv - algne massiiv, millele redutseeriti
  • initialValueArgument on vabatahtlik. Kui see on ette nähtud, kasutatakse seda tagasihelistamisfunktsiooni esimesel kutsumisel esialgse akumulaatori väärtusena.

Näited

Järgmine näide liidab kõik numbrid arvude massiivi.

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

Järgmises näites reduce()kasutatakse stringide massiivi teisendamiseks üheks objektiks, mis näitab, mitu korda iga string massiivis ilmub. Teatis see kõne vähendada läbib tühja objekti {}kui initialValueparameeter. Seda kasutatakse tagasihelistamisfunktsioonile edastatud aku (esimese argumendi) algväärtusena.

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 selgitus

Vaadake allolevat videot YouTube'i kanalilt freeCodeCamp.org. See hõlmab arutatud massiivi meetodeid ja veel mõnda.