Topp 11 (og flere!) JavaScript-funksjoner du må vite

by
Tweet
Share
Share
Pin
0 Shares

Kode smart! Vær en raskere, mer produktiv og gladere JavaScript-utvikler ved å mestre disse viktigste og tilbakevendende funksjonene på språket.

Enten det er backend eller frontend (eller til og med romskip), JavaScript er overalt. Det er også et ganske fleksibelt språk (som betyr at det har hardcore funksjonelle programmeringsmønstre så vel som gode gamle klasser), og dets likhet med andre «C-lignende» språk gir en enkel overgang for utviklere fra andre språk.

Hvis du vil nivå opp ditt JS-spill, Jeg foreslår at du lærer om, øver på og til slutt mestrer de følgende kjernefunksjonene som er tilgjengelige på språket. Ikke alle disse er strengt tatt «nødvendig» for å løse problemer, men de kan gjøre mye tungt for deg i noen tilfeller, mens i andre kan disse redusere mengden kode du må skrive.

kart()

Det ville være kjetteri å skrive en artikkel om viktige JavaScript-funksjoner og ikke nevne map()! 😆😆 Sammen med filter() og reduser(), danner map() en hellig treenighet. Dette er funksjoner du kommer til å bruke om og om igjen i karrieren din, så de er mer enn verdt en titt. La oss takle dem én etter én, og starter med map().

map() er blant de funksjonene som gir mest problemer for folk å lære JavaScript. Hvorfor? Ikke fordi det er noe iboende komplekst ved det, men fordi måten denne funksjonen fungerer på er en idé hentet fra det som kalles funksjonell programmering. Og siden vi ikke er utsatt for funksjonell programmering – skolene våre og industrien er full av objektorienterte språk – virker det merkelig eller til og med feil for våre partiske hjerner.

JavaScript er langt mer funksjonelt enn objektorientert, selv om moderne versjoner gjør sitt beste for å skjule dette faktum. Men det er en hel boks med ormer som jeg kanskje kan åpne en annen dag. 🤣 Ok, så, kart() . . .

map() er en veldig enkel funksjon; den fester seg til en matrise og hjelper oss å konvertere hvert element til noe annet, noe som resulterer i en ny matrise. Hvordan man konverterer et element nøyaktig, er gitt som en annen funksjon, som etter konvensjon er anonym.

Det er alt som skal til! Syntaksen kan ta litt tid å bli vant til, men i hovedsak er det det vi gjør i en map()-funksjon. Hvorfor vil vi kanskje bruke map()? Det kommer an på hva vi prøver å oppnå. La oss for eksempel si at vi registrerte temperaturen for hver dag i den siste uken og lagret den som en enkel matrise. Men nå blir vi fortalt at instrumentene ikke var særlig nøyaktige og har rapportert 1,5 grader lavere temperatur enn de burde ha.

Vi kan gjøre denne korreksjonen ved å bruke map()-funksjonen slik:

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const correctedWeeklyReadings = weeklyReadings.map(reading => reading + 1.5);

console.log(correctedWeeklyReadings); // gives [ 21.5, 23.5, 22, 20.5, 22.5, 23, 24.5 ]

Et annet, veldig praktisk, eksempel kommer fra React-verdenen, hvor å lage DOM-elementlister fra arrays er et vanlig mønster; så noe som dette er vanlig:

export default ({ products }) => {
    return products.map(product => {
        return (
            <div className="product" key={product.id}>
                <div className="p-name">{product.name}</div>
                <div className="p-desc">{product.description}</div>
            </div>
        );
    });
};

Her har vi en funksjonell React-komponent som mottar en liste over produkter som rekvisitter. Fra denne listen (arrayen), bygger den deretter ut en liste over HTML «divs», og konverterer i hovedsak hvert produktobjekt til HTML. Det originale produktobjektet forblir urørt.

Du kan argumentere for at map() ikke er annet enn en glorifisert for loop, og du vil ha helt rett. Men legg merke til at så snart du kommer med det argumentet, er det ditt objektorienterte trente sinn som snakker, mens disse funksjonene og deres begrunnelse kommer fra funksjonell programmering, hvor enhetlighet, kompakthet og eleganse er høyt aktet. 🙂

filter()

filter() er en svært nyttig funksjon som du vil finne deg selv å bruke om og om igjen i mange situasjoner. Som navnet antyder, filtrerer denne funksjonen en matrise basert på reglene/logikken du oppgir, og returnerer en ny matrise som inneholder elementer som tilfredsstiller disse reglene.

La oss gjenbruke væreksemplet vårt. Anta at vi har en matrise som inneholder maksimumstemperaturene for hver dag i forrige uke; nå ønsker vi å finne ut hvor mange av de dagene som var kaldere. Ja, «kaldere» er et subjektivt begrep, så la oss si at vi ser etter dager der temperaturen var under 20. Vi kan gjøre dette ved å bruke filter()-funksjonen slik:

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const colderDays = weeklyReadings.filter(dayTemperature => {
    return dayTemperature < 20;
});

console.log("Total colder days in week were: " + colderDays.length); // 1

Vær oppmerksom på at den anonyme funksjonen vi sender til filter() må returnere en boolsk verdi: true eller false. Dette er hvordan filter() vil vite om det elementet skal inkluderes eller ikke i den filtrerte matrisen. Du står fritt til å skrive hvilken som helst mengde kompleks logikk i denne anonyme funksjonen; du kan foreta API-kall og lese brukerinndata, og så videre, så lenge du sørger for at du til slutt returnerer en boolsk verdi.

Pass på: Dette er en sidenotat jeg føler meg tvunget til å gi basert på min erfaring som JavaScript-utvikler. Enten det er på grunn av slurv eller feil grunnleggende, lager mange programmerere subtile feil i programmene sine når de bruker filter(). La oss omskrive den forrige koden for å inneholde feilen:

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const colderDays = weeklyReadings.filter(dayTemperature => {
    return dayTemperature < 20;
});

if(colderDays) {
    console.log("Yes, there were colder days last week");
} else {
    console.log("No, there were no colder days");
}

Legg merke til noe? Flott jobb hvis du gjorde det! If-tilstanden mot slutten sjekker colderDays, som faktisk er en matrise! Du vil bli overrasket over hvor mange ganger folk gjør denne feilen mens de løper for å overholde tidsfrister eller kode i lavt humør (uansett grunn). Problemet med denne tilstanden er at JavaScript er et merkelig og inkonsekvent språk på mange måter, og «sannheten» til ting er en av dem. Samtidig som [] == true returnerer usant, noe som får deg til å tro at koden ovenfor ikke er ødelagt, realiteten er at inne i en if-tilstand, [] vurderes til sant! Med andre ord, koden vi skrev vil aldri si at det ikke var noen kaldere dager forrige uke.

  Hvordan lager du en ny Tinder-konto når du blir utestengt

Rettingen er veldig enkel, som gitt i koden før koden ovenfor. Vi sjekker for colderDays.length, som garantert gir oss et heltall (null eller over) og fungerer dermed konsekvent i logiske sammenligninger. Merk at filter() alltid, alltid, alltid vil returnere en matrise, tom eller ikke-tom, så vi kan stole på det og skrive våre logiske sammenligninger trygt.

Det har vært en lengre omvei enn jeg hadde planlagt, men feil som denne er verdt å fremheve med ti tusen ord, med store bokstaver om nødvendig. Jeg håper du ikke blir bitt av dette og sparer deg selv for hundrevis av timer med feilsøking! 🙂

redusere()

Av alle funksjonene i denne artikkelen, så vel som i standard JavaScript-biblioteket, er reduce() blant de fremste for kronene «forvirrende og rart». Selv om denne funksjonen er svært viktig og resulterer i elegant kode i mange situasjoner, unngås den av de fleste JavaScript-utviklere, og de foretrekker å skrive mer detaljert kode i stedet.

Grunnen er at – og jeg skal være ærlig her! — reduce() er vanskelig å forstå, både i betydningen konsept og utførelse. Når du leser beskrivelsen, har du lest den på nytt flere ganger og fortsatt tviler du på om du har lest den feil; og når du ser det i aksjon og prøver å visualisere hvordan det fungerer, snur hjernen din til tusen knop! 🤭

Nå, ikke bli redd. Reduser()-funksjonen er ikke i nærheten av kompleksitet og skremsel til for eksempel, B+ trær og deres algoritmer. Det er bare det at denne typen logikk sjelden oppstår under den gjennomsnittlige programmererens daglige jobb.

Så etter å ha skremt dagslyset ut av deg og deretter umiddelbart bedt deg om å ikke bekymre deg, vil jeg til slutt vise deg hva denne funksjonen er og hvorfor akkurat vi trenger den.

Som navnet antyder, brukes reduce() til å redusere noe. Tingen den reduserer er en matrise og tingen den reduserer den gitte matrisen til er en enkelt verdi (tall, streng, funksjon, objekt, hva som helst). Her er en enklere måte å si det på – reduce() forvandler en matrise til en enkelt verdi. Merk at returverdien fra reduce() ikke er en matrise, noe som er tilfellet med map() og filter(). Å ha forstått så mye er halve kampen allerede. 🙂

Nå er det ganske åpenbart at hvis vi skal transformere (redusere) en matrise, må vi levere den nødvendige logikken; og basert på din erfaring som JS-utvikler, har du mest likt allerede gjettet at vi gjør det ved å bruke en funksjon. Denne funksjonen er det vi kaller reduseringsfunksjonen, som danner det første argumentet for å redusere(). Det andre argumentet er en startverdi, for eksempel et tall, en streng osv. (Jeg skal forklare om en stund hva pokker denne «startverdien» er).

Basert på vår forståelse så langt, kan vi si at et kall til reduce() ser slik ut: array.reduce(reducerFunction, startingValue). La oss nå takle kjernen i det hele: reduksjonsfunksjonen. Som allerede etablert, er reduseringsfunksjonen det som forteller reduce() hvordan matrisen skal konverteres til en enkelt verdi. Det krever to argumenter: en variabel for å fungere som en akkumulator (ikke bekymre deg, jeg skal forklare denne biten også), og en variabel for å lagre gjeldende verdi.

Jeg vet jeg vet . . . det var mye terminologi for en enkelt funksjon som ikke engang er obligatorisk i JavaScript. 😝😝 Og dette er grunnen til at folk flykter fra redusere(). Men hvis du lærer det trinn for trinn, vil du ikke bare forstå det, men også sette pris på det etter hvert som du blir en bedre utvikler.

Ok, så tilbake til det aktuelle emnet. «Startverdien» som sendes til reduce() er . . . vel, startverdien for beregningen du vil bruke. For eksempel, hvis du skal gjøre multiplikasjon i reduseringsfunksjonen, er en startverdi på 1 fornuftig; for tillegg kan du starte med 0, og så videre.

La oss nå se på signaturen for reduksjonsfunksjonen. En reduseringsfunksjon som sendes til redusering() har følgende form: reduseringsfunksjon(akkumulator, gjeldende verdi). «Akkumulator» er bare et fancy navn for variabelen som samler og holder resultatet av beregningen; det er akkurat som å bruke en variabel kalt total for å summere alle elementene i en matrise ved å bruke noe som total += arr[i]. Dette er nøyaktig hvordan reduseringsfunksjonen i reduce() blir brukt: Akkumulatoren settes først til startverdien du oppgir, og deretter besøkes elementene i arrayet ett etter ett, beregningen utføres, og resultatet lagres i akkumulatoren, og så videre. . .

Så, hva er denne «nåværende verdien» i en reduksjonsfunksjon? Det er den samme ideen som du mentalt ville forestille deg hvis jeg ber deg krysse en matrise: du ville ta en variabel for å starte på indeks null og flytte den frem et trinn av gangen. Mens du gjør dette, hvis jeg ber deg om å stoppe plutselig, vil du finne deg selv på et av elementene i arrayet, ikke sant? Dette er hva vi mener med gjeldende verdi: det er verdien av variabelen som brukes til å representere matriseelementet som for øyeblikket vurderes (tenk på å gå over en matrise hvis det hjelper).

Med alt som er sagt, er det på tide å se et enkelt eksempel og se hvordan all denne sjargongen kommer sammen i et faktisk reduce()-kall. La oss si at vi har en matrise som inneholder de første n naturlige tallene (1, 2, 3 … n) og vi er interessert i å finne faktoren til n. Vi vet at å finne n! vi trenger ganske enkelt å multiplisere alt, noe som fører oss til denne implementeringen:

const numbers = [1, 2, 3, 4, 5];
const factorial = numbers.reduce((acc, item) => acc * item, 1);
console.log(factorial); // 120

Det skjer mye i disse bare tre kodelinjene, så la oss pakke det ut en etter en i sammenheng med den (veldig lange) diskusjonen vi har hatt til nå. Som det er åpenbart, er tall matrisen som inneholder alle tallene vi ønsker å multiplisere. Ta deretter en titt på calls numbers.reduce(), som sier at startverdien for acc skal være 1 (fordi den ikke påvirker eller ødelegger noen multiplikasjon). Deretter sjekker du reduseringsfunksjonen, `(acc, item) => acc * item, som ganske enkelt sier at returverdien for hver iterasjon over matrisen skal være det elementet multiplisert med det som allerede er i akkumulatoren. Iterasjonen og faktisk lagring av multiplikasjonen eksplisitt i akkumulatoren er det som skjer bak kulissene, og er en av de største grunnene til at reduce() er en slik snublestein for JavaScript-utviklere.

  Topp 8 salgsskattkalkulatorer for amerikanske stater og andre land

Hvorfor bruke reduce()?

Det er et veldig flott spørsmål, og for å være ærlig har jeg ikke et sikkert svar. Uansett hva reduce() gjør kan gjøres gjennom loops, forEach() osv. Disse teknikkene resulterer imidlertid i mye mer kode, noe som gjør det vanskelig å lese, spesielt hvis du har det travelt. Så er det bekymringen for uforanderlighet: med reduce() og lignende funksjoner kan du være sikker på at de opprinnelige dataene dine ikke har blitt mutert; dette i seg selv eliminerer hele klasser av feil, spesielt i distribuerte applikasjoner.

Til slutt, reduce() er langt mer fleksibel, i den forstand at akkumulatoren kan være et objekt, en matrise eller til og med en funksjon om nødvendig; det samme gjelder for startverdien og andre deler av funksjonskallet – nesten alt kan gå inn, og nesten alt kan komme ut, så det er ekstrem fleksibilitet i å designe gjenbrukbar kode.

Hvis du fortsatt ikke er overbevist, er det også helt greit; JavaScript-fellesskapet i seg selv er skarpt delt over «kompakthet», «eleganse» og «kraft» til reduce(), så det er greit hvis du ikke bruker det. 🙂 Men sørg for å se på noen fine eksempler før du bestemmer deg for å bin redusere().

noen()

La oss si at du har en rekke objekter, der hvert objekt representerer en person. Du vil vite om det er personer i gruppen som er over 35 år. Merk at det ikke er nødvendig å telle hvor mange slike personer er, enn si å hente en liste over dem. Det vi sier her tilsvarer «en eller flere» eller «minst en».

Hvordan gjør du dette?

Ja, du kan lage en flaggvariabel og sløyfe over arrayet for å løse dette problemet slik:

const persons = [
    {
        name: 'Person 1',
        age: 32
    },
    
    {
        name: 'Person 2',
        age: 40
    },
];

let foundOver35 = false;

for (let i = 0; i < persons.length; i ++) {
    if(persons[i].age > 35) {
        foundOver35 = true;
        break;
    }
}

if(foundOver35) {
    console.log("Yup, there are a few people here!")
}

Problemet? Koden er for C- eller Java-aktig, etter min mening. «Verbose» er et annet ord som dukker opp. Erfarne JS tenker kanskje på «stygg», «fryktelig» osv. 😝 Og med rette, vil jeg påstå. En måte å forbedre denne kodebiten på er å bruke noe som map(), men selv da er løsningen litt klønete.

Det viser seg at vi har en ganske fin funksjon kalt some() som allerede er tilgjengelig på kjernespråket. Denne funksjonen fungerer med matriser og godtar en tilpasset «filtrerings»-funksjon, og returnerer en boolsk verdi på sann eller usann. I hovedsak gjør den det vi har prøvd å gjøre de siste minuttene, bare veldig kortfattet og elegant. Slik kan vi bruke det:

const persons = [
    {
        name: 'Person 1',
        age: 32
    },
    
    {
        name: 'Person 2',
        age: 40
    },
];

if(persons.some(person => {
    return person.age > 35
})) {
    console.log("Found some people!")
}

Samme input, samme resultat som før; men legg merke til den enorme reduksjonen i kode! Legg også merke til hvor drastisk den kognitive belastningen reduseres fordi vi ikke lenger trenger å analysere koden linje for linje som om vi var tolken selv! Koden leser nå nesten som naturlig språk.

hver()

Akkurat som noen(), har vi en annen nyttig funksjon kalt every(). Som du kan gjette nå, returnerer også dette en boolsk verdi avhengig av om alle elementene i matrisen består den gitte testen. Selvfølgelig leveres testen for å bestå som en anonym funksjon mesteparten av tiden. Jeg skal spare deg for smerten med hvordan en naiv versjon av koden kan se ut, så her er hvordan every() brukes:

const entries = [
    {
        id: 1
    },
    
    {
        id: 2
    },
    
    {
        id: 3  
    },
];

if(entries.every(entry => {
    return Number.isInteger(entry.id) && entry.id > 0;
})) {
    console.log("All the entries have a valid id")
}

Som det er åpenbart, sjekker koden alle objektene i arrayet for en gyldig id-egenskap. Definisjonen av «gyldig» avhenger av problemkonteksten, men som du kan se, for denne koden vurderte jeg ikke-negative heltall. Nok en gang ser vi hvor enkel og elegant koden er å lese, som er det eneste formålet med denne (og lignende) funksjon(er).

inkluderer()

Hvordan sjekker du om det finnes understrenger og matriseelementer? Vel, hvis du er som meg, strekker du deg raskt etter indexOf() og slår deretter opp dokumentene for å gjøre deg kjent med mulige returverdier. Det er en betydelig ulempe, og returverdiene er vanskelige å huske (raskt – hva betyr en prosess som returnerer 2 til operativsystemet?).

Men det er et fint alternativ som vi kan bruke: include(). Bruken er like enkel som navnet, og den resulterende koden er ekstremt hjertevarmende. Husk at matchingen gjøres av include() skiller mellom store og små bokstaver, men jeg antar at det er det vi alle intuitive forventer uansett. Og nå er det på tide med litt kode!

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(4));
const name = "Ankush";
console.log(name.includes('ank')); // false, because first letter is in small caps
console.log(name.includes('Ank')); // true, as expected

Men ikke forvent for mye av denne ydmyke metoden:

const user = {a: 10, b: 20};
console.log(user.includes('a')); // blows up, as objects don't have a "includes" method

Det kan ikke se på innsiden av objekter, da det rett og slett ikke er definert for objekter. Men hei, vi vet at det fungerer på arrays, så kanskje vi kan gjøre noe lureri her . . . 🤔.

const persons = [{name: 'Phil'}, {name: 'Jane'}];
persons.includes({name: 'Phil'});

Så, hva skjer når du kjører denne koden? Den eksploderer ikke, men utgangen er også skuffende: falsk. 😫😫 Faktisk har dette å gjøre med objekter, pekere og hvordan JavaScript ser og administrerer minne, som er en egen verden. Hvis du ønsker å dykke dypere, ta gjerne steget (kanskje start her), men jeg stopper her.

Vi kan få koden ovenfor til å oppføre seg hvis vi omskriver den som følger, men på dette tidspunktet blir det mer eller mindre en spøk, etter min mening:

const phil = {name: 'Phil'};
const persons = [phil, {name: 'Jane'}];
persons.includes(phil); // true

Likevel viser det at vi kan lage include()-verk på objekter, så jeg antar at det ikke er en total katastrofe. 😄

skive()

Anta at vi har en streng, og jeg ber deg returnere en del av den som starter med «r» og slutter med «z» (de faktiske tegnene er ikke viktige). Hvordan vil du nærme deg det? Kanskje du vil lage en ny streng og bruke den til å lagre alle nødvendige tegn og returnere dem. Eller hvis du er som de fleste programmerere, vil du gi meg to array-indekser i retur: en som indikerer starten på understrengen, den andre markerer slutten.

  7 nettkurs du trenger å vite

Begge disse tilnærmingene er fine, men det er et konsept som kalles slicing som tilbyr en fin løsning i slike situasjoner. Heldigvis er det ingen abstru teori å følge; skjæring betyr akkurat hva det høres ut som – å lage en mindre streng/array fra den gitte, omtrent som vi lager skiver av frukt. La oss se hva jeg mener, ved hjelp av et enkelt eksempel:

const headline = "And in tonight's special, the guest we've all been waiting for!";
const startIndex = headline.indexOf('guest');
const endIndex = headline.indexOf('waiting');
const newHeadline = headline.slice(startIndex, endIndex);
console.log(newHeadline); // guest we've all been

Når vi skjærer(), gir vi to indekser til JavaScript – den ene der vi vil starte skjæringen, og den andre der vi vil at den skal stoppe. Haken med slice() er at sluttindeksen ikke er inkludert i det endelige resultatet, og det er derfor vi ser at ordet «venter» mangler i den nye overskriften i koden ovenfor.

Konsepter som skjæring er mer fremtredende på andre språk, spesielt Python. Hvis du spør disse utviklerne, vil de si at de ikke kan forestille seg livet uten denne funksjonaliteten, og med rette når språket gir en veldig fin syntaks for slicing.

Skjæring er pent og ekstremt praktisk, og det er ingen grunn til å ikke bruke det. Det er heller ikke syntakssukker som er full av ytelsesstraff, da det skaper grunne kopier av den originale matrisen/strengen. For JavaScript-utviklere anbefaler jeg på det sterkeste å bli kjent med slice() og legge den til i arsenalet ditt!

skjøte()

Metoden splice() høres ut som en fetter til slice(), og på noen måter kan vi argumentere for at den er det. Begge lager nye arrays/strenger fra de originale, med en liten, men viktig forskjell – splice() fjerner, endrer eller legger til elementer, men modifiserer den originale arrayen. Denne «ødeleggelsen» av den originale matrisen kan skape store problemer hvis du ikke er forsiktig eller ikke forstår dype kopier og referanser. Jeg lurer på hva som stoppet utviklerne fra å bruke samme tilnærming som for slice() og la den originale matrisen være urørt, men jeg antar at vi kan være mer tilgivende overfor et språk opprettet på bare ti dager.

Til tross for mine klager, la oss ta en titt på hvordan splice() fungerer. Jeg skal vise et eksempel der vi fjerner noen få elementer fra en matrise, da dette er den vanligste bruken du finner for denne metoden. Jeg vil også avstå fra å gi eksempler på tillegg og innsetting fordi disse kan lett slås opp og er enkle også.

const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.splice(2, 1);
console.log(items); // [ 'eggs', 'milk', 'bread', 'butter' ]

Oppfordringen til splice() ovenfor sier: start på indeks 2 (den tredje plassen, altså) av arrayen, og fjern ett element. I den gitte matrisen er «ost» det tredje elementet, så det blir fjernet fra matrisen og matrisen av elementer blir forkortet, som forventet. Forresten, elementene som er fjernet blir returnert av splice() i skjemaet eller en matrise, så hvis vi ønsket det, kunne vi ha fanget «ost» i en variabel.

Etter min erfaring har indexOf() og splice() stor synergi – vi finner indeksen til et element og fjerner det deretter fra den gitte matrisen. Vær imidlertid oppmerksom på at det ikke alltid er den mest effektive metoden, og ofte er det mye raskere å bruke et objekt (tilsvarer et hash-kart).

skifte()

shift() er en slags bekvemmelighetsmetode og brukes til å fjerne det første elementet i en matrise. Legg merke til at det samme kan gjøres med splice(), men shift() er litt lettere å huske og intuitivt når alt du trenger å gjøre er å kutte av det første elementet.

const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.shift()
console.log(items); // [ 'milk', 'cheese', 'bread', 'butter' ]

unshift()

Akkurat som shift() fjerner det første elementet fra en matrise, legger unshift() til et nytt element i starten av matrisen. Bruken er like enkel og kompakt:

const items = ['eggs', 'milk'];
items.unshift('bread')
console.log(items); // [ 'bread', 'eggs', 'milk' ]

Når det er sagt, kan jeg ikke dy meg og advare de som er nye i spillet: i motsetning til de populære push()- og pop()-metodene, er shift() og unshift() ekstremt ineffektive (på grunn av måten de underliggende algoritmene fungerer på). Så hvis du opererer på store arrays (for eksempel 2000+ elementer), kan for mange av disse funksjonskallene stoppe applikasjonen din.

fylle()

Noen ganger må du endre flere elementer til en enkelt verdi eller til og med «tilbakestille» hele matrisen, for å si det sånn. I disse situasjonene sparer fill() deg fra løkker og av-for-en-feil. Den kan brukes til å erstatte deler av eller hele matrisen med den gitte verdien. La oss se et par eksempler:

const heights = [1, 2, 4, 5, 6, 7, 1, 1];
heights.fill(0);
console.log(heights); // [0, 0, 0, 0, 0, 0, 0, 0]

const heights2 = [1, 2, 4, 5, 6, 7, 1, 1];
heights2.fill(0, 4);
console.log(heights2); // [1, 2, 4, 5, 0, 0, 0, 0]

Andre funksjoner verdt å nevne

Selv om listen ovenfor er det de fleste JavaScript-utviklere ender opp med å møte og bruke i karrieren, er den på ingen måte komplett. Det er så mange flere mindre, men nyttige funksjoner (metoder) i JavaScript at det ikke vil være mulig å dekke dem alle i en enkelt artikkel. Når det er sagt, noen som dukker opp er som følger:

  • omvendt()
  • sortere()
  • innganger()
  • fylle()
  • finne()
  • flat()

Jeg oppfordrer deg til å i det minste slå opp disse slik at du har en ide om at bekvemmeligheter som disse finnes.

Konklusjon

JavaScript er et stort språk, til tross for det lille antallet kjernekonsepter å lære. De mange funksjonene (metodene) som er tilgjengelige for oss utgjør hoveddelen av denne store størrelsen. Men siden JavaScript er et sekundærspråk for de fleste utviklere, dykker vi ikke dypt nok, og går glipp av mange vakre og nyttige funksjoner det tilbyr. Egentlig gjelder det samme for funksjonelle programmeringskonsepter, men det er et tema for en annen dag! 😅

Når du kan, bruk litt tid på å utforske kjernespråket (og om mulig kjente verktøybiblioteker som f.eks. Lodash). Selv noen få minutter brukt på denne innsatsen vil resultere i enorme produktivitetsgevinster og langt renere og mer kompakt kode.