Top 11 (og flere!) JavaScript-funktioner, der skal kendes

Kode smart! Bliv en hurtigere, mere produktiv og gladere JavaScript-udvikler ved at mestre disse vigtigste og tilbagevendende funktioner på sproget.

Uanset om det er backend eller frontend (eller endda rumskibe), JavaScript er overalt. Det er også et ret fleksibelt sprog (hvilket betyder, at det har hardcore funktionelle programmeringsmønstre såvel som gode gamle klasser), og dets lighed med andre “C-lignende” sprog gør det nemt for udviklere at skifte fra andre sprog.

Hvis du vil op i niveau med dit JS-spil, Jeg foreslår, at du lærer om, øver dig og til sidst mestrer de følgende kernefunktioner, der er tilgængelige på sproget. Ikke alle disse er strengt “nødvendige” for at løse problemer, men de kan gøre en masse tunge løft for dig i nogle tilfælde, mens disse i andre kan reducere mængden af ​​kode, du skal skrive.

kort()

Det ville være kætteri at skrive en artikel om vigtige JavaScript-funktioner og ikke nævne map()! 😆😆 Sammen med filter() og reduce() danner map() en hellig treenighed af slagsen. Det er funktioner, du kommer til at bruge igen og igen i din karriere, så de er mere end et kig værd. Lad os tage fat på dem én efter én, begyndende med map().

map() er blandt de funktioner, der giver de fleste problemer med at lære JavaScript. Hvorfor? Ikke fordi der er noget iboende komplekst over det, men fordi den måde, denne funktion fungerer på, er en idé hentet fra det, der kaldes funktionel programmering. Og da vi ikke er udsat for funktionel programmering – vores skoler og industrien er fuld af objektorienterede sprog – virker det mærkeligt eller endda forkert for vores partiske hjerner.

JavaScript er langt mere funktionelt end objektorienteret, selvom dets moderne versioner gør deres bedste for at skjule dette faktum. Men det er en hel dåse orme, som jeg måske kan åbne en anden dag. 🤣 Okay, så, map() . . .

map() er en meget simpel funktion; det knytter sig til et array og hjælper os med at konvertere hvert element til noget andet, hvilket resulterer i en ny array. Hvordan man præcist konverterer en vare er angivet som en anden funktion, som efter konventionen er anonym.

Det er alt, hvad der er til det! Syntaksen kan tage lidt at vænne sig til, men i bund og grund er det det, vi laver i en map()-funktion. Hvorfor vil vi måske bruge map()? Det kommer an på, hvad vi prøver at opnå. Lad os f.eks. sige, at vi registrerede temperaturen for hver dag i den sidste uge og gemte den som en simpel matrix. Men nu får vi at vide, at instrumenterne ikke var særlig nøjagtige og har rapporteret 1,5 grader lavere temperatur, end de burde have.

Vi kan lave denne korrektion ved at bruge map()-funktionen som denne:

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 andet, meget praktisk, eksempel kommer fra Reacts verden, hvor oprettelse af DOM-elementlister fra arrays er et almindeligt mønster; så noget som dette er almindeligt:

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 funktionel React-komponent, der modtager en liste over produkter som rekvisitter. Fra denne liste (array) opbygger den derefter en liste over HTML “divs”, der i det væsentlige konverterer hvert produktobjekt til HTML. Det originale produktobjekt forbliver uberørt.

Du kan argumentere for, at map() ikke er andet end en glorificeret for loop, og du ville have fuldstændig ret. Men læg mærke til, at så snart du kommer med det argument, er det dit objektorienterede trænede sind, der taler, hvorimod disse funktioner og deres rationale kommer fra funktionel programmering, hvor ensartethed, kompakthed og elegance er højt æret. 🙂

filter()

filter() er en meget nyttig funktion, som du vil finde dig selv at anvende igen og igen i mange situationer. Som navnet antyder, filtrerer denne funktion et array baseret på de regler/logik, du angiver, og returnerer et nyt array, der indeholder elementer, der opfylder disse regler.

Lad os genbruge vores vejreksempel. Antag, at vi har et array, der indeholder de maksimale temperaturer for hver dag i sidste uge; nu vil vi finde ud af, hvor mange af de dage der var koldere. Ja, “koldere” er et subjektivt udtryk, så lad os sige, at vi leder efter dage, hvor temperaturen var under 20. Vi kan gøre dette ved at bruge filter()-funktionen på denne måde:

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

Bemærk, at den anonyme funktion, vi videregiver til filter(), skal returnere en boolsk værdi: sand eller falsk. Dette er hvordan filter() vil vide, om det pågældende element skal inkluderes eller ej i det filtrerede array. Du er fri til at skrive en hvilken som helst mængde kompleks logik i denne anonyme funktion; du kan foretage API-kald og læse brugerinput og så videre, så længe du sikrer dig, at du i sidste ende returnerer en boolsk værdi.

Pas på: Dette er en sidebemærkning, jeg føler mig nødsaget til at give baseret på min erfaring som JavaScript-udvikler. Uanset om det er på grund af sjusk eller forkerte grundlæggende principper, skaber mange programmører subtile fejl i deres programmer, når de bruger filter(). Lad os omskrive den forrige kode til at indeholde fejlen:

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");
}

Læg mærke til noget? Godt arbejde, hvis du gjorde! If-tilstanden mod slutningen tjekker colderDays, som faktisk er en matrix! Du vil blive overrasket over, hvor mange gange folk begår denne fejl, når de ræser om at overholde deadlines eller kode i lavt humør (uanset grund). Problemet med denne betingelse er, at JavaScript er et mærkeligt og inkonsekvent sprog på mange måder, og tingenes “sandhed” er en af ​​dem. Mens [] == true returnerer falsk, hvilket får dig til at tro, at ovenstående kode ikke er brudt, virkeligheden er, at inde i en if-tilstand, [] vurderes til sandt! Med andre ord vil den kode, vi skrev, aldrig sige, at der ikke var nogen koldere dage i sidste uge.

Rettelsen er meget enkel, som angivet i koden før ovenstående kode. Vi tjekker for colderDays.length, som med garanti giver os et heltal (nul eller derover) og arbejder således konsekvent i logiske sammenligninger. Bemærk, at filter() altid, altid, altid vil returnere et array, tomt eller ikke-tomt, så vi kan stole på det og skrive vores logiske sammenligninger trygt.

Det har været en længere omvej, end jeg havde planlagt, men fejl som denne er værd at fremhæve med ti tusinde ord, hvis det er nødvendigt. Jeg håber ikke du bliver bidt af dette og sparer dig selv for hundredvis af timers fejlsøgningsindsats! 🙂

reducere()

Af alle funktionerne i denne artikel, såvel som i standard JavaScript-biblioteket, er reduce() blandt frontløberne for kronerne af “forvirrende og underligt”. Selvom denne funktion er meget vigtig og resulterer i elegant kode i mange situationer, undgås den af ​​de fleste JavaScript-udviklere, og de foretrækker at skrive mere udførlig kode i stedet for.

Årsagen er, at – og jeg skal være ærlig her! — reduce() er svært at forstå, både i betydningen koncept og udførelse. Når du læser dens beskrivelse, har du genlæst den flere gange, og stadig tvivler du på, om du læser den forkert; og når du ser det i aktion og prøver at visualisere, hvordan det fungerer, drejer din hjerne sig i tusind knob! 🤭

Nu skal du ikke blive bange. Reducer()-funktionen er ikke i nærheden af ​​kompleksitet og intimidering af f.eks. B+ træer og deres algoritmer. Det er bare, at denne form for logik sjældent støder på under den gennemsnitlige programmørs daglige arbejde.

Så efter at have skræmt dagslyset ud af dig og derefter straks fortalt dig, at du ikke skal bekymre dig, vil jeg endelig gerne vise dig, hvad denne funktion er, og hvorfor vi præcist har brug for den.

Som navnet antyder, bruges reduce() til, ja, reducere noget. Det, det reducerer, er et array, og det, det reducerer det givne array til, er en enkelt værdi (tal, streng, funktion, objekt, hvad som helst). Her er en enklere måde at sige det på – reduce() transformerer en matrix til en enkelt værdi. Bemærk, at returværdien fra reduce() ikke er et array, hvilket er tilfældet med map() og filter(). At have forstået så meget er allerede halvdelen af ​​kampen. 🙂

Nu er det lidt indlysende, at hvis vi skal transformere (reducere) et array, skal vi levere den nødvendige logik; og baseret på din erfaring som JS-udvikler, har du allerhelst gættet, at vi gør det ved hjælp af en funktion. Denne funktion kalder vi reduceringsfunktionen, som danner det første argument til reduce(). Det andet argument er en startværdi, såsom et tal, en streng osv. (Jeg vil om lidt forklare, hvad pokker denne “startværdi” er).

Baseret på vores forståelse indtil nu, kan vi sige, at et kald til reduce() ser sådan ud: array.reduce(reducerFunction, startingValue). Lad os nu tage fat på hjertet af det hele: Reduktionsfunktionen. Som allerede fastslået, er reduceringsfunktionen det, der fortæller reduce(), hvordan arrayet konverteres til en enkelt værdi. Det kræver to argumenter: en variabel til at fungere som en akkumulator (bare rolig, jeg vil også forklare denne bit), og en variabel til at gemme den aktuelle værdi.

Jeg ved, jeg ved det. . . det var en masse terminologi for en enkelt funktion, som ikke engang er obligatorisk i JavaScript. 😝😝 Og det er derfor, folk løber væk fra reduce(). Men hvis du lærer det trin for trin, vil du ikke kun forstå det, men også sætte pris på det, efterhånden som du bliver en bedre udvikler.

Okay, så tilbage til det aktuelle emne. “Startværdien”, der sendes til reduce() er . . . godt, startværdien for den beregning, du vil bruge. For eksempel, hvis du skal udføre multiplikation i reduktionsfunktionen, giver en startværdi på 1 mening; til tilføjelse kan du starte med 0, og så videre.

Lad os nu se på signaturen for reduceringsfunktionen. En reduceringsfunktion, der sendes til reduce() har følgende form: reducerFunction(akkumulator, nuværendeVærdi). “Akkumulator” er bare et fancy navn for den variabel, der samler og opbevarer resultatet af beregningen; det er præcis som at bruge en variabel kaldet total til at summere alle elementerne i en matrix ved at bruge noget som total += arr[i]. Det er præcis sådan, reduceringsfunktionen i reduce() bliver anvendt: Akkumulatoren indstilles til at begynde med til den startværdi, du angiver, og derefter besøges elementerne i arrayet et efter et, beregningen udføres, og resultatet gemmes i akkumulatoren og så videre. . .

Så hvad er denne “aktuelle værdi” i en reduktionsfunktion? Det er den samme idé, som du mentalt ville forestille dig, hvis jeg beder dig om at krydse et array: du ville tage en variabel for at starte ved indeks nul og flytte den frem et trin ad gangen. Mens du gør dette, hvis jeg beder dig om pludselig at stoppe, ville du finde dig selv på et af elementerne i arrayet, ikke? Dette er, hvad vi mener med aktuel værdi: det er værdien af ​​den variabel, der bruges til at repræsentere array-elementet, der i øjeblikket er under overvejelse (tænk på at gå over et array, hvis det hjælper).

Med alt det sagt, er det tid til at se et simpelt eksempel og se, hvordan al denne jargon kommer sammen i et faktisk reduce()-kald. Lad os sige, at vi har en matrix med de første n naturlige tal (1, 2, 3 … n), og vi er interesserede i at finde fakultetet af n. Vi ved, at finde n! vi skal simpelthen gange alt, hvilket fører os til denne implementering:

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

Der foregår meget i disse blot tre linjer kode, så lad os pakke det ud én efter én i forbindelse med den (meget lange) diskussion, vi har haft indtil nu. Som det er indlysende, er tal den matrix, der indeholder alle de tal, vi ønsker at gange. Tag derefter et kig på nummers.reduce() kaldet, som siger, at startværdien for acc skal være 1 (fordi det ikke påvirker eller ødelægger nogen form for multiplikation). Dernæst skal du kontrollere reduceringsfunktionens krop, `(acc, item) => acc * item, som blot siger, at returværdien for hver iteration over arrayet skal være det element ganget med hvad der allerede er i akkumulatoren. Iterationen og faktisk lagring af multiplikationen eksplicit i akkumulatoren er, hvad der sker bag kulisserne, og er en af ​​de største grunde til, at reduce() er sådan en anstødssten for JavaScript-udviklere.

Hvorfor bruge reduce()?

Det er et rigtig godt spørgsmål, og for at være ærlig har jeg ikke et sikkert svar. Uanset hvad reduce() gør, kan gøres gennem loops, forEach() osv. Men disse teknikker resulterer i meget mere kode, hvilket gør det svært at læse, især hvis du har travlt. Så er der bekymringen for uforanderlighed: med reduce() og lignende funktioner kan du være sikker på, at dine originale data ikke er blevet muteret; dette i sig selv eliminerer hele klasser af fejl, især i distribuerede applikationer.

Endelig er reduce() langt mere fleksibel i den forstand, at akkumulatoren kan være et objekt, en matrix eller endda en funktion, hvis det er nødvendigt; det samme gælder for startværdien og andre dele af funktionskaldet – næsten alt kan gå ind, og næsten alt kan komme ud, så der er ekstrem fleksibilitet i at designe genbrugelig kode.

Hvis du stadig ikke er overbevist, er det også helt okay; JavaScript-fællesskabet i sig selv er skarpt opdelt over “kompaktheden”, “elegancen” og “kraften” ved reduce(), så det er okay, hvis du ikke bruger det. 🙂 Men sørg for at se på nogle pæne eksempler før du beslutter dig for at bin reduce().

nogle()

Lad os sige, at du har en række objekter, hvor hvert objekt repræsenterer en person. Du vil gerne vide, om der er personer i arrayet, der er over 35 år. Bemærk, at der ikke er behov for at tælle, hvor mange sådanne personer er, endsige hente en liste over dem. Det, vi siger her, svarer til “en eller flere” eller “mindst en”.

Hvordan gør du dette?

Ja, du kunne oprette en flagvariabel og sløjfe over arrayet for at løse dette problem som dette:

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 efter min mening for C-agtig eller Java-agtig. “Verbose” er et andet ord, der kommer til at tænke på. Erfaren JS tænker måske på “grimt”, “forfærdeligt” osv. 😝 Og med rette, vil jeg påstå. En måde at forbedre dette stykke kode på er at gøre brug af noget som map(), men selv da er løsningen lidt klodset.

Det viser sig, at vi har en ret pæn funktion kaldet some(), der allerede er tilgængelig på kernesproget. Denne funktion arbejder med arrays og accepterer en brugerdefineret “filtreringsfunktion”, der returnerer en boolsk værdi på sand eller falsk. I bund og grund gør den det, vi har forsøgt at gøre i de sidste par minutter, kun meget kortfattet og elegant. Sådan kan vi bruge 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 bemærk den massive reduktion i kode! Læg også mærke til, hvor drastisk den kognitive byrde reduceres, fordi vi ikke længere behøver at analysere koden linje for linje, som om vi selv var tolken! Koden lyder nu næsten som naturligt sprog.

hver()

Ligesom some(), har vi en anden nyttig funktion kaldet every(). Som du kan gætte nu, returnerer dette også en boolsk værdi afhængigt af om alle elementerne i arrayet består den givne test. Selvfølgelig leveres testen for at bestå som en anonym funktion det meste af tiden. Jeg vil spare dig for smerten med, hvordan en naiv version af koden kan se ud, så her er, hvordan every() bruges:

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 indlysende, kontrollerer koden alle objekterne i arrayet for en gyldig id-egenskab. Definitionen af ​​”gyldig” afhænger af problemkonteksten, men som du kan se, overvejede jeg for denne kode ikke-negative heltal. Endnu en gang ser vi, hvor enkel og elegant koden er at læse, hvilket er det eneste formål med denne (og lignende) funktion(er).

omfatter()

Hvordan kontrollerer du, om der findes understrenge og array-elementer? Nå, hvis du er ligesom mig, rækker du hurtigt ud efter indexOf() og slår derefter dokumenterne op for at få dig til at kende dets mulige returværdier. Det er en betydelig besvær, og returværdierne er svære at huske (hurtigt – hvad betyder en proces, der returnerer 2 til operativsystemet?).

Men der er et godt alternativ, som vi kan gøre brug af: include(). Brugen er lige så enkel som navnet, og den resulterende kode er ekstremt hjertevarm. Husk på, at matchningen udføres ved, at include() skelner mellem store og små bogstaver, men det er vel alligevel, hvad vi alle intuitive forventer. Og nu, tid til noget 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

Forvent dog ikke for meget af denne ydmyge metode:

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 ind i objekter, da det simpelthen ikke er defineret for objekter. Men hey, vi ved godt, at det virker på arrays, så måske kan vi lave noget trick her. . . 🤔.

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

Så hvad sker der, når du kører denne kode? Det eksploderer ikke, men outputtet er også skuffende: falsk. 😫😫 Faktisk har dette at gøre med objekter, pointere og hvordan JavaScript ser og administrerer hukommelsen, som er en verden for sig selv. Hvis du ønsker at dykke dybere, er du velkommen til at tage springet (måske start her), men jeg stopper lige her.

Vi kan få ovenstående kode til at opføre sig, hvis vi omskriver den som følger, men på dette tidspunkt bliver det mere eller mindre en joke, efter min mening:

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

Alligevel viser det, at vi kan lave include()-værker på objekter, så det er vel ikke en total katastrofe. 😄

skive()

Antag, at vi har en streng, og jeg beder dig om at returnere en del af den, der starter med “r” og slutter med “z” (de faktiske tegn er ikke vigtige). Hvordan ville du gribe det an? Måske ville du oprette en ny streng og bruge den til at gemme alle de nødvendige tegn og returnere dem. Eller hvis du er som de fleste programmører, ville du give mig to array-indekser til gengæld: det ene angiver starten af ​​understrengen, det andet markerer slutningen.

Begge disse tilgange er fine, men der er et koncept kaldet udskæring, der tilbyder en pæn løsning i sådanne situationer. Heldigvis er der ingen abstru teori at følge; udskæring betyder præcis, hvad det lyder som – at skabe en mindre streng/array fra den givne, ligesom vi laver skiver af frugter. Lad os se, hvad jeg mener, ved hjælp af et simpelt 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 udskærer(), leverer vi to indekser til JavaScript – det ene, hvor vi vil starte udskæringen, og det andet, hvor vi vil have det til at stoppe. Fangsten med slice() er, at det afsluttende indeks ikke er inkluderet i det endelige resultat, hvorfor vi ser, at ordet “venter” mangler i den nye overskrift i koden ovenfor.

Begreber som udskæring er mere fremtrædende på andre sprog, især Python. Hvis du spørger disse udviklere, vil de sige, at de ikke kan forestille sig livet uden denne funktionalitet, og det med rette, når sproget giver en meget pæn syntaks til udskæring.

Udskæring er pæn og yderst praktisk, og der er ingen grund til ikke at bruge den. Det er heller ikke syntakssukker fyldt med en præstationsstraf, da det skaber overfladiske kopier af det originale array/streng. For JavaScript-udviklere anbefaler jeg stærkt at blive fortrolig med slice() og tilføje det til dit arsenal!

splejs ()

Metoden splice() lyder som en fætter til slice(), og på nogle måder kan vi argumentere for, at den er det. Begge opretter nye arrays/strenge fra de originale, med en lille, men vigtig forskel – splice() fjerner, ændrer eller tilføjer elementer, men modificerer det originale array. Denne “ødelæggelse” af det originale array kan skabe enorme problemer, hvis du ikke er forsigtig eller ikke forstår dybe kopier og referencer. Jeg spekulerer på, hvad der forhindrede udviklerne i at bruge den samme tilgang som for slice() og lade det originale array være urørt, men jeg tror, ​​vi kan være mere tilgivende overfor et sprog skabt på kun ti dage.

Til trods for mine klager, lad os tage et kig på, hvordan splice() virker. Jeg viser et eksempel, hvor vi fjerner nogle få elementer fra et array, da dette er den mest almindelige brug, du finder for denne metode. Jeg vil også afstå fra at give eksempler på tilføjelse og indsættelse, fordi disse let kan slås op og også er enkle.

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

Kaldet til splice() ovenfor siger: start ved indeks 2 (det tredje sted, altså) af arrayet, og fjern ét element. I det givne array er ‘ost’ det tredje element, så det bliver fjernet fra arrayet, og arrayet af elementer bliver forkortet som forventet. I øvrigt bliver de fjernede elementer returneret af splice() i formen eller et array, så hvis vi ville, kunne vi have fanget ‘ost’ i en variabel.

Efter min erfaring har indexOf() og splice() stor synergi – vi finder indekset for et element og fjerner det derefter fra det givne array. Bemærk dog, at det ikke altid er den mest effektive metode, og ofte er det meget hurtigere at bruge et objekt (svarende til et hash-kort).

flytte()

shift() er en slags bekvemmelighedsmetode og bruges til at fjerne det første element i en matrix. Bemærk, at det samme kan gøres med splice(), men shift() er en smule nemmere at huske og intuitivt, når alt hvad du skal gøre er at hugge det første element af.

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

unshift()

Ligesom shift() fjerner det første element fra et array, tilføjer unshift() et nyt element til starten af ​​arrayet. Dens brug er lige så 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 mig og advare dem, der er nye i spillet: I modsætning til de populære push() og pop() metoder er shift() og unshift() ekstremt ineffektive (på grund af den måde, de underliggende algoritmer fungerer på). Så hvis du arbejder på store arrays (f.eks. 2000+ elementer), kan for mange af disse funktionskald stoppe din applikation til at gå i stå.

fylde()

Nogle gange skal du ændre flere elementer til en enkelt værdi eller endda “nulstille” hele arrayet, så at sige. I disse situationer sparer fill() dig fra loops og off-by-one fejl. Det kan bruges til at erstatte noget af eller hele arrayet med den givne værdi. Lad os 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 funktioner, der er værd at nævne

Selvom ovenstående liste er, hvad de fleste JavaScript-udviklere ender med at støde på og bruge i deres karriere, er den på ingen måde komplet. Der er så mange flere mindre, men nyttige funktioner (metoder) i JavaScript, at det ikke vil være muligt at dække dem alle i en enkelt artikel. Når det er sagt, er et par stykker, der kommer til at tænke på, som følger:

• baglæns()
• sortere()
• indgange()
• fylde()
• finde()
• flad()

Jeg opfordrer dig til i det mindste at slå disse op, så du har en ide om, at der findes bekvemmeligheder som disse.

Konklusion

JavaScript er et stort sprog, på trods af det lille antal kernekoncepter, der skal læres. De mange funktioner (metoder), der er tilgængelige for os, udgør hovedparten af ​​denne store størrelse. Men da JavaScript er et sekundært sprog for de fleste udviklere, dykker vi ikke dybt nok og går glip af mange smukke og nyttige funktioner, det tilbyder. Faktisk gælder det samme for funktionelle programmeringskoncepter, men det er et emne for en anden dag! 😅

Når du kan, så brug lidt tid på at udforske kernesproget (og hvis det er muligt, berømte hjælpebiblioteker som f.eks. Lodash). Selv et par minutter brugt på at gøre denne indsats vil resultere i massive produktivitetsgevinster og langt renere og mere kompakt kode.