You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Существует ещё более простой и краткий синтаксис для создания функций, который часто лучше, чем синтаксис Function Expression.
3
+
Существует ещё один очень простой и лаконичный синтаксис для создания функций, который часто лучше, чем Function Expression.
4
4
5
5
Он называется "функции-стрелки" или "стрелочные функции" (arrow functions), т.к. выглядит следующим образом:
6
6
7
7
```js
8
8
letfunc= (arg1, arg2, ...argN) => expression;
9
9
```
10
10
11
-
...Такой код создаёт функцию `func` с аргументами `arg1..argN` и вычисляет `expression`с правой стороны с их использованием, возвращая результат.
11
+
Это создаёт функцию `func`, которая принимает аргументы `arg1..argN`, затем вычисляет `expression`в правой части с их использованием и возвращает результат.
12
12
13
-
Другими словами, это более короткий вариант такой записи:
13
+
Другими словами, это сокращённая версия:
14
14
15
15
```js
16
16
letfunc=function(arg1, arg2, ...argN) {
17
17
return expression;
18
18
};
19
19
```
20
20
21
-
Давайте взглянем на конкретный пример:
21
+
Давайте рассмотрим конкретный пример:
22
22
23
23
```js run
24
24
letsum= (a, b) => a + b;
25
25
26
-
/*Более короткая форма для:
26
+
/*Эта стрелочная функция представляет собой более короткую форму:
27
27
28
28
let sum = function(a, b) {
29
29
return a + b;
@@ -34,29 +34,28 @@ alert( sum(1, 2) ); // 3
34
34
35
35
```
36
36
37
-
То есть, `(a, b) => a + b` задаёт функцию с двумя аргументами `a` и `b`, которая при запуске вычисляет выражение справа `a + b` и возвращает его результат.
37
+
Как вы можете видеть, `(a, b) => a + b` задаёт функцию, которая принимает два аргумента с именами `a` и `b`. И при выполнении она вычисляет выражение `a + b` и возвращает результат.
38
38
39
39
- Если у нас только один аргумент, то круглые скобки вокруг параметров можно опустить, сделав запись ещё короче:
40
40
41
41
```js run
42
-
// тоже что и
43
-
// let double = function(n) { return n * 2 }
44
42
*!*
45
43
letdouble=n=> n *2;
44
+
// примерно тоже что и: let double = function(n) { return n * 2 }
46
45
*/!*
47
46
48
47
alert( double(3) ); // 6
49
48
```
50
49
51
-
- Если нет аргументов, указываются пустые круглые скобки:
50
+
- Если аргументов нет, круглые скобки будут пустыми (но они должны присутствовать):
52
51
53
52
```js run
54
53
let sayHi = () => alert("Hello!");
55
54
56
55
sayHi();
57
56
```
58
57
59
-
Функции-стрелки могут быть использованы так же, как и Function Expression.
58
+
Стрелочные функции можно использовать так же, как и Function Expression.
60
59
61
60
Например, для динамического создания функции:
62
61
@@ -67,43 +66,45 @@ let welcome = (age < 18) ?
67
66
() => alert('Привет') :
68
67
() => alert("Здравствуйте!");
69
68
70
-
welcome(); // теперь всё в порядке
69
+
welcome();
71
70
```
72
71
73
-
Поначалу функции-стрелки могут показаться необычными и трудночитаемыми, но это быстро пройдёт, как только глаза привыкнут к этим конструкциям.
72
+
Поначалу стрелочные функции могут показаться необычными и даже трудночитаемыми, но это быстро пройдёт по мере того, как глаза привыкнут к этим конструкциям.
74
73
75
-
Они очень удобны для простых однострочных действий, когда лень писать много букв.
74
+
Они очень удобны для простых однострочных действий, когда нам просто лень писать много слов.
76
75
77
76
## Многострочные стрелочные функции
78
77
79
-
В примерах выше аргументы использовались слева от `=>`, а справа вычислялось выражение с их значениями.
78
+
В приведённых выше примерах аргументы брались слева от `=>`, а затем справа вычислялось выражение с их значениями.
80
79
81
-
Порой нам нужно что-то посложнее, например, выполнить несколько инструкций. Это также возможно, нужно лишь заключить инструкции в фигурные скобки. И использовать `return` внутри них, как в обычной функции.
80
+
Иногда нам нужно что-то немного более сложное, например, несколько выражений или инструкций. Это также возможно, нужно лишь заключить их в фигурные скобки. Затем используйте обычный `return` внутри них.
82
81
83
-
Например:
82
+
Вроде этого:
84
83
85
84
```js run
86
85
let sum = (a, b) => { // фигурная скобка, открывающая тело многострочной функции
87
86
let result = a + b;
88
87
*!*
89
-
return result; // при фигурных скобках для возврата значения нужно явно вызвать return
88
+
return result; // если мы используем фигурные скобки, то нам нужно явно указать "return"
90
89
*/!*
91
90
};
92
91
93
92
alert( sum(1, 2) ); // 3
94
93
```
95
94
96
-
```smart header="Дальше будет ещё информация"
97
-
Здесь мы рассмотрели функции-стрелки как способ писать меньше букв. Но это далеко не всё!
95
+
```smart header="Дальше - больше"
96
+
Здесь мы представили главной целью стрелочных функций краткость. Но это ещё не всё!
98
97
99
-
Стрелочные функции обладают другими интересными особенностями. Их изучение требует знания некоторых других возможностей языка JavaScript, поэтому мы вернёмся к стрелочным функциям позже, в главе <info:arrow-functions>.
98
+
Стрелочные функции обладают и другими интересными возможностями.
99
+
100
+
Чтобы изучить их более подробно, нам сначала нужно познакомиться с некоторыми другими аспектами JavaScript, поэтому мы вернёмся к стрелочным функциям позже, в главе <info:arrow-functions>.
100
101
101
102
А пока мы можем использовать их для простых однострочных действий и колбэков.
102
103
```
103
104
104
105
## Итого
105
106
106
-
Функции-стрелки очень удобны для однострочных действий. Они бывают двух типов:
107
+
Стрелочные функции очень удобны для однострочных действий. Они бывают двух типов:
107
108
108
-
1. Без фигурных скобок:`(...args) => expression`-- правая сторона выражение: функция выполняет его и возвращает результат.
109
-
2. С фигурными скобками:`(...args) => { body }`-- скобки позволяют нам писать многострочные инструкции внутри функции, но при этом необходимо указывать директиву `return`, чтобы вернуть какое-либо значение.
109
+
1. Без фигурных скобок:`(...args) => expression`-- правая сторона выражение: функция вычисляет его и возвращает результат.
110
+
2. С фигурными скобками:`(...args) => { body }`-- скобки позволяют нам писать многострочные инструкции внутри функции, но при этом необходимо явно указывать директиву `return`, чтобы вернуть какое-либо значение.
0 commit comments