Функциите на стрелката на JavaScript могат да ви направят по-добър разработчик

реклама

JavaScript ES6 внесе вълнуващи промени в света на уеб разработката. Новите допълнения към езика на JavaScript донесоха нови възможности.

Една от по-популярните промени беше добавянето на функции със стрелки в JavaScript. Функциите със стрелки са нов начин за писане на изрази на JavaScript функции, като ви дават два различни начина за създаване на функции в приложението ви.

Функциите на стрелките изискват малко коригиране, ако сте експерт в традиционните JavaScript функции. Нека да разгледаме какви са те, как работят и как те са от полза за вас.

Какво представляват функциите на стрелката на JavaScript?

Функциите със стрелки са нов начин за писане на изрази на функции, които са били включени в издаването на JavaScript ES6 Какво е ES6 и какво трябва да знаят програмистите на JavaScriptES6 се отнася до версия 6 на езика за програмиране на ECMA Script (Javascript). Нека сега разгледаме някои основни промени, които ES6 внася в JavaScript. Прочетете още . Те са подобни на изразите на функцията на JavaScript, които сте използвали, с някои малко по-различни правила.

Функциите със стрелка винаги са анонимни функции, имат различни правила за товаи имат по-прост синтаксис от традиционните функции.

Тези функции използват нов знак за стрелка:

=>

Ако някога сте работили в Python, тези функции са много подобни Python Lambda изрази Ръководство за начинаещи за разбиране на функциите на Python LambdaЛямбдите в Python са една от най-полезните, важни и интересни функции, които трябва да знаете. Ето как да ги използвате и защо са полезни. Прочетете още .

Синтаксисът за тези функции е малко по-изчистен от нормалните функции. Има няколко нови правила, които трябва да имате предвид:

• Функционалната ключова дума е премахната
• Ключовата дума за връщане не е задължителна
• Къдравите брекети не са задължителни

Има много малки промени, за да преминем, така че нека започнем с основно сравнение на изразите на функции.

Как да използвате стрелка функции

Функциите със стрелки са лесни за използване. Разбирането на функциите със стрелки е по-лесно в сравнение с рамо до рамо с традиционните изрази на функции.

Ето функционален израз, който добавя две числа; първо използвайки традиционния метод на функция:

 нека addnum = функция (num1, num2) {return num1 + num2; }; addnum (1,2); >>3

Това е доста проста функция, която взема два аргумента и връща сумата.

Ето израза, променен на функция със стрелка:

нека addnum = (num1, num2) => {return num1 + num2;}; addnum (1,2); >>3

Синтаксисът на функцията е съвсем различен чрез използване на стрелка. Функционалната ключова дума е премахната; стрелката дава възможност на JavaScript да знае, че пишете функция.

Къдравите скоби и ключовата дума за връщане все още са там. Те са незадължителни с функции със стрелки. Ето още по-прост пример за същата функция:

нека addnum = (num1, num2) => num1 + num2;

Ключовата дума за връщане и къдравите скоби вече няма. Това, което е останало, е много чиста едноредова функция, която е почти половината от кода като оригиналната функция. Получавате същия резултат с много по-малко написан код.

Има още функции за стрелки. нека се гмуркаме по-дълбоко, за да се почувствате по-добре какво могат да направят.

Функции на стрелката

Функциите със стрелки включват много различни приложения и функции.

Редовни функции

Функциите на стрелката могат да използват един или повече аргументи. Ако използвате два или повече аргумента, трябва да ги затворите в скоби. Ако имате само един аргумент, не е необходимо да използвате скоби.

нека квадрат = х => х * х квадрат (2); >>4

Функциите със стрелки могат да се използват без аргументи. Ако не използвате аргументи във функцията си, трябва да използвате празни скоби.

нека helloFunction = () => Console.log ("Здравей читателю!"); helloFunction (); >> Здравейте читателю!

Прости функции като тези използват много по-малко код. Представете си колко по-лесен е един комплекс проект като слайдшоу на JavaScript Как да изградите JavaScript слайдшоу в 3 лесни стъпкиДнес ще ви покажа как да изградите слайдшоу на Javacript от нулата - нека скочим веднага! Прочетете още става, когато имате по-прост начин да пишете функции.

Използвайки това

Концепцията за това обикновено е най-трудната част от използването на JavaScript. Функциите на стрелките правят това по-лесен за използване.

Когато използвате функции със стрелки това ще се дефинира от приложената функция. Това може да създаде проблеми, които възникват, когато създавате вложени функции и нужда това да се прилага към основната ви функция

Ето един популярен пример, който показва решението, което трябва да използвате с редовни функции.

функция Person () {var that = this; // Трябва да зададете 'това' на нова променлива that.age = 0; setInterval (функция нарастване () {that.age ++; }, 1000); }

Присвояване на стойността на това до променлива го прави четим, когато извикате функция вътре в основната си функция. Това е объркано, ето по-добрият начин да направите това с помощта на функции със стрелки.

функция Person () {this.age = 0; setInterval (() => {this.age ++; // Сега можете да използвате 'this' без декларирана нова променлива}, 1000); }

Въпреки че са чудесни за функции, те не трябва да се използват за създаване на методи вътре в обект. Функциите на стрелките не използват правилния обхват това.

Ето един прост обект, който създава метод вътре с помощта на стрелка. Методът трябва да намали гарнитурата променлива по една при повикване. Вместо това изобщо не работи.

нека пица = { гарнитура: 5, RemoveToppings: () => {this.toppings--; } } // Обект за пица с 5 гарнитури. > Пица. >> {toppings: 5, RemoveToppings: f} pizza.removeToppings (); // Методът няма да направи нищо на обекта> пица. >> {toppings: 5, removeToppings: f} // Все още има 5 гарнитури.

Работа с масиви

С помощта на функции със стрелки можете да опростите кода, използван за работа с методите на масив. Масиви и методите на масив са много важни части от JavaScript 5 метода на JavaScript масив, който трябва да овладеете днесИскате да разберете JavaScript масиви, но не можете да се справите с тях? Вижте нашите примери за масив JavaScript за насоки. Прочетете още така че ще ги използвате много.

Има някои полезни методи като карта метод, който изпълнява функция на всички елементи на масив и връща новия масив.

нека myArray = [1,2,3,4]; myArray.map (функция (елемент) { възвратен елемент + 1; }); >> [2,3,4,5]

Това е доста проста функция, която добавя по една към всяка стойност в масива. Можете да напишете същата функция с по-малко код, като използвате функция със стрелка.

нека myArray = [1,2,3,4]; myArray.map (елемент => { възвратен елемент + 1; }); >> [2,3,4,5]

Много по-лесно е да се чете сега.

Създаване на обектни литерали

Функциите със стрелки могат да се използват за създаване на обектни литерали в JavaScript. Редовните функции могат да ги създават, но те са малко по-дълги.

нека createObject = функция createName (първа, последна) {return {first: first, last: last}; };

Можете да направите един и същ обект с функция със стрелка, като използвате по-малко код. Използвайки нотацията със стрелки, ще трябва да увиете функционалното тяло в скоби. Ето подобреният синтаксис със стрелките.

нека createArrowObject = (първи, последен) => ({първи: първи, последен: последен});

Функции на стрелката на JavaScript и други

Вече знаете няколко различни начина, по които функциите на стрелката на JavaScript улесняват живота ви като програмист. Те съкращават синтаксиса, дават ви повече контрол при използване това, правят обектите по-лесни за създаване и ви дават нов начин за работа с методите на масив.

Въвеждането на функции със стрелки, заедно с много други функции, в JavaScript ES6 показва колко важен JavaScript е станал в уеб разработката. Въпреки това, можете да направите много повече.

Искате ли да научите повече за JavaScript? наш JavaScript мамят лист The Ultimate JavaScript Cheat SheetВземете бързо обновяване на JavaScript елементи с този мамят лист. Прочетете още предоставя ценна информация и научава повече за как работи JavaScript Какво е JavaScript и как работи?Ако се учите в уеб разработка, ето какво трябва да знаете за JavaScript и как работи с HTML и CSS. Прочетете още може да ви направи по-добър разработчик.