Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Изучите компьютерную науку с JavaScript: часть 4, функции

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Learn Computer Science with JavaScript.
Learn Computer Science With JavaScript: Part 2, Conditionals
Learn Computer Science With JavaScript: Part 3, Loops

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Введение

Предположим, у вас есть файл длиной 82 строки и состоит только из ряда операторов. (Надеюсь, это неправда, но все возможно.) Как вы поймете, что делает программа? Как бы вы изменили его или использовали? Было бы сложно сделать что-либо с этим кодом, потому что для него нет никакой структуры.

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

Содержание

  • Void функции
  • Функция возвращающие значения
  • Область
  • Параметры
  • Модули

Void функции

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

  • Получить имя пользователя
  • Получить пароль
  • Проверить, существуют ли имя пользователя и пароль
  • Перенаправить пользователя на свою панель

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

Это общий вид функции:

Для выполнения функции (также называемой вызовом функции или вызова функции) вы пишете оператор, который ее вызывает.

() - это то, где мы передаем ввод функции. Когда мы определяем функцию, вход называется параметром. Когда мы вызываем функцию, вход будет фактическим значением и называется аргументом. Пример:

С помощью JavaScript ES6 вы можете определять функции с помощью синтаксиса стрелок. Вот наша функция greet, определяемая с помощью синтаксиса стрелок:

Функция с одним параметром:

Функция с несколькими параметрами:

Функция с несколькими операторами:

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

Функции, возвращающие значение

Эта функция возвращает значение. Функция должна заканчиваться оператором return. В этом примере возвращается сумма двух чисел.

Это общая форма, определяющая возвращающую значение значение:

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

Область видимости

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

Кроме того, когда вы используете let или const для объявления переменной, у них есть область блока. Блок представляет собой набор операторов, которые принадлежат вместе как группа. Блок может быть таким же простым, как обертывание нашего кода в фигурные скобки:

Переменная a является локальной для блока, в котором она находится. Блок также может быть циклом или оператором if. Пример:

Поскольку наш консольный оператор находится в той же области, что и наша первая переменная a, она отображает это значение, которое равно 1. Оно не имеет доступа к переменным внутри блока if. Теперь рассмотрим этот пример:

Теперь будет отображаться 2, потому что область переменных, к которой имеет доступ наш консольный оператор, находится внутри блока if. Параметры функции также являются локальными переменными и могут быть доступны только кодом внутри функции. С другой стороны, глобальные переменные могут быть доступны всеми операторами в файле программы. Пример:

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

Глобальные переменные следует использовать очень редко, в идеале - никогда. Поскольку глобальные переменные могут быть доступны любой частью программы, они рискуют быть изменены непредсказуемыми способами. В большой программе с тысячами строк кода это затрудняет понимание программы, потому что вы не можете легко увидеть, как используется переменная. Лучше создавать и использовать локальные переменные.

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

Параметры

Напомним, что параметр - это переменная, которую функция использует для приема данных. Параметру присваивается значение аргументов функции при вызове функции. Начиная с ES6, параметрам также могут быть присвоены значения по умолчанию с параметром formatName=value. В этом случае вы можете вызывать функцию без аргументов, и она будет использовать значения по умолчанию. Пример:

Оператор spread/rest является новым для ES6 и может использоваться для расширения массива или объекта в отдельных значениях или для сбора параметров функции в массиве. Это пример использования параметра rest:

Модули

Предположим, теперь у вас есть файл с 1,082 строками. (Я видел такое, и вы должны бежать, если вы столкнулись с такой штукой.) Файл организован в функции, но трудно понять, как они соотносятся друг с другом.

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

Отдельные свойства можно экспортировать следующим образом:

Кроме того, все свойства могут экспортироваться с одним экспортным заявлением:

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

Вы также можете переименовать свой импорт:

Или вы можете импортировать все свойства модуля:

Обзор

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

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

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

Ресурсы

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.