Узнайте, как писать и использовать анонимные функции в ваших приложениях JavaScript.
Независимо от того, пишете ли вы веб-приложение для взаимодействия со своим смарт-контрактом Etherum или REST API на основе NodeJS, вам необходимо знать JavaScript — один из основных языков программирования, лежащих в основе Интернета.
В этой статье я хочу поговорить об анонимных функциях, с которыми вы будете очень часто сталкиваться при написании кода JavaScript. Надеюсь, к концу статьи вы будете хорошо понимать, как работают анонимные функции и как использовать их в своем приложении.
Функции в JavaScript
Давайте начнем обсуждение того, как функция определяется в JavaScript. В следующем фрагменте кода показана функция, определенная в JavaScript — displayAlert():
<!-- TestJavaScript.html -->
<html>
<script>
function displayAlert(message) {
alert(message)
}
// calls the displayAlert() function
displayAlert("Hello, JavaScript!")
</script>
</html>
Эта функция отображает предупреждение в окне. Чтобы вызвать функцию, вы просто вызываете функцию по ее имени и передаете ей аргумент:
// calls the displayAlert() function
displayAlert("Hello, JavaScript!")
Теперь будет отображаться предупреждение, содержащее сообщение:
Давайте теперь перепишем функцию displayAlert() как анонимную функцию:
<html>
<script>
f = function(message) {
alert(message)
}
f("Hello, JavaScript!")
</script>
</html>
Здесь имя функции удалено, и у вас остается следующее, которое является анонимной функцией (функция без имени):
function(message) {
alert(message)
}
Затем он присваивается переменной с именем f. Чтобы вызвать эту анонимную функцию, просто обработайте переменную f как функцию:
f("Hello, JavaScript!")
Если вы хотите просто вызвать анонимную функцию сразу после ее объявления, вы можете использовать этот синтаксис:
(function(message) {
alert(message)
})("Hello, world!")
Вы должны увидеть предупреждение при загрузке HTML-страницы:
Использование анонимных функций
Теперь, когда вы увидели, как выглядит анонимная функция, пришло время посмотреть, как анонимные функции могут быть полезны в ваших приложениях.
Хорошее использование анонимной функции — это передача функции в другую функцию. Например, функция setTimeout() в JavaScript позволяет вам выполнить функцию по истечении указанного времени (в миллисекундах). В следующем примере через пять секунд будет выполнена анонимная функция, переданная в функцию setTimeout():
<html>
<script>
setTimeout(function() {
alert("Time's up!")
}, 5000)
</script>
</html>
Вы увидите предупреждение, отображаемое через 5 секунд:
Еще одним хорошим примером использования анонимной функции является функция filter() для массивов. Скажем, у вас есть массив целочисленных значений:
let nums = [4,5,3,7,1,2,8,9]
Если вы хотите извлечь все четные числа из этого массива, вы можете вызвать метод filter(), передав ему анонимную функцию:
let evens = nums.filter(function(val) {
return val % 2 == 0
})
Тело анонимной функции указывает условие, в котором должен быть результат — в этом случае вы хотите, чтобы каждое значение в массиве делилось на 2. Другими словами, вы хотите, чтобы все четные числа из массива. Затем функция filter() возвращает результат в виде массива, который вы можете распечатать:
alert(evens) // 4,2,8
Если вам нужны все нечетные числа в массиве, измените условие внутри анонимной функции соответствующим образом:
let evens = nums.filter(function(val) {
return val % 2 == 1
})
Реализация функции, использующей анонимные функции
В предыдущем разделе вы видели, как можно передать анонимную функцию в метод filter(). Как насчет написания собственной функции, которая принимает анонимную функцию?
Предположим, вы хотите написать свою собственную функцию фильтра, скажем, myfilter(). Первый шаг — создать анонимную функцию, например:
filterFunction = function(f) {
result = []
for (let i = 0; i <= this.length; i++) {
if (f(this[i])) {
result.push(this[i])
}
}
return result
}
Приведенный выше фрагмент кода:
- создает анонимную функцию и присваивает ее переменной с именем
filterFunction - создает анонимную функцию, которая принимает один аргумент —
f, который является еще одной анонимной функцией - использует ключевое слово
thisдля привязки к объекту, которому назначена эта анонимная функция. Например, если эта анонимная функция назначена массиву, тоthisбудет ссылаться на массив - вызывает анонимную функцию
fдля каждого элемента в массиве, и если анонимная функция оценивается какtrue, элемент добавляется в массивresult - возвращает массив
resultв конце функции
Чтобы прикрепить вышеуказанную анонимную функцию к массиву, укажите имя нового метода, который вы хотите создать, а затем назначьте ему анонимную функцию:
let nums = [4,5,3,7,1,2,8,9]
nums.myfilter = filterFunction
В приведенном выше примере myfilter() — это недавно добавленный метод. Теперь вы можете использовать метод myfilter() следующим образом:
let evens = nums.myfilter(function(val) {
return val % 2 == 0
})
alert(evens) // 4,2,8
Стрелочные функции
В ES6 вы можете использовать сокращение для объявления анонимных функций. Это сокращение известно как функция стрелки. Рассмотрим пример, который вы видели ранее:
displayAlert = function(message) {
alert(message)
}
displayAlert("Hello, JavaScript!")
Используя функцию стрелки, теперь вы можете удалить ключевое слово function и добавить жирную стрелку operator=>:
displayAlert = (message) =>
alert(message)
displayAlert("Hello, JavaScript!")
Обратите внимание, что пара {} также может быть удалена, если ваша анонимная функция имеет только один оператор/выражение. Вы можете иметь {}, если у вас есть несколько операторов/выражений в вашей функции (или даже один оператор/выражение):
displayAlert = (message) => {
alert(message)
}
Рассмотрим другой пример, который вы видели ранее:
let evens = nums.filter(function(val) {
return val % 2 == 0
})
alert(evens)
Вы можете переписать анонимную функцию, используя функцию стрелки:
let evens = nums.filter( (val) =>
val % 2 == 0
)
alert(evens)
Обратите внимание на следующее:
- если нет
{}, заключающего тело анонимной функции, ключевое словоreturnнельзя использовать (значение выражения возвращается неявно). - если вы используете
{}для включения тела анонимной функции, то ключевое словоreturnявляется обязательным, если вы хотите вернуть значение выражения, например:
let evens = nums.filter( (val) => {
return val % 2 == 0
})
Для анонимных функций с несколькими операторами/выражениями ключевое слово return является обязательным для возврата значения выражения.
let evens = nums.filter( (val) => {
console.log(val)
return val % 2 == 0
})
Краткое содержание
В этой короткой статье представлен краткий обзор анонимных функций в JavaScript. Надеюсь, это послужит кратким справочником, когда вы в следующий раз начнете программировать на JavaScript!
