add js-base, functions
This commit is contained in:
13
docs/javascript/base/01-strict.md
Normal file
13
docs/javascript/base/01-strict.md
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
# Строгий режим — "use strict"
|
||||||
|
|
||||||
|
Появился с 2009 года в редакции ECMAScript 5 (ES5).
|
||||||
|
Чтобы устаревший код работал, как и раньше, по умолчанию подобные изменения не применяются. Поэтому нам нужно явно их активировать с помощью специальной директивы: "use strict".
|
||||||
|
|
||||||
|
Нет никакого способа отменить use strict
|
||||||
|
Use strict по умолчанию выключен в консоли браузера
|
||||||
|
|
||||||
|
Современный JavaScript поддерживает «классы» и «модули» — продвинутые структуры языка (и мы, конечно, до них доберёмся), которые автоматически включают строгий режим.
|
||||||
49
docs/javascript/base/02-variables.md
Normal file
49
docs/javascript/base/02-variables.md
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
---
|
||||||
|
|
||||||
|
# Переменные
|
||||||
|
|
||||||
|
**Переменная** – это «именованное хранилище» для данных.
|
||||||
|
|
||||||
|
Можно объявить при помощи:
|
||||||
|
|
||||||
|
- let
|
||||||
|
- const (константа, т.е. изменению не подлежит)
|
||||||
|
- var (устаревший способ, подробности позже)
|
||||||
|
|
||||||
|
```
|
||||||
|
let message;
|
||||||
|
|
||||||
|
message = 'Hello'; // сохранить строку 'Hello' в переменной с именем message
|
||||||
|
|
||||||
|
let user = 'John', age = 25, message = 'Hello';
|
||||||
|
|
||||||
|
let user = 'John',
|
||||||
|
age = 25,
|
||||||
|
message = 'Hello';
|
||||||
|
```
|
||||||
|
|
||||||
|
Имя переменной может включать:
|
||||||
|
- Буквы и цифры, однако цифра не может быть первым символом.
|
||||||
|
- Символы $ и _ используются наряду с буквами.
|
||||||
|
- Иероглифы и символы нелатинского алфавита также допустимы, но обычно не используются.
|
||||||
|
|
||||||
|
Переменные типизируются динамически. В них могут храниться любые значения.
|
||||||
|
|
||||||
|
Всего существует 8 типов данных:
|
||||||
|
|
||||||
|
- number для целых и вещественных чисел,
|
||||||
|
- bigint для работы с целыми числами произвольной длины,
|
||||||
|
- string для строк,
|
||||||
|
- boolean для логических значений истинности или ложности: true/false,
|
||||||
|
- null – тип с единственным значением null, т.е. «пустое значение» или «значение не существует»,
|
||||||
|
- undefined – тип с единственным значением undefined, т.е. «значение не задано»,
|
||||||
|
- object и symbol – сложные структуры данных и уникальные идентификаторы; их мы ещё не изучили.
|
||||||
|
|
||||||
|
Оператор typeof возвращает тип значения переменной, с двумя исключениями:
|
||||||
|
|
||||||
|
```
|
||||||
|
typeof null == "object" // ошибка в языке
|
||||||
|
typeof function(){} == "function" // именно для функций
|
||||||
|
```
|
||||||
49
docs/javascript/base/03-type-conversion.md
Normal file
49
docs/javascript/base/03-type-conversion.md
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 3
|
||||||
|
---
|
||||||
|
|
||||||
|
# Преобразование типов
|
||||||
|
|
||||||
|
## Строковое преобразование
|
||||||
|
**String(value)**
|
||||||
|
```
|
||||||
|
alert(typeof value); // string
|
||||||
|
```
|
||||||
|
|
||||||
|
## Численное преобразование
|
||||||
|
**Number(str)**
|
||||||
|
```
|
||||||
|
let num = Number(str); // становится числом 123
|
||||||
|
```
|
||||||
|
| Значение | Преобразуется в… |
|
||||||
|
|-------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||||
|
| undefined | NaN |
|
||||||
|
| null | 0 |
|
||||||
|
| true / false | 1 / 0 |
|
||||||
|
| string | Пробельные символы (пробелы, знаки табуляции \t, знаки новой строки \n и т. п.) по краям обрезаются. Далее, если остаётся пустая строка, то получаем 0, иначе из непустой строки «считывается» число. При ошибке результат NaN. |
|
||||||
|
|
||||||
|
```
|
||||||
|
alert( Number(" 123 ") ); // 123
|
||||||
|
alert( Number("123z") ); // NaN (ошибка чтения числа на месте символа "z")
|
||||||
|
alert( Number(true) ); // 1
|
||||||
|
alert( Number(false) ); // 0
|
||||||
|
```
|
||||||
|
## Логическое преобразование
|
||||||
|
**Boolean(value)**\
|
||||||
|
Происходит в логических операциях, но также может быть выполнено явно с помощью функции Boolean(value).
|
||||||
|
|
||||||
|
Правило преобразования:
|
||||||
|
- Значения, которые интуитивно «пустые», вроде 0, пустой строки, null, undefined и NaN, становятся false.
|
||||||
|
- Все остальные значения становятся true.
|
||||||
|
|
||||||
|
| Значение | Становится… |
|
||||||
|
|-----------------------------|-------------|
|
||||||
|
| 0, null, undefined, NaN, "" | false |
|
||||||
|
| любое другое значение | true |
|
||||||
|
|
||||||
|
```
|
||||||
|
alert( Boolean(1) ); // true
|
||||||
|
alert( Boolean(0) ); // false
|
||||||
|
alert( Boolean("Привет!") ); // true
|
||||||
|
alert( Boolean("") ); // false
|
||||||
|
```
|
||||||
39
docs/javascript/base/04-operators.md
Normal file
39
docs/javascript/base/04-operators.md
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 4
|
||||||
|
---
|
||||||
|
|
||||||
|
# Базовые операторы, математика
|
||||||
|
|
||||||
|
Термины: «унарный», «бинарный», «операнд»
|
||||||
|
- Операнд – то, к чему применяется оператор. Например, в умножении 5 * 2 есть два операнда: левый операнд равен 5, а правый операнд равен 2. Иногда их называют «аргументами» вместо «операндов». (5 * 2)
|
||||||
|
- Унарным называется оператор, который применяется к одному операнду. Например, оператор унарный минус "-" меняет знак числа на противоположный: (-x)
|
||||||
|
- Бинарным называется оператор, который применяется к двум операндам. Тот же минус существует и в бинарной форме: (y - x)
|
||||||
|
|
||||||
|
## Поддерживаются следующие математические операторы:
|
||||||
|
- Сложение +,
|
||||||
|
- Вычитание -,
|
||||||
|
- Умножение *,
|
||||||
|
- Деление /,
|
||||||
|
- Взятие остатка от деления %,
|
||||||
|
- Возведение в степень **.
|
||||||
|
|
||||||
|
## Инкремент/декремент
|
||||||
|
- Инкремент counter++ увеличивает переменную на 1
|
||||||
|
- Декремент counter-- уменьшает переменную на 1
|
||||||
|
|
||||||
|
## Побитовые операторы
|
||||||
|
- AND(и) ( & )
|
||||||
|
- OR(или) ( | )
|
||||||
|
- XOR(побитовое исключающее или) ( ^ )
|
||||||
|
- NOT(не) ( ~ )
|
||||||
|
- LEFT SHIFT(левый сдвиг) ( ≺≺ )
|
||||||
|
- RIGHT SHIFT(правый сдвиг) ( ≻≻ )
|
||||||
|
- ZERO-FILL RIGHT SHIFT(правый сдвиг с заполнением нулями) ( ≻≻≻ )
|
||||||
|
|
||||||
|
## Оператор «запятая»
|
||||||
|
Оператор «запятая» предоставляет нам возможность вычислять несколько выражений, разделяя их запятой ,. Каждое выражение выполняется, но возвращается результат только последнего.
|
||||||
|
```
|
||||||
|
let a = (1 + 2, 3 + 4); \
|
||||||
|
alert( a ); // 7 (результат вычисления 3 + 4) \
|
||||||
|
```
|
||||||
|
❗ ***Запятая имеет очень низкий приоритет***
|
||||||
43
docs/javascript/base/05-compare-ops.md
Normal file
43
docs/javascript/base/05-compare-ops.md
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 5
|
||||||
|
---
|
||||||
|
|
||||||
|
# Операторы сравнения
|
||||||
|
***Результат сравнения имеет логический тип***
|
||||||
|
- Больше/меньше: a \> b, a \< b.
|
||||||
|
- Больше/меньше или равно: a \>= b, a \<= b.
|
||||||
|
- Равно: a == b. Обратите внимание, для сравнения используется двойной знак равенства ==. Один знак равенства a = b означал бы присваивание.
|
||||||
|
- Не равно. В математике обозначается символом ≠, но в JavaScript записывается как a != b.
|
||||||
|
|
||||||
|
## Сравнение строк
|
||||||
|
Чтобы определить, что одна строка больше другой, JavaScript использует «алфавитный» или «лексикографический» порядок.\
|
||||||
|
Другими словами, строки сравниваются посимвольно.
|
||||||
|
|
||||||
|
❗ ***Используется кодировка Unicode, а не настоящий алфавит***
|
||||||
|
|
||||||
|
Алгоритм сравнения двух строк довольно прост:
|
||||||
|
- Сначала сравниваются первые символы строк.
|
||||||
|
- Если первый символ первой строки больше (меньше), чем первый символ второй, то первая строка больше (меньше) второй. Сравнение завершено.
|
||||||
|
- Если первые символы равны, то таким же образом сравниваются уже вторые символы строк.
|
||||||
|
- Сравнение продолжается, пока не закончится одна из строк.
|
||||||
|
- Если обе строки заканчиваются одновременно, то они равны. Иначе, большей считается более длинная строка.
|
||||||
|
|
||||||
|
## Сравнение разных типов
|
||||||
|
Использование обычного сравнения **==** может вызывать проблемы.
|
||||||
|
Это происходит из-за того, что операнды разных типов преобразуются оператором **==** к числу. В итоге, и пустая строка, и false становятся нулём.
|
||||||
|
|
||||||
|
**Оператор строгого равенства === проверяет равенство без приведения типов.**
|
||||||
|
|
||||||
|
## Сравнение с null и undefined
|
||||||
|
|
||||||
|
Поведение **null** и **undefined** при сравнении с другими значениями — особое:
|
||||||
|
|
||||||
|
При строгом равенстве **===** \
|
||||||
|
Эти значения различны, так как различны их типы.
|
||||||
|
|
||||||
|
При нестрогом равенстве **==** \
|
||||||
|
Эти значения равны друг другу и не равны никаким другим значениям. Это специальное правило языка.
|
||||||
|
|
||||||
|
При использовании математических операторов и других операторов сравнения \< \> \<= \>=
|
||||||
|
Значения null/undefined преобразуются к числам: **null** становится 0, а **undefined** – NaN.
|
||||||
|
|
||||||
177
docs/javascript/base/06-conditions-logic.md
Normal file
177
docs/javascript/base/06-conditions-logic.md
Normal file
@@ -0,0 +1,177 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 6
|
||||||
|
---
|
||||||
|
|
||||||
|
# Условия и логические операторы
|
||||||
|
|
||||||
|
## Условное ветвление: if, '?'
|
||||||
|
|
||||||
|
Инструкция if(...) вычисляет условие в скобках и, если результат true, то выполняет блок кода.
|
||||||
|
|
||||||
|
***Несколько условий: «else if»***
|
||||||
|
|
||||||
|
## Конструкция "switch"
|
||||||
|
```
|
||||||
|
let a = 2 + 2;
|
||||||
|
|
||||||
|
switch (a) {
|
||||||
|
case 3:
|
||||||
|
alert( 'Маловато' );
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
alert( 'В точку!' );
|
||||||
|
break;
|
||||||
|
case 5:
|
||||||
|
alert( 'Перебор' );
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
alert( "Нет таких значений" );
|
||||||
|
}
|
||||||
|
```
|
||||||
|
## Условный оператор „?“ (тернарный)
|
||||||
|
```
|
||||||
|
let result = условие ? значение1 : значение2;
|
||||||
|
```
|
||||||
|
## Логические операторы
|
||||||
|
|
||||||
|
В JavaScript есть семь логических операторов:
|
||||||
|
|
||||||
|
- || (ИЛИ)
|
||||||
|
- ||= (Оператор логического присваивания ИЛИ)
|
||||||
|
- && (И)
|
||||||
|
- &&= (Оператор логического присваивания И)
|
||||||
|
- ! (НЕ)
|
||||||
|
- ?? (Оператор нулевого слияния)
|
||||||
|
- ??= (Оператор нулевого присваивания)
|
||||||
|
|
||||||
|
### || (ИЛИ)
|
||||||
|
```
|
||||||
|
( true || true ); // true
|
||||||
|
( false || true ); // true
|
||||||
|
( true || false ); // true
|
||||||
|
( false || false ); // false
|
||||||
|
```
|
||||||
|
### ИЛИ "||" находит первое истинное значение
|
||||||
|
```
|
||||||
|
( 1 || 0 ); // 1 (1 - истинное значение)
|
||||||
|
( true || 'какая-то строка' ); // true
|
||||||
|
( null || 1 ); // 1 (первое истинное значение)
|
||||||
|
( null || 0 || 1 ); // 1 (первое истинное значение)
|
||||||
|
( undefined || null || 0 ); // 0 (поскольку все ложно, возвращается последнее значение)
|
||||||
|
```
|
||||||
|
|
||||||
|
### ||= (Логическое присваивание ИЛИ)
|
||||||
|
```
|
||||||
|
a ||= b;
|
||||||
|
```
|
||||||
|
Оператор **||=** принимает два операнда и выполняет следующие действия:
|
||||||
|
|
||||||
|
- Вычисляет операнды слева направо.
|
||||||
|
- Конвертирует ***a*** в логическое значение.
|
||||||
|
- Если ***a*** ложно, присваивает ***a*** значение ***b***.
|
||||||
|
|
||||||
|
### && (И)
|
||||||
|
```
|
||||||
|
( true && true ); // true
|
||||||
|
( false && true ); // false
|
||||||
|
( true && false ); // false
|
||||||
|
( false && false ); // false
|
||||||
|
```
|
||||||
|
#### И «&&» находит первое ложное значение
|
||||||
|
```
|
||||||
|
result = value1 && value2 && value3;
|
||||||
|
```
|
||||||
|
Оператор **&&** выполняет следующие действия:
|
||||||
|
|
||||||
|
- Вычисляет операнды слева направо.
|
||||||
|
- Каждый операнд преобразует в логическое значение. Если результат **false**, останавливается и возвращает исходное
|
||||||
|
значение этого операнда.
|
||||||
|
- Если все операнды были истинными, возвращается последний.
|
||||||
|
|
||||||
|
Другими словами, **И** возвращает первое ложное значение. Или последнее, если ничего не найдено.
|
||||||
|
|
||||||
|
Вышеуказанные правила схожи с поведением **ИЛИ**. Разница в том, что **И** возвращает первое ложное значение, а **ИЛИ**
|
||||||
|
первое истинное.
|
||||||
|
|
||||||
|
❗ ***Приоритет оператора && больше, чем у ||*** \
|
||||||
|
Приоритет оператора **И &&** больше, чем **ИЛИ ||**, так что он выполняется раньше.
|
||||||
|
|
||||||
|
Таким образом, код **a && b || c && d** по существу такой же,
|
||||||
|
как если бы выражения **&&** были в круглых скобках: **(a && b) || (c && d)**
|
||||||
|
|
||||||
|
❗ ***Не заменяйте if на || или &&*** \
|
||||||
|
Несмотря на то, что вариант с && кажется более коротким, if более нагляден и, как правило, более читабелен.
|
||||||
|
|
||||||
|
### &&= (Логическое присваивание И)
|
||||||
|
```
|
||||||
|
a &&= b;
|
||||||
|
```
|
||||||
|
Принцип действия **&&=** практически такой же, как и у оператора логического присваивания **ИЛИ ||=**. \
|
||||||
|
Единственное отличие заключается в том, что **&&=** присвоит **a** значение **b** только в том случае, если **a**
|
||||||
|
истинно.
|
||||||
|
|
||||||
|
### ! (НЕ)
|
||||||
|
|
||||||
|
```
|
||||||
|
result = !value;
|
||||||
|
```
|
||||||
|
|
||||||
|
Оператор принимает один аргумент и выполняет следующие действия:
|
||||||
|
|
||||||
|
1. Сначала приводит аргумент к логическому типу **true/false**.
|
||||||
|
2. Затем возвращает противоположное значение.
|
||||||
|
|
||||||
|
❗ Приоритет **НЕ !** является наивысшим из всех логических операторов, поэтому он всегда выполняется первым, перед **&&
|
||||||
|
** или **||**.
|
||||||
|
|
||||||
|
### Оператор нулевого слияния (??)
|
||||||
|
|
||||||
|
Результат выражения **a ?? b** будет следующим:
|
||||||
|
|
||||||
|
- если **a** определено, то **a**,
|
||||||
|
- если **a** не определено, то **b**.
|
||||||
|
|
||||||
|
Иначе говоря, оператор **??** возвращает первый аргумент, если он не **null/undefined**, иначе второй.
|
||||||
|
|
||||||
|
#### Сравнение с ||
|
||||||
|
|
||||||
|
Важное различие между ними заключается в том, что:
|
||||||
|
|
||||||
|
- || возвращает первое истинное значение.
|
||||||
|
- ?? возвращает первое определённое значение.
|
||||||
|
|
||||||
|
Приоритет оператора ?? такой же, как и у ||. Они оба равны 3 в таблице на MDN.
|
||||||
|
|
||||||
|
#### Использование ?? вместе с && или ||
|
||||||
|
|
||||||
|
По соображениям безопасности JavaScript запрещает использование оператора **??** вместе с **&&** и **||**, если
|
||||||
|
приоритет явно не указан при помощи круглых скобок.
|
||||||
|
```
|
||||||
|
let x = 1 && 2 ?? 3; // Синтаксическая ошибка
|
||||||
|
```
|
||||||
|
|
||||||
|
Используйте скобки, чтобы обойти это ограничение:
|
||||||
|
```
|
||||||
|
let x = (1 && 2) ?? 3; // Работает без ошибок
|
||||||
|
```
|
||||||
|
### Оператор нулевого присваивания (??=)
|
||||||
|
|
||||||
|
Предположим, нам необходимо проверить, равна ли переменная null или undefined, и если это так — присвоить этой
|
||||||
|
переменной какое-либо другое значение.
|
||||||
|
```
|
||||||
|
let userAge = null;
|
||||||
|
|
||||||
|
if (userAge === null || userAge === undefined) {
|
||||||
|
userAge = 18;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Выглядит громоздко, правда? Существует оператор, более подходящий для подобных задач.
|
||||||
|
```x ??= y```
|
||||||
|
|
||||||
|
Оператор **??=** присвоит **x** значение **y** только в том случае, если **x** не определено (null/undefined).
|
||||||
|
```
|
||||||
|
let userAge = null;
|
||||||
|
userAge ??= 18;
|
||||||
|
alert(userAge) // 18
|
||||||
|
```
|
||||||
38
docs/javascript/base/07-cycles.md
Normal file
38
docs/javascript/base/07-cycles.md
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 7
|
||||||
|
---
|
||||||
|
|
||||||
|
# Циклы while и for
|
||||||
|
|
||||||
|
⚡ ***Циклы for…of и for…in***
|
||||||
|
- **for…in** для перебора свойств объекта.
|
||||||
|
- **for…of** для перебора массивов и перебираемых объектов.
|
||||||
|
|
||||||
|
## Цикл «while»
|
||||||
|
```
|
||||||
|
while (condition) {
|
||||||
|
// код
|
||||||
|
// также называемый "телом цикла"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
## Цикл «do…while»
|
||||||
|
```
|
||||||
|
do {
|
||||||
|
// тело цикла
|
||||||
|
} while (condition);
|
||||||
|
```
|
||||||
|
## Цикл «for»
|
||||||
|
```
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
alert(i);
|
||||||
|
}
|
||||||
|
// выведет 0, затем 1, затем 2
|
||||||
|
```
|
||||||
|
|
||||||
|
## Прерывание цикла: «break»
|
||||||
|
Вообще, сочетание «бесконечный цикл + break» – отличная штука для тех ситуаций, когда условие, по которому нужно прерваться, находится не в начале или конце цикла, а посередине или даже в нескольких местах его тела.
|
||||||
|
|
||||||
|
## Переход к следующей итерации: continue
|
||||||
|
❗ Нельзя использовать break/continue справа от оператора „?“ \
|
||||||
|
Обратите внимание, что эти синтаксические конструкции не являются выражениями и не могут быть использованы с тернарным оператором ?. В частности, использование таких директив, как **break/continue**, вызовет ошибку.
|
||||||
|
> (i > 5) ? alert(i) : continue; // continue здесь приведёт к ошибке
|
||||||
7
docs/javascript/base/_category_.json
Normal file
7
docs/javascript/base/_category_.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"label": "Основа",
|
||||||
|
"position": 1,
|
||||||
|
"link": {
|
||||||
|
"type": "generated-index"
|
||||||
|
}
|
||||||
|
}
|
||||||
7
docs/javascript/classes/_category_.json
Normal file
7
docs/javascript/classes/_category_.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"label": "Классы",
|
||||||
|
"position": 6,
|
||||||
|
"link": {
|
||||||
|
"type": "generated-index"
|
||||||
|
}
|
||||||
|
}
|
||||||
7
docs/javascript/data-types/_category_.json
Normal file
7
docs/javascript/data-types/_category_.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"label": "Типы данных",
|
||||||
|
"position": 3,
|
||||||
|
"link": {
|
||||||
|
"type": "generated-index"
|
||||||
|
}
|
||||||
|
}
|
||||||
0
docs/javascript/data-types/index.md
Normal file
0
docs/javascript/data-types/index.md
Normal file
45
docs/javascript/functions/01-intro.md
Normal file
45
docs/javascript/functions/01-intro.md
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
# Введение
|
||||||
|
|
||||||
|
#### Function Declaration: функция в основном потоке кода
|
||||||
|
```
|
||||||
|
function sum(a, b) {
|
||||||
|
let result = a + b;
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Function Expression: функция как часть выражения
|
||||||
|
```
|
||||||
|
let sum = function(a, b) {
|
||||||
|
let result = a + b;
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Стрелочные функции:
|
||||||
|
```
|
||||||
|
// выражение в правой части
|
||||||
|
let sum = (a, b) => a + b;
|
||||||
|
|
||||||
|
// многострочный код в фигурных скобках { ... }, здесь нужен return:
|
||||||
|
let sum = (a, b) => {
|
||||||
|
// ...
|
||||||
|
return a + b;
|
||||||
|
}
|
||||||
|
|
||||||
|
// без аргументов
|
||||||
|
let sayHi = () => alert("Привет");
|
||||||
|
|
||||||
|
// с одним аргументом
|
||||||
|
let double = n => n * 2;
|
||||||
|
```
|
||||||
|
|
||||||
|
- У функций могут быть локальные переменные: т.е. объявленные в теле функции. Такие переменные видимы только внутри функции.
|
||||||
|
- У параметров могут быть значения по умолчанию: function sum(a = 1, b = 2) \{...\}.
|
||||||
|
- Функции всегда что-нибудь возвращают. Если нет оператора return, результатом будет undefined.
|
||||||
39
docs/javascript/functions/02-func-declaration.md
Normal file
39
docs/javascript/functions/02-func-declaration.md
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
---
|
||||||
|
|
||||||
|
# Function Declaration
|
||||||
|
|
||||||
|
Function Declaration (Объявление Функции):
|
||||||
|
```
|
||||||
|
function имя(параметры, через, запятую) {
|
||||||
|
...тело, код функции...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
Переменные, объявленные внутри функции, видны только внутри этой функции.
|
||||||
|
|
||||||
|
Функция обладает полным доступом к внешним переменным и может изменять их значение.
|
||||||
|
|
||||||
|
#### 💥 Глобальные переменные
|
||||||
|
> Переменные, объявленные снаружи всех функций, называются глобальными.
|
||||||
|
>
|
||||||
|
> Глобальные переменные видимы для любой функции (если только их не перекрывают одноимённые локальные переменные).
|
||||||
|
>
|
||||||
|
> Желательно сводить использование глобальных переменных к минимуму. В современном коде обычно мало или совсем нет глобальных переменных. Хотя они иногда полезны для хранения важнейших «общепроектовых» данных.
|
||||||
|
|
||||||
|
#### Параметры
|
||||||
|
Мы можем передать внутрь функции любую информацию, используя параметры.
|
||||||
|
Значение, передаваемое в качестве параметра функции, также называется аргументом.
|
||||||
|
|
||||||
|
Другими словами:
|
||||||
|
|
||||||
|
- **Параметр** – это переменная, указанная в круглых скобках в объявлении функции.
|
||||||
|
- **Аргумент** – это значение, которое передаётся функции при её вызове.
|
||||||
|
|
||||||
|
Если при вызове функции аргумент не был указан, то его значением становится **undefined**.
|
||||||
|
|
||||||
|
Функция может вернуть результат, который будет передан в вызвавший её код c помощью **return**\
|
||||||
|
Возможно использовать **return** и без значения. Это приведёт к немедленному выходу из функции.
|
||||||
|
|
||||||
|
❗ ***Результат функции с пустым return или без него – undefined*** \
|
||||||
|
❌ Никогда не добавляйте перевод строки между return и его значением
|
||||||
81
docs/javascript/functions/03-func-expression.md
Normal file
81
docs/javascript/functions/03-func-expression.md
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 3
|
||||||
|
---
|
||||||
|
|
||||||
|
# Function Expression
|
||||||
|
|
||||||
|
**Function Declaration (Объявление Функции):**
|
||||||
|
|
||||||
|
```
|
||||||
|
function sayHi() {
|
||||||
|
alert( "Привет" );
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Function Expression (Функциональное Выражение).**
|
||||||
|
|
||||||
|
```
|
||||||
|
let sayHi = function() {
|
||||||
|
alert( "Привет" );
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Функция – это значение
|
||||||
|
|
||||||
|
Давайте повторим: независимо от того, как создаётся функция – она является значением. В обоих приведённых выше примерах
|
||||||
|
функция хранится в переменной sayHi.
|
||||||
|
|
||||||
|
```
|
||||||
|
function sayHi() {
|
||||||
|
alert( "Привет" );
|
||||||
|
}
|
||||||
|
|
||||||
|
alert( sayHi ); // выведет код функции
|
||||||
|
```
|
||||||
|
|
||||||
|
## Функции-«колбэки»
|
||||||
|
|
||||||
|
Ключевая идея в том, что мы передаём функцию и ожидаем, что она вызовется обратно (от англ. «call back» – обратный
|
||||||
|
вызов) когда-нибудь позже, если это будет необходимо.
|
||||||
|
|
||||||
|
## Function Expression в сравнении с Function Declaration
|
||||||
|
|
||||||
|
- Function Declaration: функция объявляется отдельной конструкцией «function…» в основном потоке кода.
|
||||||
|
- Function Expression: функция, созданная внутри другого выражения или синтаксической конструкции. В данном случае
|
||||||
|
функция создаётся в правой части «выражения присваивания» **=**
|
||||||
|
|
||||||
|
#### 💥 Более тонкое отличие состоит в том, когда создаётся функция движком JavaScript.
|
||||||
|
|
||||||
|
***Function Declaration может быть вызвана раньше, чем она объявлена.***
|
||||||
|
|
||||||
|
```
|
||||||
|
sayHi("Вася"); // Привет, Вася
|
||||||
|
|
||||||
|
function sayHi(name) {
|
||||||
|
alert( `Привет, ${name}` );
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
***Function Expression создаётся, когда выполнение доходит до него, и затем уже может использоваться.***
|
||||||
|
```
|
||||||
|
sayHi("Вася"); // ошибка!
|
||||||
|
|
||||||
|
let sayHi = function(name) { // (*) магии больше нет
|
||||||
|
alert( `Привет, ${name}` );
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
Ещё одна важная особенность Function Declaration заключается в их блочной области видимости.
|
||||||
|
|
||||||
|
В строгом режиме, когда Function Declaration находится в блоке \{...\}, функция доступна везде внутри блока. Но не
|
||||||
|
снаружи него.
|
||||||
|
|
||||||
|
- Функции – это значения. Они могут быть присвоены, скопированы или объявлены в любом месте кода.
|
||||||
|
- Если функция объявлена как отдельная инструкция в основном потоке кода, то это “Function Declaration”.
|
||||||
|
- Если функция была создана как часть выражения, то это “Function Expression”.
|
||||||
|
- Function Declaration обрабатываются перед выполнением блока кода. Они видны во всём блоке.
|
||||||
|
- Функции, объявленные при помощи Function Expression, создаются только когда поток выполнения достигает их.
|
||||||
|
|
||||||
|
В большинстве случаев, когда нам нужно объявить функцию, Function Declaration предпочтительнее, т.к функция будет видна
|
||||||
|
до своего объявления в коде. Это даёт нам больше гибкости в организации кода, и, как правило, делает его более
|
||||||
|
читабельным.
|
||||||
58
docs/javascript/functions/04-arrow-func.md
Normal file
58
docs/javascript/functions/04-arrow-func.md
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 4
|
||||||
|
---
|
||||||
|
|
||||||
|
# Стрелочные функции
|
||||||
|
|
||||||
|
Существует ещё один очень простой и лаконичный синтаксис для создания функций, который часто лучше, чем Function Expression.
|
||||||
|
|
||||||
|
``` let sum = (a, b) => a + b;```
|
||||||
|
|
||||||
|
## У стрелочных функций нет «this»
|
||||||
|
Если происходит обращение к this, его значение берётся снаружи.
|
||||||
|
|
||||||
|
❗ ***Стрелочные функции нельзя использовать с new***
|
||||||
|
> Отсутствие this естественным образом ведёт к другому ограничению: стрелочные функции не могут быть использованы как конструкторы. Они не могут быть вызваны с new.
|
||||||
|
|
||||||
|
Стрелочные функции VS bind
|
||||||
|
Существует тонкая разница между стрелочной функцией => и обычной функцией, вызванной с .bind(this):
|
||||||
|
|
||||||
|
- .bind(this) создаёт «связанную версию» функции.
|
||||||
|
- Стрелка => ничего не привязывает. У функции просто нет this. При получении значения this – оно, как обычная переменная, берётся из внешнего лексического окружения.
|
||||||
|
|
||||||
|
## Стрелочные функции не имеют «arguments»
|
||||||
|
|
||||||
|
Это отлично подходит для декораторов, когда нам нужно пробросить вызов с текущими this и arguments.
|
||||||
|
```
|
||||||
|
function defer(f, ms) {
|
||||||
|
return function() {
|
||||||
|
setTimeout(() => f.apply(this, arguments), ms)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function sayHi(who) {
|
||||||
|
alert('Hello, ' + who);
|
||||||
|
}
|
||||||
|
|
||||||
|
let sayHiDeferred = defer(sayHi, 2000);
|
||||||
|
sayHiDeferred("John"); // выводит "Hello, John" через 2 секунды`
|
||||||
|
```
|
||||||
|
|
||||||
|
То же самое без стрелочной функции выглядело бы так:
|
||||||
|
|
||||||
|
```
|
||||||
|
function defer(f, ms) {
|
||||||
|
return function(...args) {
|
||||||
|
let ctx = this;
|
||||||
|
setTimeout(function() {
|
||||||
|
return f.apply(ctx, args);
|
||||||
|
}, ms);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Стрелочные функции:
|
||||||
|
- Не имеют this.
|
||||||
|
- Не имеют arguments.
|
||||||
|
- Не могут быть вызваны с new.
|
||||||
|
- У них также нет super.
|
||||||
7
docs/javascript/functions/_category_.json
Normal file
7
docs/javascript/functions/_category_.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"label": "Работа с функциями",
|
||||||
|
"position": 4,
|
||||||
|
"link": {
|
||||||
|
"type": "generated-index"
|
||||||
|
}
|
||||||
|
}
|
||||||
7
docs/javascript/generators/_category_.json
Normal file
7
docs/javascript/generators/_category_.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"label": "Генераторы, продвинутая итерация",
|
||||||
|
"position": 9,
|
||||||
|
"link": {
|
||||||
|
"type": "generated-index"
|
||||||
|
}
|
||||||
|
}
|
||||||
0
docs/javascript/generators/index.md
Normal file
0
docs/javascript/generators/index.md
Normal file
7
docs/javascript/modules/_category_.json
Normal file
7
docs/javascript/modules/_category_.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"label": "Модули",
|
||||||
|
"position": 10,
|
||||||
|
"link": {
|
||||||
|
"type": "generated-index"
|
||||||
|
}
|
||||||
|
}
|
||||||
0
docs/javascript/modules/index.md
Normal file
0
docs/javascript/modules/index.md
Normal file
@@ -1 +0,0 @@
|
|||||||
empty
|
|
||||||
7
docs/javascript/objects/_category_.json
Normal file
7
docs/javascript/objects/_category_.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"label": "Объекты",
|
||||||
|
"position": 2,
|
||||||
|
"link": {
|
||||||
|
"type": "generated-index"
|
||||||
|
}
|
||||||
|
}
|
||||||
0
docs/javascript/objects/index.md
Normal file
0
docs/javascript/objects/index.md
Normal file
7
docs/javascript/others/_category_.json
Normal file
7
docs/javascript/others/_category_.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"label": "Разное",
|
||||||
|
"position": 11,
|
||||||
|
"link": {
|
||||||
|
"type": "generated-index"
|
||||||
|
}
|
||||||
|
}
|
||||||
0
docs/javascript/others/index.md
Normal file
0
docs/javascript/others/index.md
Normal file
7
docs/javascript/promises/_category_.json
Normal file
7
docs/javascript/promises/_category_.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"label": "Промисы, async-await",
|
||||||
|
"position": 8,
|
||||||
|
"link": {
|
||||||
|
"type": "generated-index"
|
||||||
|
}
|
||||||
|
}
|
||||||
0
docs/javascript/promises/index.md
Normal file
0
docs/javascript/promises/index.md
Normal file
7
docs/javascript/prototypes/_category_.json
Normal file
7
docs/javascript/prototypes/_category_.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"label": "Прототипы, наследование",
|
||||||
|
"position": 5,
|
||||||
|
"link": {
|
||||||
|
"type": "generated-index"
|
||||||
|
}
|
||||||
|
}
|
||||||
0
docs/javascript/prototypes/index.md
Normal file
0
docs/javascript/prototypes/index.md
Normal file
7
docs/javascript/try-catch/_category_.json
Normal file
7
docs/javascript/try-catch/_category_.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"label": "Обработка ошибок",
|
||||||
|
"position": 7,
|
||||||
|
"link": {
|
||||||
|
"type": "generated-index"
|
||||||
|
}
|
||||||
|
}
|
||||||
0
docs/javascript/try-catch/index.md
Normal file
0
docs/javascript/try-catch/index.md
Normal file
@@ -78,7 +78,7 @@ const config: Config = {
|
|||||||
type: 'docSidebar',
|
type: 'docSidebar',
|
||||||
sidebarId: 'tutorialSidebar',
|
sidebarId: 'tutorialSidebar',
|
||||||
position: 'left',
|
position: 'left',
|
||||||
label: 'Tutorial',
|
label: 'Questions',
|
||||||
},
|
},
|
||||||
// {to: '/blog', label: 'Blog', position: 'left'},
|
// {to: '/blog', label: 'Blog', position: 'left'},
|
||||||
{
|
{
|
||||||
@@ -95,7 +95,7 @@ const config: Config = {
|
|||||||
title: 'Docs',
|
title: 'Docs',
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
label: 'Tutorial',
|
label: 'Questions',
|
||||||
to: '/docs/intro',
|
to: '/docs/intro',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user