I den här artikeln ska vi se vad de är och hur man använder JavaScript Arrow Functions, en ny funktion som introduceras med ES6-standarden (ECMAScript 6).
Vad är pilfunktioner
Arrow Functions är en ny syntax för att definiera anonyma funktioner i JavaScript på ett mer kortfattat sätt. Eftersom det är en förkortad syntax, kommer det att spara oss mycket tid, samt att förenkla funktionsomfånget. Det är en av de mest använda funktionerna i ES6.
För närvarande stöder de flesta webbläsare redan Arrow Functions, så vi kan använda dem på ett säkert sätt. De stöds dock inte av någon version av Internet Explorer.
För att definiera en pilfunktion använder vi symbolen “=>“, vars form påminner oss om en dubbelpil. Det är inte nödvändigt att skriva varken ordet funktion eller funktionen öppnande och avslutande klammerparenteser, eftersom det är ett skiftläge som liknar Lambdas av språk som Python eller C#. Pilfunktioner kan definieras på en enda rad.
Pilfunktioner Syntax
Vi kan definiera pilfunktioner på många sätt. I det här avsnittet kommer vi att se de mest använda, samt skillnaderna mellan en ES6-pilfunktion och en normal funktion.
Låt oss definiera en mycket enkel exempelfunktion som lägger till två tal.
// ES5 var sumaEs5 = function(x, y) { return x + y; }; // ES6 const sumaEs6 = (x, y) => { return x + y }; console.log(sumaEs6(2, 4)); // 6
Som vi kan se sparar vi ordfunktionen med pilfunktionen, och vi kan också skriva funktionen på en enda rad och bibehålla de rekommenderade goda metoderna.
Syntax med en parameter
Om vi använder en enskild parameter kan vi utelämna parenteserna som omger parametern. Som ett exempel, en funktion som beräknar kvadraten på ett tal:
// ES5 var cuadradoEs5 = function(x) { return x * x; }; // ES6 const cuadradoEs6 = (x) => { return x * x }; console.log(cuadradoEs6(3)); // 9
Syntax utan parametrar
Om vi inte använder någon parameter måste vi ändå skriva parenteserna. Som ett exempel, en funktion som gör en varning:
// ES5 var holaEs5 = function () {alert (‘Hej’); }; // ES6 const helloEs6 = () => {alert (‘Hej’); }; holaEs6 ();
Syntax för bokstavligt uttryck
Pilfunktioner kan också returnera ett objekt i dess bokstavliga uttrycksform. Objekt definieras mellan klammerparenteser, något som skulle stå i konflikt med definitionen av pilfunktioner. Det är därför vi för att returnera en bokstav måste omge funktionen med parenteser. Det vill säga att vi förutom hängslen måste placera en öppnings- och en avslutande parentes. Som ett exempel, denna funktion som omvandlar två parametrar till ett objekt:
// ES5 var addIdEs5 = function(id, name) { return { id: id, name: name } }; // ES6 const addIdEs6 = (id, namn) => ({ id: id, namn: namn }); console.log(addIdEs6(1, “Edu”)); // Objekt {id: 1, namn: “Edu”}
Nu vet du hur pilfunktioner definieras, så vi kommer att se hur man använder dem. Vi kommer också att se några praktiska exempel.
Hur man använder pilfunktioner
Vi kommer att se en serie exempel där du tydligt kommer att kunna se fördelarna med pilfunktionerna.
Array-manipulation
Ett mycket utökat användningsfall av pilfunktionerna är manipulering av arrayer. I det här exemplet kommer vi att definiera en rad bilar med deras namn och pris. Sedan kommer vi att skapa en funktion för att extrahera priserna på alla bilar med både ES5 och ES6:
konst frukter = [
{ name:’Apple’, price:1 },
{ name:’Banana’, price:2 },
{ name:’Peach’, price:3 }
]; // ES5 var priser = fruits.map(function(fruit) { return fruits.price; }); console.log(priser); // [1, 2, 3] // ES6 const priser = fruits.map(fruit => fruit.price); console.log(priser); // [1, 2, 3]
Som vi har sett är den andra funktionen kortare och mer koncis, och den är också lättare att läsa.
Låt oss titta på ett annat exempel där vi filtrerar siffrorna i en matris som är delbara med tre.
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; // ES5 var delbart med fyra ES5 = array.filter(funktion (n){ return n % 4 === 0; }); // ES6 const delbart med Fyra ES6 = array.filter(n => n % 4 === 0); console.log(delbart med fyra ES6); // [4, 8, 12, 16, 20]
Återigen är ES6-versionen kortare och mer koncis. Låt oss titta på ett annat typiskt användningsfall i nästa avsnitt.
Löften & återuppringningar
När vi använder callbacks i asynkrona funktioner kan vi hitta en hel del funktioner och värden som returneras eller skickas till andra funktioner. Om vi använder Promises kommer dessa uttryck att sammanfogas med varandra som du kan se i följande exempel där vi anropar tre asynkrona funktioner, efter varandra. Koden blir enklare om vi använder pilfunktioner
// ES5 aAsync().then(function() { retbAsync(); }).then(function() { retcAsync(); }).done(function() { finish(); }); // ES6 aAsync().sedan(() => bAsync()).sedan(() => cAsync()).klar(() => avsluta);
Förutom att dra nytta av en kortare syntax, eliminerar vi förvirringen med att använda ordet detta. Ett av problemen med att anropa funktioner på det här sättet i ES5 är att vi på något sätt måste överföra sammanhanget till nästa funktion.
Som vi sa tidigare, när vi använder pilfunktioner hålls sammanhanget mellan funktioner, så låt oss se skillnaderna med ett exempel:
// ES5 API.prototype.get = function(param) { var self = this; return new Promise(function(resolve, refuse) { http.get(self.uri + param, function(data) { resolve(data); }); }); }; // ES6 API.prototype.get = function(param) { return new Promise((resolve, reject) => { http.get(this.uri + param, function(data) { resolve(data); }); } ); };
I ES5 måste vi använda flera tekniker för att få sammanhanget till detta, som denna berömda klausul:
var själv = detta;.
Med hjälp av denna sats eller stängning får vi kontexten för den överordnade funktionen i ES5. Å andra sidan, med ES6 Arrow-funktionen, bibehålls kontexten för den överordnade funktionen. En annan metod som också används flitigt i ES5 är att använda .bind-metoden, som i praktiken visar sig vara ganska långsam.
Överväganden om pilfunktioner
Pilfunktioner, som allt annat, har sina fördelar och nackdelar. I det här avsnittet kommer vi att se vad de är.
Till att börja med kan syntaxen för funktionerna vara mer förvirrande för vissa personer och till och med göra det svårare att läsa, eftersom det är mindre naturligt. Åtminstone är detta vad vissa människor tycker, men sanningen är att det finns fler utvecklare för användningen än emot den.
Så att du inte hatar Arrow Functions på grund av flera fel som du av misstag kan tro är buggar, finns det flera saker att tänka på:
Detta: Ordet detta fungerar på ett annat sätt i Arrow Functions. Värdet på detta kan inte ändras inuti funktionen och även om du försöker kommer du att upptäcka att dess värde är detsamma som det som funktionen anropades med. Anrops-, applicerings- och bindmetoderna kommer inte heller att ändra dess värde.
Konstruktörer: Pilfunktioner kan inte användas som konstruktörer på samma sätt som andra funktioner. Om du använder det reserverade ordet nytt med en pilfunktion får du ett felmeddelande. Dessa funktioner har ingen prototypegenskap eller andra interna metoder. Konstruktörer används vanligtvis för att rensa objekt i en klass, så det är bäst att använda de klasser som också har införlivats i ES6.
Generatorer: Pilfunktioner kan inte användas som generatorer, vilket är funktioner definierade med fungera* syntax.
Argument: Pilfunktioner har inte en intern variabel definierad som argument som andra funktioner har. Variabeln argument är en array som låter oss få fram argumenten för en funktion, något användbart om en funktion har ett obestämt antal argument. Kom ihåg att den här funktionen inte är tillgänglig i pilfunktionerna.
Det finns några fler, men dessa har varit de fyra främsta övervägandena du bör tänka på.
När ska man använda en pilfunktion
När och var du ska använda pilfunktionerna är upp till dig, men här är tre rekommendationer.
Använd de klassiska funktionerna – fungera – i den globala omfattningen och för fastigheter definierade som Objekt.prototyp.
För resten av funktionerna, förutom när du definierar en konstruktor, som du ska använda klass, kan du använda pilfunktioner så länge som deras speciella egenskaper inte hindrar dig från att skapa dem. I själva verket är det att förvänta sig att, liksom med låta och konstkommer denna metod att vara standardmetoden för att definiera en funktion.
projekt
Vi använder våra egna och tredje parts cookies för att förbättra våra tjänster, sammanställa statistisk information och analysera dina surfvanor. Detta gör att vi kan anpassa innehållet vi erbjuder och visa dig annonser som är relaterade till dina preferenser. Genom att klicka på “Acceptera alla” godkänner du lagringen av cookies på din enhet för att förbättra webbplatsnavigering, analysera trafik och hjälpa våra marknadsföringsaktiviteter. Du kan också välja “Endast systemcookies” för att endast acceptera de cookies som krävs för att webbplatsen ska fungera, eller så kan du välja de cookies du vill aktivera genom att klicka på “inställningar”.
Acceptera alla Endast systemcookies Konfiguration
Alltid aktiv
Strikt nödvändiga cookies
Dessa cookies är nödvändiga för att webbplatsen ska fungera och kan inte inaktiveras i våra system. De ställs i allmänhet bara in som svar på dina handlingar när du begär tjänster, som att ställa in dina integritetsinställningar, logga in eller fylla i formulär. Du kan ställa in din webbläsare för att blockera eller varna dig för dessa cookies, men vissa delar av webbplatsen kommer inte att fungera. Dessa cookies lagrar ingen personligt identifierbar information
