Home-theater-designers
JavaScript ES6 va portar canvis emocionants al món del desenvolupament web. Les noves incorporacions al llenguatge JavaScript aporten noves possibilitats.
Un dels canvis més populars va ser l’addició de funcions de fletxa a JavaScript. Les funcions de fletxa són una nova manera d'escriure expressions de funcions JavaScript, que us ofereixen dues maneres diferents de crear funcions a l'aplicació.
Les funcions de fletxa necessiten una mica d’ajust si sou expert en funcions tradicionals de JavaScript. Vegem què són, com funcionen i com us beneficien.
Què són les funcions de fletxa de JavaScript?
Les funcions de fletxa són una nova manera d'escriure expressions de funcions que eren inclòs en el llançament de JavaScript ES6 . Són similars a les expressions de funció JavaScript que heu utilitzat, amb algunes regles lleugerament diferents.
Les funcions de fletxa sempre són funcions anònimes, tenen regles diferents per a
this, i tenen una sintaxi més senzilla que les funcions tradicionals.
el millor lloc per comprar CD de música en línia
Aquestes funcions utilitzen un nou testimoni de fletxa:
=>Si alguna vegada heu treballat a Python, aquestes funcions són molt similars a Expressions Python Lambda .
La sintaxi d’aquestes funcions és una mica més neta que les funcions normals. Hi ha algunes regles noves que cal tenir en compte:
- S'elimina la paraula clau de funció
- La paraula clau de retorn és opcional
- Els claus són opcionals
Hi ha molts petits canvis per recórrer, així que comencem amb una comparació bàsica d’expressions de funcions.
Com s'utilitzen les funcions de fletxa
Les funcions de fletxa són fàcils d'utilitzar. La comprensió de les funcions de fletxa és més fàcil si es compara paral·lelament amb les expressions de funcions tradicionals.
Aquí hi ha una expressió de funció que suma dos nombres; primer utilitzant el mètode de funció tradicional:
let addnum = function(num1,num2){
return num1 + num2;
};
addnum(1,2);
>>3És una funció bastant simple que agafa dos arguments i retorna la suma.
Aquí teniu l’expressió canviat per una funció de fletxa:
let addnum = (num1,num2) => { return num1 + num2;};
addnum(1,2);
>>3La sintaxi de la funció és força diferent mitjançant una funció de fletxa. S'elimina la paraula clau de funció; el testimoni de fletxa permet a JavaScript saber que escriviu una funció.
Els claus arrissats i la paraula clau de retorn encara hi són. Són opcionals amb funcions de fletxa. Aquí teniu un exemple encara més senzill de la mateixa funció:
let addnum = (num1,num2) => num1 + num2;La paraula clau de retorn i els claus arrissats ja no estan disponibles. El que queda és una funció d'una línia molt neta que és gairebé la meitat del codi que la funció original. Obtindreu el mateix resultat amb molt menys codi escrit.
Hi ha més coses sobre les funcions de fletxa. busquem més a fons perquè tingueu una millor idea del que poden fer.
Funcions de la funció de fletxa
Les funcions de fletxa inclouen molts usos i funcions diferents.
com perdre una ratxa a Snapchat
Funcions regulars
Les funcions de fletxa poden utilitzar un o més arguments. Si utilitzeu dos o més arguments, els heu d'incloure entre parèntesis. Si només teniu un argument, no cal que feu servir parèntesi.
let square = x => x * x
square(2);
>>4Les funcions de fletxa es poden utilitzar sense arguments. Si no utilitzeu cap argument a la vostra funció, heu d'utilitzar un parèntesi buit.
let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!Funcions simples com aquestes utilitzen molt menys codi. Imagineu el que és més fàcil un complex projecte com una presentació de diapositives JavaScript esdevé quan teniu una manera més senzilla d'escriure funcions.
Utilitzant això
El concepte de
thissol ser la part més complicada d’utilitzar JavaScript. Funcions de fletxa
thismés fàcil d'utilitzar.
Quan utilitzeu funcions de fletxa
thisestarà definit per la funció adjunta. Això pot crear problemes que apareixen quan creeu funcions imbricades i necessiteu
thisper aplicar a la vostra funció principal
Aquí teniu un exemple popular que mostra la solució alternativa que heu d’utilitzar amb funcions habituals.
function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}Assignació del valor de
thisa una variable fa que sigui llegible quan truqueu una funció dins de la funció principal. Això és desordenat, aquí hi ha una millor manera de fer-ho mitjançant les funcions de fletxa.
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}Tot i que són ideals per a funcions, no s’han d’utilitzar per crear mètodes dins d’un objecte. Les funcions de fletxa no utilitzen l'abast adequat per a
this.
Aquí hi ha un objecte senzill que crea un mètode dins mitjançant una funció de fletxa. El mètode hauria de reduir el cobertures variable per un quan es crida. En canvi, no funciona en absolut.
com evitar que es trenquin els auriculars
let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings
Treballar amb matrius
Mitjançant les funcions de fletxa podeu simplificar el codi utilitzat per treballar amb mètodes de matriu. Matrius i els mètodes de matriu són parts molt importants de JavaScript així que els faràs servir molt.
Hi ha alguns mètodes útils com el mapa que executa una funció en tots els elements d'una matriu i retorna la matriu nova.
let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});
>> [2,3,4,5]Aquesta és una funció bastant senzilla que afegeix un a cada valor de la matriu. Podeu escriure la mateixa funció amb menys codi mitjançant una funció de fletxa.
let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});
>> [2,3,4,5]Ara és molt més fàcil de llegir.
Creació de literals d'objectes
Les funcions de fletxa es poden utilitzar per crear literals d'objectes a JavaScript. Les funcions habituals poden crear-les, però són una mica més llargues.
let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};Podeu fer el mateix objecte amb una funció de fletxa amb menys codi. Si utilitzeu la notació de fletxa, haureu d’ajustar el cos de la funció entre parèntesis. Aquí teniu la sintaxi millorada amb les funcions de fletxa.
let createArrowObject = (first,last) => ({first:first, last:last});Funcions de fletxa JavaScript i més enllà
Ara ja coneixeu diferents maneres en què les funcions de fletxa JavaScript us faciliten la vida com a desenvolupador. Escurcen la sintaxi i us donen més control
this, faciliten la creació d'objectes i us ofereixen una nova manera de treballar amb mètodes de matriu.
La introducció de funcions de fletxa, juntament amb moltes altres funcions, a JavaScript ES6 mostra la importància que ha tingut JavaScript en el desenvolupament web. Tot i això, podeu fer molt més.
Voleu obtenir més informació sobre JavaScript? Apreneu aquests marcs de JavaScript. A més, el nostre Full de trucs de JavaScript proporciona informació valuosa i en té més informació com funciona JavaScript us pot convertir en un millor desenvolupador.
Compartir Compartir Tweet Correu electrònic 6 alternatives audibles: les millors aplicacions gratuïtes o econòmiques de audiollibresSi no us ve de gust pagar audiollibres, aquí teniu algunes aplicacions fantàstiques que us permeten escoltar-les de forma gratuïta i legal.
Llegiu a continuació Temes relacionats- Programació
- JavaScript
Anthony Grant és un escriptor independent que cobreix programació i programari. És un especialista en informàtica dedicat a la programació, Excel, programari i tecnologia.
Més de Anthony GrantSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us