Функции стрелок в JavaScript объясняются при спуске по слайду

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

Если вы используете JavaScript в течение нескольких лет, вы, вероятно, знакомы с этим синтаксисом:

function addTen(num){
  return num + 10;
});

console.log(addTen(2));
//12

Этот синтаксис функции был популярен в ES5 или ECMAScript 5.

У этого синтаксиса есть одно большое преимущество: он включает слово «функция», так что очевидно, что вы пишете функцию!

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

Но затем мир JavaScript сделал скачок вперед с ES6 в 2015 году.

Теперь та же функция, что и выше, будет записана так:

let addTen = (num) => num + 10;

console.log(addTen(2));
//12

Теперь нет функция ключевое слово и нет оператора возврата! Функций в ES6 гораздо больше краткий или лаконичный.

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

К счастью, как вы скоро увидите на нескольких анимациях, функции стрелок довольно легко понять, если вы научитесь визуализировать стрелку «=>» по-новому.

Итак, вот как функции стрелок похожи на водную горку. Чтобы полностью понять это руководство, полезно знать о функции карты а также определение объема.

Визуализация стрелочных функций

Давайте более подробно изучим функцию addTen.

let addTen = (num) => num + 10;

console.log(addTen(2));
//12

Эта функция преобразует один параметр и выводит этот параметр с добавлением 10.

Преобразование происходит с помощью тонкой стрелки «=>».

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

Знак равенства подобен слайду трубы, а стрелка — посадочной площадке.

Стрелочные функции следуют этому шаблону:

(параметры) => {операторы}

Итак, давайте добавим их на диаграмму с помощью нашего примера функции addTen.

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

Вот и все! Довольно просто.

Теперь давайте рассмотрим пример с двумя разными параметрами. Вот наша новая функция:

let multiply = (num1, num2) => {return num1 * num2};

console.log(multiply(2, 10));
//20

В этом случае мы просто перемножаем два параметра вместе. Оба будут спускаться с горки вместе. Как это:

Есть еще один пример, о котором вам следует знать — сочетание метода map() со стрелочными функциями.

Метод map() отправит каждый элемент массива в стрелочную функцию по порядку.

Давайте рассмотрим пример: представьте, что у вас есть массив чисел, и вы хотите получить квадратный корень из каждого из них.

Вот код.

let nums = [1, 4, 9];

let squares = nums.map((num) => {
  return Math.sqrt(num);
});

console.log (squares)
// [1, 2, 3]

Вам нужно немного знать о методе карты, чтобы понять его. Но вы, вероятно, снова заметите лаконичный синтаксис — метод map() намного короче написания цикла for().

Вот что происходит в этом коде:

  1. Есть три элемента в числа массив, поэтому число параметр опускается по слайду 3 раза.
  2. Метод Math.sqrt() каждый раз извлекает квадратный корень из числа.
  3. Результат сохраняется в квадраты массив каждый раз.

Разница между стрелочными функциями и традиционными функциями

Вам может быть интересно… это просто разница в синтаксисе?

На самом деле, есть один важный способ, которым традиционные функции ES5 и функции ES6 работают по-разному.

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

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

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

Заинтересованы в дополнительных визуальных уроках?

Если вы хотите прочитать больше наглядных руководств по HTML, CSS и JavaScript, ознакомьтесь с основной сайт CodeAnalogies для 50+ учебников.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *