Вступление
Предположим, у вас есть файл длиной 82 строки, состоящий только из серии операторов. (Я надеюсь, что это не так, но все возможно.) Как бы вы поняли, что делает программа? Как бы вы изменили его или использовали? Было бы сложно что-либо сделать с этим кодом, потому что у него нет структуры.
Чтобы решить эту проблему, вы можете использовать функции. Функция — это группа операторов, которые выполняют определенную задачу. Функции позволяют нам разбивать программу на более мелкие программы, делая наш код более читабельным, многократно используемым и тестируемым.
содержание
- Пустые функции
- Функция возврата значения
- Сфера
- параметры
- Модули
Пустые функции
Этот вид функции перечисляет шаги, которые должна выполнить программа. Представьте, что мы пишем программу для входа пользователя на сайт. Программа может состоять из следующих задач:
- Получить имя пользователя
- Получить пароль
- Проверьте, существуют ли имя пользователя и пароль
- Перенаправить пользователя на его панель
Каждый из этих шагов может содержаться внутри функции входа в систему. Это пример функции:
|
1
2
3
|
function greet() {
console.log(«Hello, World»);
}
|
Это общая форма функции:
|
1
2
3
4
5
|
function functionName() {
statement;
statement;
etc.
}
|
Чтобы выполнить функцию (также называемую вызовом функции или вызовом функции), вы пишете оператор, который ее вызывает.
|
1
|
greet();
|
() — это место, где мы передаем ввод функции. Когда мы определяем функцию, ввод называется параметром. Когда мы вызываем функцию, ввод будет действительным значением и называется аргументом. Пример:
|
1
2
3
4
5
|
function greet(name) {
console.log(«Hello, » + name);
}
greet(«Alberta»);
|
С помощью JavaScript ES6 вы можете определять функции, используя синтаксис стрелки. Вот наша функция приветствия, определенная с использованием синтаксиса стрелки:
|
1
|
let greet = () => console.log(«Hello, World»);
|
Функция с одним параметром:
|
1
|
let greet = name => console.log(«Hello, » + name);
|
Функция с более чем одним параметром:
|
1
|
let greet = (fname, lname) => console.log(«Hello, » + fname + » » + name);
|
Функция с несколькими операторами:
|
1
2
3
4
|
let greet = (fname, lname) => {
let name = fname + » » + name;
console.log(«Hello, » + name);
}
|
Поскольку функция стрелки является анонимной функцией, мы присваиваем нашей функции имя, присваивая ее переменной. Функции со стрелками могут быть полезны, когда ваше тело функции имеет только один оператор.
Функция возврата значения
Этот вид функции возвращает значение. Функция должна заканчиваться оператором возврата. Этот пример возвращает сумму двух чисел.
|
1
2
3
|
function add(x, y) {
return x + y;
}
|
Это общая форма, определяющая функцию, возвращающую значение:
|
1
2
3
4
5
6
|
function functionName() {
statement;
statement;
etc.
return expression;
}
|
Значение выражения — это то, что выводится функцией. Такая функция полезна, когда она хранится в переменной.
|
1
|
let variableName = functionName();
|
Сфера
Область действия переменной — это часть программы, в которой можно получить доступ к переменной. Переменная может быть локальной или глобальной. Область действия локальной переменной находится внутри функции, в которой она была создана. Никакой код вне функции не может получить доступ к ее локальным переменным.
Кроме того, когда вы используете let или const для объявления переменной, они имеют область видимости блока. Блок — это набор операторов, которые объединены в группу. Блок может быть таким же простым, как завернуть наш код в фигурные скобки:
|
1
2
3
4
5
|
{
let a = 2;
}
|
Переменная a является локальной для блока, в котором она находится. Блок также может быть циклом или оператором if. Пример:
|
1
2
3
4
5
6
7
|
let a = 1;
if (5 >4){
let a = 2;
}
console.log(a);
|
Поскольку наш оператор консоли находится в той же области, что и наша первая переменная a , он отображает это значение, равное 1. Он не имеет доступа к переменным внутри блока if. Теперь рассмотрим этот пример:
|
1
2
3
4
5
6
|
let a = 1;
if (5 >4) {
let a = 2;
console.log(a);
}
|
Теперь 2 будет отображаться, потому что область переменных, к которой наш оператор консоли имеет доступ, находится внутри блока if. Параметры функции также являются локальными переменными и доступны только через код внутри функции. С другой стороны, к глобальным переменным могут обращаться все операторы в файле программы. Пример:
|
1
2
3
4
5
6
7
8
9
|
let a = 1;
function foo () {
a = 2;
}
console.log(a);
foo();
console.log(a);
|
В этом примере a является глобальной переменной, и у нас есть доступ к ней внутри функции foo. Первый оператор консоли будет отображать 1. После вызова foo значение a устанавливается равным 2, в результате чего второй оператор консоли отображает 2.
Глобальные переменные должны использоваться очень мало, в идеале вообще не должны. Поскольку к глобальным переменным может обращаться любая часть программы, они рискуют быть изменены непредсказуемым образом. В большой программе с тысячами строк кода это усложняет понимание программы, потому что вы не можете легко увидеть, как используется переменная. Лучше создавать и использовать локальные переменные.
Однако, если вам нужно использовать переменную в нескольких местах в вашей программе, можно использовать глобальную константу. Объявление переменной с ключевым словом const предотвращает ее изменение, делая ее более безопасной для использования. Вам нужно только позаботиться об обновлении значения константы в том месте, где она была объявлена.
параметры
Напомним, что параметр — это переменная, которую функция использует для приема данных. Параметру присваивается значение аргументов функции при вызове функции. Начиная с ES6, параметрам также могут быть заданы значения по умолчанию в формате имя_параметра parameterName=value . В этом случае вы можете вызвать функцию без аргументов, и она будет использовать значения по умолчанию. Пример:
|
1
2
3
4
5
|
function greet (name=»world») {
console.log(«Hello, » + name);
}
greet();
|
Оператор распространения / отдыха является новым для ES6 и может использоваться для расширения массива или объекта в отдельные значения или для сбора параметров функции в массив. Это пример использования параметра rest:
|
1
2
3
4
5
|
function foo(…args) {
console.log(args);
}
foo( 1, 2, 3, 4, 5);
|
Модули
Предположим, теперь у вас есть файл, который имеет 1082 строки. (Я видел это, и вам следует запустить, если вы столкнетесь с такой вещью.) Файл организован в функции, но трудно понять, как они связаны друг с другом.
Чтобы сгруппировать связанное поведение, мы должны поместить наш код в модули. Модуль в ES6 — это файл, который содержит связанные функции и переменные. Модули позволяют нам скрывать частные свойства и выставлять открытые свойства, которые мы хотим использовать в других файлах. Имя файла будет именем модуля. Модули также имеют свою область применения. Чтобы использовать переменные вне области видимости модуля, они должны быть экспортированы. Переменные, которые не экспортируются, будут закрытыми и доступны только в модуле.
Отдельные свойства можно экспортировать так:
|
1
2
3
4
5
6
7
|
export function foo() {
console.log(“Hello World”);
}
export let bar = 82;
export let baz = [1,2,3];
|
Кроме того, все свойства могут быть экспортированы с одним оператором экспорта:
|
1
2
3
4
5
6
7
8
9
|
function foo() {
console.log(«Hello World»);
}
let bar = 82;
let baz = [1,2,3];
export { foo, bar, baz };
|
Чтобы использовать переменные модуля, вы импортируете его в файл. Вы можете указать, что вы хотите импортировать из модуля следующим образом:
|
1
|
import { foo, bar, baz } from «foo»;
|
Вы также можете переименовать ваш импорт:
|
1
2
3
|
import { foo as Foo } from «foo»;
Foo();
|
Или вы можете импортировать все свойства модуля:
|
1
2
3
|
import * as myModule from «foo»;
myModule.foo();
|
Рассмотрение
Функции позволяют нам разделить наши программы на более мелкие программы, которыми мы можем легко управлять. Эта практика известна как модульность. Существует два вида функций: пустые функции и функции возврата значений. Функция void выполняет внутри нее операторы. Функция, возвращающая значение, возвращает нам значение.
Область действия — это часть программы, в которой можно получить доступ к переменной. Переменные, объявленные внутри функции, включая параметры функции, являются локальными. Блоки также имеют область видимости, и внутри них могут быть созданы локальные переменные.
Переменные, не заключенные в блок или модуль, будут глобальными. Если вам нужна глобальная переменная, допустимо иметь глобальную константу. В противном случае попробуйте включить ваш код в модули, потому что модули имеют свою собственную область. Но что еще лучше, модули дают структуру и организацию вашего кода.