Spiekbrief JavaScript array-methoden (draai ze allemaal live) | We.Inc
Typ uw eigen lijst en zie map, filter, reduce, find, sort, splice en 30 andere array-methoden erop draaien, met een duidelijke markering bij elke methode die de originele array wijzigt.
Array-methoden vallen in twee kampen. Sommige wijzigen de array waarop u ze aanroept, zoals push, pop, splice, sort en reverse. Andere geven een nieuwe array of waarde terug en laten het origineel met rust, zoals map, filter, slice, toSorted en reduce. Pas de lijst hieronder aan en elke methode draait opnieuw op uw waarden.
Dagelijkse array-taken en de methode voor elke taak
Taak
Methode
Wijzigt het origineel?
Elk item omzetten
arr.map(fn)
Nee
Items houden die een test doorstaan
arr.filter(fn)
Nee
Samenvoegen tot één waarde
arr.reduce(fn, start)
Nee
Eerste item dat overeenkomt
arr.find(fn)
Nee
Achteraan toevoegen
arr.push(x)
Ja
Gesorteerde kopie
arr.toSorted(fn)
Nee
De items tellen
Uitlezen niet, instellen wel
De meeste spiekbrieven geven methodenamen met één vast voorbeeld. Hier draaien de voorbeelden op een lijst die u zelf bepaalt, zodat u ziet wat er gebeurt met dubbele waarden, een lege lijst of één enkel item. Elke rij heeft een label, zodat u in één oogopslag ziet of een methode uw data herschrijft, de oorzaak van veel state-bugs in React en vergelijkbare libraries.
Typ een door komma's gescheiden lijst in het vak. Spaties rond elk item worden weggehaald.
Elke rij rekent opnieuw. Methoden die de array wijzigen draaien telkens op een verse kopie, en de rij toont zowel de returnwaarde als de array erna.
Filter op naam of kies een groep zoals Zoeken of Omzetten om de lijst te beperken.
Scroll naar beneden voor voorbeelden van chaining, de length-property en de tabel om muterende methoden voor kopiërende te ruilen.
Kies in React-state liever toSorted, toReversed, toSpliced en with dan hun in-place tegenhangers, want als u de oude array wijzigt merkt React de update misschien niet op.
Geef reduce een beginwaarde. Zonder beginwaarde gooit een lege array een TypeError.
forEach geeft altijd undefined terug en is niet te stoppen met break. Gebruik for...of, some of find als u vroeg wilt stoppen.
map, filter en slice kopiëren maar één niveau diep. Objecten in de nieuwe array zijn dezelfde objecten als ervoor.
Veelgestelde vragen
Hoe krijg ik de lengte van een array in JavaScript?
Lees arr.length uit. Het is een property, geen methode, dus er horen geen haakjes bij. De waarde is één meer dan de hoogste index, wat bij normale arrays gelijk is aan het aantal items. Met arr.length = 0 maakt u de array leeg, en een kleiner getal knipt items aan het eind af.
Wat is het verschil tussen map en forEach?
map bouwt een nieuwe array uit wat uw functie voor elk item teruggeeft, zodat u die kunt toewijzen of er meer methoden aan kunt koppelen. forEach roept alleen uw functie aan en geeft undefined terug. Gebruik map als u een resultaat wilt en forEach alleen voor bijwerkingen zoals loggen.
Welke array-methoden muteren de originele array?
push, pop, shift, unshift, splice, sort, reverse, fill en copyWithin wijzigen de array ter plekke. Direct length of een index instellen doet dat ook. Al het andere op deze spiekbrief laat de array ongemoeid.
Hoe verwijder ik een item uit een array zonder die te wijzigen?
Gebruik filter om op waarde te verwijderen, bijvoorbeeld arr.filter((x) => x !== 'kiwi'), of toSpliced(index, 1) om op positie te verwijderen. Beide geven een nieuwe array terug en laten het origineel zoals het was.
Waarom geeft map undefined-waarden terug?
Uw callback gaf niets terug. Een arrow function met accolades heeft een expliciete return nodig; schrijf (x) => x * 2 of (x) => { return x * 2; }. Een ontbrekende return geeft undefined voor die plek.
Een chain van links naar rechts lezen
Omdat kopiërende methoden arrays teruggeven, kunt u direct een volgende methode op het resultaat aanroepen. Een chain als orders.filter(isPaid).map(toTotal).reduce(add, 0) leest als een zin: houd de betaalde bestellingen, maak van elke bestelling een getal, tel ze op.
Lange chains lezen makkelijk, maar lopen de lijst per stap één keer door. Bij een paar duizend items maakt dat nooit uit; bij heel grote data is één for...of-lus die alle drie de taken doet sneller.
Zoekmethoden geven verschillende dingen terug
includes antwoordt ja of nee. indexOf en findIndex geven een positie, waarbij -1 niet gevonden betekent. find en findLast geven het item zelf, of undefined. some en every beantwoorden een ja-of-neevraag over een testfunctie.
includes en indexOf vergelijken met strikte gelijkheid, dus ze kunnen een object niet op inhoud vinden. Gebruik daarvoor find of some met een testfunctie.
Muterende methoden en hun kopiërende tegenhangers
Als u het origineel niet mag aanraken, bijvoorbeeld React-state of een functieargument, ruil dan de linkerkolom voor de rechter.
Ter plekke versus kopie
Wijzigt de array
Geeft in plaats daarvan een nieuwe array terug
arr.sort(fn)
arr.toSorted(fn)
arr.reverse()
arr.toReversed()
arr.splice(i, n, ...items)
arr.toSpliced(i, n, ...items)
arr[i] = value
arr.with(i, value)
arr.push(a, b)
[...arr, a, b] of arr.concat([a, b])
arr.unshift(a)
[a, ...arr]
arr.pop()
arr.slice(0, -1)
arr.shift()
arr.slice(1)
map, filter en reduce aan elkaar koppelen
Totaal van betaalde bestellingen in één chain
Elke stap geeft een verse array terug, zodat de volgende methode daarop draait. De originele lijst met bestellingen wordt nooit gewijzigd.
length uitlezen en instellen
length is een gewone property. Als u hem verkleint, verdwijnen er items aan het eind, en daarom telt het als een wijziging van de array.
React-state bijwerken zonder te muteren
Kopiërende methoden geven React een nieuwe array, zodat het component opnieuw rendert. sort of push aanroepen op de state-array zou dat niet doen.
Hoeveel items
Eerste item
Laatste item, geteld vanaf het eind
true als de waarde aanwezig is
Eerste positie van de waarde, of -1
Laatste positie van de waarde, of -1
Eerste item dat de test doorstaat
Positie van het eerste item dat slaagt
Laatste item dat de test doorstaat
true als een item slaagt
true als alle items slagen
Nieuwe array met elk callback-resultaat
Nieuwe array met de items die slagen
Vouwt de lijst samen tot één waarde
map, daarna één niveau platslaan
Kopie van posities 1 en 2
Nieuwe array met extra items aan het eind
Eén string met een scheidingsteken
Gesorteerde kopie (tekstvolgorde)
Omgekeerde kopie
Kopie zonder positie 1
Kopie met positie 0 vervangen
Sorteert ter plekke en geeft dezelfde array terug
Keert ter plekke om
Voegt achteraan toe, geeft de nieuwe lengte terug
Verwijdert het laatste item en geeft het terug
Voegt vooraan toe, geeft de nieuwe lengte terug
Verwijdert het eerste item en geeft het terug
Verwijdert vanaf positie 1, geeft de verwijderde items terug
Overschrijft van positie 1 tot het eind
Kopieert een deel van de array over een ander deel
Iterator van posities (hier gespreid om hem te tonen)
Iterator van [positie, item]-paren
Alles
Uitlezen
Zoeken
Omzetten
Volgorde
Toevoegen en verwijderen
Itereren
Live spiekbrief array-methoden
Typ een door komma's gescheiden lijst en elke methode hieronder draait erop terwijl u typt.