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

Реклама

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

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

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

Что такое JavaScript Arrow Функции?

Функции со стрелками - это новый способ записи выражений функций, которые были включен в выпуск JavaScript ES6 Что такое ES6 и что нужно знать программистам JavascriptES6 относится к версии 6 языка программирования ECMA Script (Javascript). Давайте теперь посмотрим на некоторые основные изменения, которые ES6 вносит в JavaScript. Подробнее . Они похожи на выражения функций JavaScript, которые вы использовали, с некоторыми немного другими правилами.

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

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

=>

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

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

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

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

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

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

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

 let addnum = function (num1, num2) {return num1 + num2; }; адднум (1,2); >>3

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

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

let addnum = (num1, num2) => {return num1 + num2;}; адднум (1,2); >>3

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

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

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

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

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

Особенности функции стрелки

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

Регулярные функции

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

пусть квадрат = х => х * х квадрат (2); >>4

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

let helloFunction = () => Console.log («Привет, читатель!»); helloFunction (); >> Привет, читатель!

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

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

Концепция чего-либо это как правило, самая сложная часть использования JavaScript. Функции стрелок делают это проще в использовании.

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

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

function Person () {var that = this; // Вы должны присвоить 'this' новой переменной that.age = 0; setInterval (function growUp () {that.age ++; }, 1000); }

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

function Person () {this.age = 0; setInterval (() => {this.age ++; // Теперь вы можете использовать 'this' без объявления новой переменной}, 1000); }

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

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

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

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

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

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

let myArray = [1,2,3,4]; myArray.map (function (element) { возвращаемый элемент + 1; }); >> [2,3,4,5]

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

let myArray = [1,2,3,4]; myArray.map (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 Arrow и не только

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

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

Хотите узнать больше о JavaScript? наш Шпаргалка JavaScript The Ultimate JavaScript ШпаргалкаПолучите быстрое обновление на элементах JavaScript с этим шпаргалкой. Подробнее предоставляет ценную информацию и узнать больше о как работает JavaScript Что такое JavaScript и как он работает?Если вы изучаете веб-разработку, вот что вам нужно знать о JavaScript и о том, как он работает с HTML и CSS. Подробнее может сделать вас лучшим разработчиком.