Стрелочные функции JavaScript могут сделать вас лучшим разработчиком

Стрелочные функции JavaScript могут сделать вас лучшим разработчиком

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





Одним из наиболее популярных изменений стало добавление стрелочных функций в JavaScript. Стрелочные функции - это новый способ написания выражений функций JavaScript, дающий вам два разных способа создания функций в вашем приложении.



Если вы эксперт в традиционных функциях JavaScript, функции со стрелками потребуют некоторой настройки. Давайте посмотрим, что это такое, как они работают и какую пользу вам они приносят.





Что такое стрелочные функции JavaScript?

Стрелочные функции - это новый способ написания функциональных выражений, которые были включен в выпуск JavaScript ES6 . Они похожи на выражения функций JavaScript, которые вы использовали, с некоторыми немного другими правилами.

Стрелочные функции всегда анонимны, имеют разные правила для



this

, и имеют более простой синтаксис, чем традиционные функции.

как остановить блокировку всплывающих окон на хроме

Эти функции используют новый токен стрелки:



=>

Если вы когда-либо работали с Python, эти функции очень похожи на Лямбда-выражения Python .

Синтаксис этих функций немного чище, чем у обычных функций. Следует помнить о нескольких новых правилах:



  • Ключевое слово функции удалено
  • Ключевое слово return необязательно
  • Фигурные скобки необязательны

Есть много небольших изменений, которые нужно сделать, поэтому давайте начнем с базового сравнения функциональных выражений.

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

Стрелочные функции просты в использовании. Понимание стрелочных функций легче по сравнению с традиционными функциональными выражениями.

Вот выражение функции, которое складывает два числа; сначала используя традиционный метод функции:

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

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

Вот выражение, измененное на стрелочную функцию:

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

Синтаксис функции сильно отличается при использовании стрелочной функции. Ключевое слово функции удалено; маркер стрелки сообщает JavaScript, что вы пишете функцию.

Фигурные скобки и ключевое слово return остались. Они не являются обязательными со стрелочными функциями. Вот еще более простой пример той же функции:

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

Ключевое слово return и фигурные скобки исчезли. Осталась очень чистая однострочная функция, которая составляет почти половину кода, чем исходная функция. Вы получите тот же результат с гораздо меньшим количеством написанного кода.

Есть еще кое-что о стрелочных функциях. давайте погрузимся глубже, чтобы вы лучше почувствовали, на что они способны.

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

Функции стрелок имеют множество различных применений и функций.

Windows 10 служба профилей пользователей не смогла войти в систему

Обычные функции

Стрелочные функции могут использовать один или несколько аргументов. Если вы используете два или более аргумента, вы должны заключить их в круглые скобки. Если у вас только один аргумент, скобки использовать не нужно.

let square = x => x * x
square(2);
>>4

Стрелочные функции можно использовать без аргументов. Если вы не используете аргументы в своей функции, вы должны использовать пустые круглые скобки.

let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!

Такие простые функции используют гораздо меньше кода. Представляете, насколько проще сложный проект как слайд-шоу JavaScript становится, когда у вас есть более простой способ писать функции.

Используя это

Концепция чего-либо

this

обычно является самой сложной частью использования JavaScript. Стрелочные функции делают

this

проще в использовании.

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

this

будет определяться включающей функцией. Это может создать проблемы, возникающие при создании вложенных функций и необходимости

this

применить к вашей основной функции

Вот популярный пример, показывающий обходной путь, который нужно использовать с обычными функциями.

function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

Присвоение стоимости

this

в переменную делает его доступным для чтения, когда вы вызываете функцию внутри своей основной функции. Это беспорядочно, вот лучший способ сделать это с помощью стрелочных функций.

function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}

Хотя они отлично подходят для функций, их не следует использовать для создания методов внутри объекта. Стрелочные функции не используют правильную область видимости для

this

.

Вот простой объект, который создает внутри метод с помощью стрелочной функции. Метод должен уменьшить начинки переменная на единицу при вызове. Вместо этого он вообще не работает.

как поднять яркость на windows 10
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

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

Используя стрелочные функции, вы можете упростить код, используемый для работы с методами массива. Массивы и методы массива являются очень важной частью JavaScript так что вы будете их часто использовать.

Есть несколько полезных методов, например карта метод, который запускает функцию для всех элементов массива и возвращает новый массив.

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

Это довольно простая функция, которая добавляет единицу к каждому значению в массиве. Вы можете написать ту же функцию с меньшим количеством кода, используя стрелочную функцию.

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

Теперь читать стало намного проще.

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

Стрелочные функции можно использовать для создания объектных литералов в JavaScript. Обычные функции могут их создавать, но они немного длиннее.

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

Вы можете создать тот же объект с помощью стрелочной функции, используя меньше кода. Используя обозначения стрелок, вам нужно будет заключить тело функции в круглые скобки. Вот улучшенный синтаксис со стрелочными функциями.

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

Стрелочные функции JavaScript и не только

Теперь вы знаете, как функции стрелок JavaScript упрощают вашу жизнь как разработчика. Они сокращают синтаксис, дают вам больше контроля, используя

this

, упростят создание объектов и предоставят вам новый способ работы с методами массива.

Введение стрелочных функций, наряду со многими другими функциями, в JavaScript ES6 показывает, насколько важным стал JavaScript в веб-разработке. Однако вы можете сделать гораздо больше.

Хотите узнать больше о JavaScript? Изучите эти JavaScript-фреймворки. Плюс наш Памятка по JavaScript предоставляет ценную информацию и узнает больше о как работает JavaScript может сделать вас лучшим разработчиком.

Делиться Делиться Твитнуть Эл. адрес 6 звуковых альтернатив: лучшие бесплатные или дешевые аудиокниги

Если вы не хотите платить за аудиокниги, вот несколько отличных приложений, которые позволяют вам слушать их бесплатно и легально.

Читать далее Похожие темы
  • Программирование
  • JavaScript
Об авторе Энтони Грант(Опубликовано 40 статей)

Энтони Грант - внештатный писатель, освещающий программирование и программное обеспечение. Он специализируется в области компьютерных наук, занимается программированием, Excel, программным обеспечением и технологиями.

Ещё от Anthony Grant

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Нажмите здесь, чтобы подписаться