5 geavanceerde JavaScript-functies die u kunt gebruiken om de kwaliteit van uw code te verbeteren

JavaScript is de de facto taal voor het bouwen van moderne web- en mobiele applicaties. Het ondersteunt een breed scala aan projecten, van eenvoudige websites tot dynamische, interactieve apps.

Om producten te maken die gebruikers leuk zullen vinden en waarderen, is het van essentieel belang dat u code schrijft die niet alleen functioneel is, maar ook efficiënt en gemakkelijk te onderhouden. Schone JavaScript-code is essentieel voor het succes van elke web- of mobiele app, of het nu gaat om een ​​hobbyproject of een complexe commerciële toepassing.

Wat is er zo goed aan JavaScript-functies?

Een functie is een essentieel onderdeel voor het schrijven van code voor elke toepassing. Het definieert een stuk herbruikbare code die u kunt aanroepen om een ​​specifieke taak uit te voeren.

Naast hun herbruikbaarheid zijn functies zeer veelzijdig. Op de lange termijn vereenvoudigen ze het proces van het schalen en onderhouden van een codebase. Door

het maken en gebruiken van JavaScript-functies, kunt u veel ontwikkelingstijd besparen.

Hier zijn enkele handige JavaScript-functies die de kwaliteit van de code van uw project aanzienlijk kunnen verbeteren.

1. eenmaal

Deze eenmalig-functie van hogere orde wikkelt een andere functie om ervoor te zorgen dat u deze slechts één keer kunt aanroepen. Het zou volgende pogingen om de resulterende functie aan te roepen stilzwijgend moeten negeren.

Overweeg een situatie waarin u HTTP API-verzoeken wilt doen om gegevens uit een database op te halen. U kunt de eenmaal functie als een callback voor een gebeurtenislistenerfunctie, zodat het één keer wordt geactiveerd en niet meer.

Hier ziet u hoe u zo'n functie zou kunnen definiëren:

const eenmaal = (func) => {
laten resultaat;
laten funcCalled = vals;
opbrengst(...argumenten) => {
als (!funcalled) {
 resultaat = func(...args);
 funcCalled = WAAR;
 }
opbrengst resultaat;
 };
};

De once-functie neemt een functie als argument en retourneert een nieuwe functie die je maar één keer kunt aanroepen. Wanneer u de nieuwe functie voor de eerste keer aanroept, voert deze de oorspronkelijke functie uit met de gegeven argumenten en slaat het resultaat op.

Alle volgende aanroepen van de nieuwe functie retourneren het opgeslagen resultaat zonder de oorspronkelijke functie opnieuw uit te voeren. Bekijk hieronder de uitvoering:

// Definieer een functie om gegevens op te halen uit de database
functiegetUserData() {
// ...
}
// verkrijg een versie van de functie getUserData die maar één keer kan worden uitgevoerd
const makeHTTPRequestOnlyOnce = eenmaal (getUserData);
const userDataBtn = document.querySelector("#btn");
userDataBtn.addEventListener("Klik", makeHTTPRequestOnlyOnce);

Door de once-functie te gebruiken, kunt u garanderen dat de code slechts één verzoek verzendt, zelfs als de gebruiker meerdere keren op de knop klikt. Dit voorkomt prestatieproblemen en bugs die het gevolg kunnen zijn van overbodige verzoeken.

2. pijp

Met deze pipe-functie kunt u meerdere functies in een reeks aan elkaar koppelen. De functies in de reeks nemen het resultaat van de voorgaande functie als invoer en de laatste functie in de reeks berekent het uiteindelijke resultaat.

Hier is een voorbeeld in code:

// Definieer de pipe-functie
const pijp = (...functies) => {
opbrengst(arg) => {
 funcs.forEach(functie(func) {
 arg = functie (arg);
 });
opbrengst arg;
 }
}
// Definieer enkele functies
const addOne = (A) => een + 1;
const dubbel = (X) => X * 2;
const vierkant = (X) => x * x;
// Maak een pijp met de functies
const myPipe = pijp (addOne, dubbel, vierkant);
// Test de leiding met een invoerwaarde
troosten.log (mijnPijp(2)); // Uitvoer: 36

Pipe-functies kunnen de leesbaarheid en modulariteit van code verbeteren doordat u complexe verwerkingslogica beknopt kunt schrijven. Dit kan uw code begrijpelijker en gemakkelijker te onderhouden maken.

3. kaart

De kaartfunctie is een methode van de ingebouwde JavaScript Array-klasse. Het creëert een nieuwe array door een callback-functie toe te passen op elk element van de originele array.

Het doorloopt elk element in de invoerarray, geeft het door als invoer voor de callback-functie en voegt elk resultaat in een nieuwe array in.

Het is belangrijk op te merken dat de oorspronkelijke array tijdens dit proces op geen enkele manier wordt gewijzigd.

Hier is een voorbeeld van hoe te gebruiken kaart:

const nummers = [1, 2, 3, 4, 5];
const verdubbeldNumbers = numbers.map(functie(nummer) {
opbrengst nummer * 2;
});
troosten.log (verdubbelde nummers);
// Uitvoer: [2, 4, 6, 8, 10]

In dit voorbeeld herhaalt de kaartfunctie elk element in de getallenreeks. Het vermenigvuldigt elk element met 2 en retourneert de resultaten in een nieuwe array.

Over het algemeen elimineren kaartfuncties de noodzaak van loops gebruiken in JavaScript, vooral oneindige lussen: oneindige lussen kunnen aanzienlijke rekenkundige overhead veroorzaken, wat leidt tot prestatieproblemen in een toepassing. Dit maakt de codebase beknopter en minder foutgevoelig.

4. kies

Met deze keuzefunctie kunt u selectief specifieke eigenschappen uit een bestaand object extraheren en een nieuw object genereren met die eigenschappen als resultaat van de berekening.

Overweeg bijvoorbeeld een rapportagefunctie in een applicatie, door gebruik te maken van de pickfunctie kunt u deze moeiteloos aanpassen verschillende rapporten op basis van de gewenste gebruikersinformatie door expliciet de eigenschappen op te geven die u in verschillende wilt opnemen rapporten.

Hier is een voorbeeld in code:

const kies = (voorwerp, ...sleutels) => {
opbrengst toetsen.verminderen((resultaat, sleutel) => {
als (object.hasOwnProperty (sleutel)) {
 resultaat[sleutel] = object[sleutel];
 }
opbrengst resultaat;
 }, {});
};

De pick-functie neemt een object en een willekeurig aantal sleutels als argumenten. De toetsen vertegenwoordigen de eigenschappen die u wilt selecteren. Vervolgens wordt een nieuw object geretourneerd dat alleen de eigenschappen van het oorspronkelijke object met overeenkomende sleutels bevat.

const gebruiker = {
 naam: 'Martin',
 leeftijd: 30,
 e-mail: '[email protected]',
};
troosten.log (kies (gebruiker, 'naam', 'leeftijd'));
// Output: { naam: 'Martin', leeftijd: 30 }

In wezen kan een pick-functie complexe filterlogica in een enkele functie inkapselen, waardoor de code gemakkelijker te begrijpen en te debuggen is.

Het kan ook de herbruikbaarheid van code bevorderen, aangezien u de pick-functie in uw hele codebase kunt hergebruiken, waardoor codeduplicatie wordt verminderd.

5. ritssluiting

Deze zip-functie combineert arrays tot een enkele array van tuples, die corresponderende elementen uit elke invoerarray matchen.

Hier is een voorbeeldimplementatie van een zip-functie:

functieritssluiting(...matrices) {
const maxLengte = Wiskunde.min(...arrays.map(reeks => array.lengte));
opbrengstmatrix.van(
 { lengte: maximale lengte },
 (_, index) => arrays.map(reeks => reeks[index])
 );
};
const een = [1, 2, 3];
const b = ['A', 'B', 'C'];
const c = [WAAR, vals, WAAR];
troosten.log (zip (a, b, c));
// Uitvoer: [[1, 'a', waar], [2, 'b', onwaar], [3, 'c', waar]]

De zip-functie accepteert invoerarrays en berekent hun langste lengte. Vervolgens wordt een enkele array gemaakt en geretourneerd met behulp van de Array.from JavaScript-methode. Deze nieuwe array bevat elementen uit elke invoerarray.

Dit is vooral handig als u gegevens uit meerdere bronnen direct moet combineren, zodat u geen overbodige code meer hoeft te schrijven die anders uw codebase onoverzichtelijk zou maken.

Werken met JavaScript-functies in uw code

JavaScript-functies verbeteren de kwaliteit van uw code aanzienlijk door een vereenvoudigde en compacte manier te bieden om veel van de programmeerlogica voor zowel kleine als grote codebases te verwerken. Door deze functies te begrijpen en te gebruiken, kunt u efficiëntere, leesbare en onderhoudbare applicaties schrijven.

Het schrijven van goede code maakt het mogelijk om producten te bouwen die niet alleen een bepaald probleem voor eindgebruikers oplossen, maar dat doen op een manier die gemakkelijk aan te passen is.