A leképezés, kicsinyítés és szűrés mind a tömb metódusai a JavaScript-ben. Mindegyik ismétlődik egy tömbön, és transzformációt vagy számítást hajt végre. Mindegyik egy új tömböt ad vissza a függvény eredménye alapján. Ebben a cikkben megtudhatja, miért és hogyan kell használni mindegyiket.
Steven Luscher szórakoztató összefoglalója:
Térkép / szűrés / kicsinyítés tweetben:
térkép ([?,?,?], szakács)
=> [?,?,?]
szűrő ([?,?,?], vegetáriánus)
=> [?,?]
redukálni ([?,?], enni)
=>?
- Steven Luscher (@steveluscher) 2016. június 10Térkép
A map()módszer egy új tömb létrehozására szolgál egy meglévőből, egy funkciót alkalmazva az első tömb mindegyik elemére.
Szintaxis
var new_array = arr.map(function callback(element, index, array) { // Return value for new_array }[, thisArg])A visszahívásban csak a tömbre elementvan szükség. Általában valamilyen műveletet hajtanak végre az értéken, majd egy új értéket adnak vissza.
Példa
A következő példában egy tömb minden egyes száma megduplázódik.
const numbers = [1, 2, 3, 4]; const doubled = numbers.map(item => item * 2); console.log(doubled); // [2, 4, 6, 8]Szűrő
A filter()módszer minden elemet egy tömbbe vesz, és feltételes utasítást alkalmaz ellene. Ha ez a feltétel visszatér igazra, akkor az elem a kimeneti tömbhöz kerül. Ha a feltétel hamis értéket ad vissza, akkor az elem nem kerül a kimeneti tömbhöz.
Szintaxis
var new_array = arr.filter(function callback(element, index, array) { // Return true or false }[, thisArg])A (z) for szintaxisa filterhasonló map, kivéve, hogy a visszahívási függvénynek vissza kell térnie trueaz elem megtartásához, vagy sem false. A visszahívásban csak a elementszükséges.
Példák
A következő példában a páratlan számokat "kiszűrjük", csak páros számok maradnak meg.
const numbers = [1, 2, 3, 4]; const evens = numbers.filter(item => item % 2 === 0); console.log(evens); // [2, 4]A következő példában filter()az összes hallgató megszerzésére használatos, akiknek az osztályzata 90-nél nagyobb vagy egyenlő.
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 } ]Csökkentse
A reduce()módszer az értékek tömbjét egyetlen értékre redukálja. A kimeneti érték megszerzéséhez a tömb minden elemén futtat egy reduktort.
Szintaxis
arr.reduce(callback[, initialValue])Az callbackargumentum egy olyan függvény, amelyet a tömb minden eleméhez egyszer meghívunk. Ehhez a függvényhez négy argumentum szükséges, de gyakran csak az első kettőt használják.
- akkumulátor - az előző iteráció visszaadott értéke
- currentValue - a tömb aktuális eleme
- index - az aktuális elem indexe
- tömb - az eredeti tömb, amelyen redukciót hívtak meg
- Az
initialValueérvelés nem kötelező. Ha rendelkezésre áll, akkor a visszahívási funkció első hívásakor kezdeti akkumulátorértékként fogja használni.
Példák
A következő példa minden számot összead egy számtömbben.
const numbers = [1, 2, 3, 4]; const sum = numbers.reduce(function (result, item) { return result + item; }, 0); console.log(sum); // 10A következő példában reduce()a karakterláncok tömbjét egyetlen objektummá alakítják, amely megmutatja, hogy az egyes húrok hányszor jelennek meg a tömbben. Figyeljük meg ezt a felhívást, hogy csökkentse halad egy üres objektumot {}, mint a initialValueparaméter. Ezt fogják használni a visszahívási függvénynek átadott akkumulátor kezdeti értékeként (az első argumentum).
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 } */Videomagyarázat
Nézze meg az alábbi videót a freeCodeCamp.org YouTube csatornán. Ez magában foglalja a megtárgyalt tömb módszereket, és még néhányat.