JavaScript-pijlfuncties kunnen u een betere ontwikkelaar maken

Advertentie

JavaScript ES6 bracht opwindende veranderingen in de wereld van webontwikkeling. Nieuwe toevoegingen aan de JavaScript-taal brachten nieuwe mogelijkheden.

Een van de meer populaire wijzigingen was de toevoeging van pijlfuncties in JavaScript. Pijlfuncties zijn een nieuwe manier om JavaScript-functie-uitdrukkingen te schrijven, waardoor u twee verschillende manieren hebt om functies in uw app te maken.

Pijlfuncties moeten een beetje worden aangepast als u een expert bent in traditionele JavaScript-functies. Laten we eens kijken wat dit zijn, hoe ze werken en hoe ze u ten goede komen.

Wat zijn JavaScript-pijlfuncties?

Pijlfuncties zijn een nieuwe manier om functie-expressies te schrijven die er waren opgenomen in de release van JavaScript ES6 Wat is ES6 en wat Javascript-programmeurs moeten wetenES6 verwijst naar versie 6 van de programmeertaal ECMA Script (Javascript). Laten we nu eens kijken naar enkele belangrijke wijzigingen die ES6 in JavaScript brengt. Lees verder . Ze zijn vergelijkbaar met de JavaScript-functie-uitdrukkingen die u hebt gebruikt, met enkele enigszins verschillende regels.

Pijlfuncties zijn altijd anonieme functies, waarvoor verschillende regels gelden dezeen hebben een eenvoudigere syntaxis dan traditionele functies.

Deze functies gebruiken een nieuw pijltoken:

=>

Als je ooit in Python hebt gewerkt, lijken deze functies erg op Python Lambda-uitdrukkingen Een beginnersgids voor het begrijpen van Python Lambda-functiesLambdas in Python zijn een van de meest nuttige, belangrijke en interessante functies om over te weten. Hier is hoe ze te gebruiken en waarom ze nuttig zijn. Lees verder .

De syntaxis voor deze functies is iets schoner dan normale functies. Er zijn een paar nieuwe regels om in gedachten te houden:

• Het functietrefwoord is verwijderd
• Het retourwoord is optioneel
• Krullende accolades zijn optioneel

Er zijn veel kleine wijzigingen die we moeten bespreken, dus laten we beginnen met een basisvergelijking van functie-uitdrukkingen.

Hoe pijlfuncties te gebruiken

Pijlfuncties zijn gemakkelijk te gebruiken. Het begrijpen van pijlfuncties is eenvoudiger in vergelijking met traditionele functie-uitdrukkingen.

Hier is een functie-uitdrukking die twee getallen toevoegt; eerst met behulp van de traditionele functiemethode:

 let addnum = function (num1, num2) {return num1 + num2; }; addnum (1,2); >>3

Het is een vrij eenvoudige functie die twee argumenten aanneemt en de som teruggeeft.

Hier is de uitdrukking veranderd in een pijlfunctie:

let addnum = (num1, num2) => {return num1 + num2;}; addnum (1,2); >>3

De syntaxis van de functie is heel anders met behulp van een pijlfunctie. Het functietrefwoord is verwijderd; het pijltoken laat JavaScript weten dat u een functie schrijft.

De accolades en het zoekwoord zijn nog steeds aanwezig. Deze zijn optioneel met pijlfuncties. Hier is een nog eenvoudiger voorbeeld van dezelfde functie:

let addnum = (num1, num2) => num1 + num2;

Het retourwoord en de accolades zijn nu verdwenen. Wat overblijft is een zeer schone one-line functie die bijna de helft van de code is als de originele functie. Je krijgt hetzelfde resultaat met veel minder geschreven code.

Pijlfuncties hebben meer te bieden. laten we dieper duiken zodat u een beter gevoel krijgt voor wat ze kunnen doen.

Functies van de pijlfunctie

Pijlfuncties hebben veel verschillende toepassingen en functies.

Reguliere functies

Pijlfuncties kunnen een of meer argumenten gebruiken. Als u twee of meer argumenten gebruikt, moet u deze tussen haakjes plaatsen. Als u slechts één argument hebt, hoeft u geen haakjes te gebruiken.

laat vierkant = x => x * x vierkant (2); >>4

Pijlfuncties kunnen zonder argumenten worden gebruikt. Als u geen argumenten in uw functie gebruikt, moet u lege haakjes gebruiken.

let helloFunction = () => Console.log ("Hallo lezer!"); helloFunction (); >> Hallo lezer!

Eenvoudige functies zoals deze gebruiken veel minder code. Stel je voor hoeveel gemakkelijker een complex is projecteren als een JavaScript-diavoorstelling Hoe maak je een JavaScript SlideShow in 3 eenvoudige stappenVandaag laat ik je zien hoe je vanuit het niets een Javacript-diavoorstelling kunt maken - laten we meteen beginnen! Lees verder wordt wanneer u een eenvoudigere manier hebt om functies te schrijven.

Dit gebruiken

Het concept van deze is meestal het lastigste onderdeel van het gebruik van JavaScript. Pijlfuncties maken deze gemakkelijker te gebruiken.

Wanneer u pijlfuncties gebruikt deze wordt bepaald door de omhullende functie. Dit kan problemen veroorzaken die optreden wanneer u geneste functies en behoeften maakt deze toe te passen op uw hoofdfunctie

Hier is een populair voorbeeld dat de tijdelijke oplossing toont die u moet gebruiken met normale functies.

functie Person () {var that = this; // Je moet 'dit' toewijzen aan een nieuwe variabele that.age = 0; setInterval (function growUp () {that.age ++; }, 1000); }

De waarde van toewijzen deze naar een variabele maakt het leesbaar wanneer u een functie binnen uw hoofdfunctie aanroept. Dit is rommelig, dit is een betere manier om dit te doen met behulp van pijlfuncties.

functie Person () {this.age = 0; setInterval (() => {this.age ++; // Nu kun je 'dit' gebruiken zonder een nieuwe variabele}}, 1000); }

Hoewel ze geweldig zijn voor functies, moeten ze niet worden gebruikt om methoden in een object te maken. Pijlfuncties gebruiken niet de juiste scoping voor deze.

Hier is een eenvoudig object dat een methode maakt met behulp van een pijlfunctie. De methode moet de toppings variabel met een wanneer opgeroepen. In plaats daarvan werkt het helemaal niet.

let pizza = { toppings: 5, removeToppings: () => {this.toppings--; } } // Een pizza-object met 5 toppings. > Pizza. >> {toppings: 5, removeToppings: f} pizza.removeToppings (); // De methode doet niets met het object> pizza. >> {toppings: 5, removeToppings: f} // Heeft nog 5 toppings.

Werken met arrays

Met behulp van pijlfuncties kunt u de code vereenvoudigen die wordt gebruikt om met matrixmethoden te werken. Arrays en matrixmethoden zijn zeer belangrijke onderdelen van JavaScript 5 JavaScript-array-methoden die u vandaag de dag moet beheersenWilt u JavaScript-arrays begrijpen, maar kunt u er geen grip op krijgen? Bekijk onze voorbeelden van JavaScript-arrays voor meer informatie. Lees verder dus je zult ze veel gebruiken.

Er zijn enkele handige methoden zoals de kaart methode die een functie uitvoert op alle elementen van een array en de nieuwe array retourneert.

laat myArray = [1,2,3,4]; myArray.map (function (element) { retourelement + 1; }); >> [2,3,4,5]

Dit is een vrij eenvoudige functie die één toevoegt aan elke waarde in de array. U kunt dezelfde functie met minder code schrijven met behulp van een pijlfunctie.

laat myArray = [1,2,3,4]; myArray.map (element => { retourelement + 1; }); >> [2,3,4,5]

Het is nu veel gemakkelijker om te lezen.

Objectliteralen maken

Pijlfuncties kunnen worden gebruikt om objectliteralen in JavaScript te maken. Regelmatige functies kunnen ze maken, maar ze zijn iets langer.

let createObject = function createName (first, last) {return {first: first, last: last}; };

U kunt hetzelfde object met een pijlfunctie maken met minder code. Met behulp van de pijlnotatie moet u het functielichaam tussen haakjes plaatsen. Hier is de verbeterde syntaxis met pijlfuncties.

let createArrowObject = (first, last) => ({first: first, last: last});

JavaScript Arrow Functions and Beyond

U kent nu verschillende manieren waarop JavaScript-pijlfuncties uw leven als ontwikkelaar gemakkelijker maken. Ze verkorten de syntaxis en geven u meer controle over het gebruik deze, maakt het gemakkelijker om objecten te maken en biedt u een nieuwe manier om met matrixmethoden te werken.

De introductie van pijlfuncties, samen met vele andere functies, in JavaScript ES6 laat zien hoe belangrijk JavaScript is geworden in webontwikkeling. Je kunt echter nog veel meer doen.

Wilt u meer weten over JavaScript? Onze JavaScript cheatsheet Het ultieme JavaScript-spiekbriefjeKrijg snel een opfriscursus over JavaScript-elementen met dit spiekbriefje. Lees verder biedt waardevolle informatie en meer informatie over hoe JavaScript werkt Wat is JavaScript en hoe werkt het?Als u webontwikkeling leert, moet u het volgende weten over JavaScript en hoe het werkt met HTML en CSS. Lees verder kan je een betere ontwikkelaar maken.