de Kevin Kononenko

Funcțiile săgeții JavaScript sunt explicate prin coborârea unui diapozitiv

Dacă ați coborât vreodată pe un tobogan de apă, atunci puteți înțelege funcțiile săgeții.

Functiile sagetii JavaScript sunt explicate prin coborarea unui diapozitiv

Dacă folosiți JavaScript de câțiva ani, probabil că sunteți familiarizat cu această sintaxă:

function addTen(num){  return num + 10;});
console.log(addTen(2));//12

Această sintaxă a funcției a fost populară în ES5 sau ECMAScript 5.

Există un avantaj major la această sintaxă: include cuvântul funcție, deci este evident că scrieți o funcție!

O funcție acceptă în mod clar de la 0 la multe argumente și rulează un set specific de instrucțiuni de fiecare dată când este apelată.

Însă lumea JavaScript a făcut un salt înainte cu ES6 în 2015.

Acum, aceeași funcție ca mai sus ar fi scrisă astfel:

let addTen = (num) => num + 10;
console.log(addTen(2));//12

Acum, nu există funcţie cuvânt cheie și fără declarație de returnare! Funcțiile din ES6 sunt mult mai concise sau mai concise.

Deci, din moment ce aceste indicii evidente au fost eliminate, este posibil să aveți un pic de greu cu înțelegerea diferitelor părți ale funcțiilor săgeții.

Din fericire, după cum veți vedea în curând cu câteva animații, funcțiile săgeții sunt destul de ușor de înțeles odată ce învățați să vizualizați săgeata „=>” într-un mod nou.

Iată deci cum funcțiile săgeții sunt la fel ca un tobogan de apă. Pentru a înțelege pe deplin acest tutorial, ar putea fi util să știți despre funcții de hartă și scoping.

Funcțiile săgeții vizualizate

Să explorăm funcția addTen puțin mai profund.

let addTen = (num) => num + 10;
console.log(addTen(2));//12

Această funcție va transforma un parametru și va genera acel parametru cu 10 adăugate.

Transformarea se întâmplă cu acea săgeată subtilă „=>”.

Îmi place să transform acea săgeată în diapozitiv în minte pentru a arăta ce se întâmplă de fapt. Iată ce vreau să spun:

Functiile sagetii JavaScript sunt explicate prin coborarea unui diapozitiv

Semnul egal este ca alunecarea tubului și săgeata este ca platforma de aterizare.

Funcțiile săgeți urmează acest model:

(parametri) => {declarații}

Deci, să le adăugăm pe diagramă cu exemplul nostru de funcție addTen.

1611296647 344 Functiile sagetii JavaScript sunt explicate prin coborarea unui diapozitiv

Ultimul lucru pe care trebuie să îl arătăm este modul în care parametrul, care este 10 în acest caz, coboară în diapozitiv și devine disponibil în instrucțiunile funcției. Iată cum arată asta.

1611296648 517 Functiile sagetii JavaScript sunt explicate prin coborarea unui diapozitiv

Atât este! Destul de direct.

Acum, să analizăm un exemplu în care există doi parametri diferiți. Iată noua noastră funcție:

let multiply = (num1, num2) => {return num1 * num2};
console.log(multiply(2, 10));//20

În acest caz, doar înmulțim cei doi parametri împreună. Ambele vor coborî diapozitivul împreună. Asa:

1611296649 801 Functiile sagetii JavaScript sunt explicate prin coborarea unui diapozitiv

Mai este un exemplu pe care ar trebui să-l cunoașteți – combinarea metodei map () cu funcțiile săgeții.

Metoda map () va trimite fiecare element dintr-o matrice în funcția săgeată, în ordine.

Să trecem printr-un exemplu: imaginați-vă că aveți o serie de numere și doriți să obțineți rădăcina pătrată a fiecăruia.

Iată codul.

let nums = [1, 4, 9];
let squares = nums.map((num) => {  return Math.sqrt(num);});
console.log (squares)// [1, 2, 3]

Trebuie să știți puțin despre metoda hărții pentru a o înțelege. Dar, probabil, veți observa din nou sintaxa concisă – metoda map () este mult mai scurtă decât scrierea unei bucle for ().

Iată ce se întâmplă în acest cod:

1611296650 580 Functiile sagetii JavaScript sunt explicate prin coborarea unui diapozitiv
  1. Există trei elemente în nums matrice, deci num parametrul coboară diapozitivul de 3 ori.
  2. Metoda Math.sqrt () ia de fiecare dată rădăcina pătrată a numărului.
  3. Rezultatul este stocat în pătrate matrice de fiecare dată.

Diferența dintre funcțiile săgeată și funcțiile tradiționale

S-ar putea să vă întrebați … este pur și simplu o diferență de sintaxă?

De fapt, există un mod important prin care funcțiile tradiționale ES5 și funcțiile ES6 funcționează diferit.

Marea schimbare este că funcțiile săgeată nu au propriul scop. Prin urmare, dacă încercați să utilizați acest cuvânt cheie, veți fi surprins când nu se referă la scopul funcției săgeată.

Pentru a reveni la analogia noastră de diapozitive, asta înseamnă asta acest este același în partea de sus și de jos a diapozitivului. Dacă am folosi funcții ES5, atunci acest ar fi diferit în partea de sus și de jos a diapozitivului.

Pentru a recunoaște rapid acest lucru în cod, trebuie doar să căutați funcţie cuvânt cheie. Dacă îl vedeți, asta înseamnă că se creează un nou domeniu. Dacă nu, presupuneți că utilizați scopul funcției de anexare.

Vă place acest tutorial vizual?

Dacă ți-a plăcut acest tutorial, dă-i „palme”! Sau, dacă doriți să citiți mai multe tutoriale vizuale despre HTML, CSS și JavaScript, consultați site-ul principal CodeAnalogies pentru peste 50 de tutoriale.