Med hjälp av olika JavaScript-tips och syntaxgenvägar hjälper dessa funktioner dig att lösa många vanliga problem.

JavaScript är de facto-språket för att bygga moderna webb- och mobilapplikationer. Den driver ett brett utbud av projekt, från enkla webbplatser till dynamiska, interaktiva appar.

För att skapa produkter som användare kommer att älska och uppskatta är det viktigt att du skriver kod som inte bara är funktionell utan också effektiv och lätt att underhålla. Ren JavaScript-kod är avgörande för framgången för alla webb- eller mobilappar, oavsett om det är ett hobbyprojekt eller en komplex kommersiell applikation.

Vad är så bra med JavaScript-funktioner?

En funktion är en viktig komponent för att skriva kod i alla program. Den definierar en bit av återanvändbar kod som du kan anropa för att utföra en specifik uppgift.

Utöver deras återanvändbarhet är funktionerna mycket mångsidiga. I det långa loppet förenklar de processen att skala och underhålla en kodbas. Förbi skapa och använda JavaScripts funktioner, kan du spara mycket utvecklingstid.

instagram viewer

Här är några användbara JavaScript-funktioner som avsevärt kan förbättra kvaliteten på ditt projekts kod.

1. en gång

Denna engångsfunktion av högre ordning omsluter en annan funktion för att säkerställa att du bara kan anropa den en gång. Den bör tyst ignorera efterföljande försök att anropa den resulterande funktionen.

Tänk på en situation där du vill göra HTTP API-förfrågningar för att hämta data från en databas. Du kan bifoga en gång fungera som en återuppringning för en händelseavlyssnarfunktion, så att den utlöses en gång och inte mer.

Så här kan du definiera en sådan funktion:

konst en gång = (func) => {
låta resultat;
låta funcCalled = falsk;
lämna tillbaka(...args) => {
om (!funcCalled) {
 resultat = func(...args);
 funcCalled = Sann;
 }
lämna tillbaka resultat;
 };
};

En gång-funktionen tar en funktion som ett argument och returnerar en ny funktion som du bara kan anropa en gång. När du anropar den nya funktionen för första gången kör den den ursprungliga funktionen med de givna argumenten och sparar resultatet.

Alla efterföljande anrop till den nya funktionen returnerar det sparade resultatet utan att köra den ursprungliga funktionen igen. Ta en titt på implementeringen nedan:

// Definiera en funktion för att hämta data från DB
fungeragetUserData() {
// ...
}
// få en version av getUserData-funktionen som bara kan köras en gång
konst makeHTTPrequestOnlyOnce = once (getUserData);
konst userDataBtn = dokumentera.querySelector("#btn");
userDataBtn.addEventListener("klick", makeHTTPRequestOnlyOnce);

Genom att använda engångsfunktionen kan du garantera att koden bara skickar en förfrågan, även om användaren klickar på knappen flera gånger. Detta undviker prestandaproblem och buggar som kan uppstå från redundanta förfrågningar.

2. rör

Denna rörfunktion låter dig koppla flera funktioner tillsammans i en sekvens. Funktionerna i sekvensen kommer att ta resultatet av föregående funktion som indata och den sista funktionen i sekvensen kommer att beräkna det slutliga resultatet.

Här är ett exempel i kod:

// Definiera rörfunktionen
konst rör = (...funktioner) => {
lämna tillbaka(arg) => {
 funcs.forEach(fungera(func) {
 arg = func (arg);
 });
lämna tillbaka arg;
 }
}


// Definiera några funktioner
konst addOne = (a) => ett + 1;
konst dubbel = (x) => x * 2;
konst kvadrat = (x) => x * x;


// Skapa ett rör med funktionerna
konst myPipe = pipe (addOne, double, square);
// Testa röret med ett ingångsvärde
trösta.log (myPipe(2)); // Utdata: 36

Rörfunktioner kan förbättra läsbarheten och modulariteten hos kod genom att du kan skriva komplex bearbetningslogik kortfattat. Detta kan göra din kod mer begriplig och lättare att underhålla.

3. Karta

Kartfunktionen är en metod av den inbyggda JavaScript Array-klassen. Den skapar en ny array genom att tillämpa en callback-funktion på varje element i den ursprungliga arrayen.

Den går igenom varje element i inmatningsmatrisen, skickar det som en indata till återuppringningsfunktionen och infogar varje resultat i en ny matris.

Vad som är viktigt att notera är att den ursprungliga arrayen inte modifieras på något sätt under hela processen.

Här är ett exempel på hur du använder Karta:

konst siffror = [1, 2, 3, 4, 5];
konst doubledNumbers = numbers.map(fungera(siffra) {
lämna tillbaka siffra * 2;
});
trösta.log (doubledNumbers);
// Utdata: [2, 4, 6, 8, 10]

I det här exemplet itererar kartfunktionen över varje element i nummermatrisen. Den multiplicerar varje element med 2 och returnerar resultaten i en ny array.

Generellt sett eliminerar kartfunktioner behovet av använder loopar i JavaScript, särskilt oändliga sådana – oändliga loopar kan orsaka betydande beräkningskostnader, vilket leder till prestandaproblem i en applikation. Detta gör kodbasen mer kortfattad och mindre felbenägen.

4. plocka

Med den här plockfunktionen kan du selektivt extrahera specifika egenskaper från ett befintligt objekt och generera ett nytt objekt med dessa egenskaper som ett resultat av beräkningen.

Tänk till exempel på en rapportfunktion i en applikation, genom att använda plockfunktionen kan du enkelt anpassa olika rapporter baserade på önskad användarinformation genom att uttryckligen ange de egenskaper som du vill inkludera i olika rapporterar.

Här är ett exempel i kod:

konst plocka = (objekt, ...nycklar) => {
lämna tillbaka keys.reduce((resultat, nyckel) => {
om (object.hasOwnProperty (nyckel)) {
 resultat[nyckel] = objekt[nyckel];
 }
lämna tillbaka resultat;
 }, {});
};

Pick-funktionen tar ett objekt och valfritt antal nycklar som argument. Nycklarna representerar de egenskaper du vill välja. Det returnerar sedan ett nytt objekt som endast innehåller egenskaperna för det ursprungliga objektet med matchande nycklar.

konst användare = {
 namn: "Martin",
 ålder: 30,
 e-post: '[email protected]',
};
trösta.log (välj (användare, 'namn', 'ålder'));
// Utdata: { namn: 'Martin', ålder: 30 }

I huvudsak kan en plockfunktion kapsla in komplex filtreringslogik i en enda funktion, vilket gör koden lättare att förstå och felsöka.

Det kan också främja kodåteranvändbarhet, eftersom du kan återanvända plockfunktionen i hela din kodbas, vilket minskar kodduplicering.

5. blixtlås

Denna zip-funktion kombinerar arrayer till en enda array av tupler, som matchar motsvarande element från varje inmatningsarray.

Här är ett exempel på implementering av en zip-funktion:

fungerablixtlås(...matriser) {
konst maxLängd = Matematik.min(...arrays.map(array => array.length));
lämna tillbakaArray.från(
 { längd: Maxlängd },
 (_, index) => arrays.map(array => array[index])
 );
};


konst a = [1, 2, 3];
konst b = ['a', 'b', 'c'];
konst c = [Sann, falsk, Sann];
trösta.log (zip (a, b, c));
// Utdata: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

Zip-funktionen accepterar inmatningsmatriser och beräknar deras längsta längd. Den skapar och returnerar sedan en enstaka array med Array.from JavaScript-metoden. Denna nya array innehåller element från varje inmatningsarray.

Detta är särskilt användbart om du behöver kombinera data från flera källor direkt, vilket tar bort behovet av att skriva redundant kod som annars skulle störa din kodbas.

Arbeta med JavaScript-funktioner i din kod

JavaScript-funktioner förbättrar avsevärt kvaliteten på din kod genom att tillhandahålla ett förenklat och kompakt sätt att hantera mycket av programmeringslogiken för både små och stora kodbaser. Genom att förstå och använda dessa funktioner kan du skriva mer effektiva, läsbara och underhållbara applikationer.

Att skriva bra kod gör det möjligt att bygga produkter som inte bara löser ett visst problem för slutanvändare, utan gör det på ett sätt som är lätt att modifiera.