update docs, add object

This commit is contained in:
2025-02-27 16:37:59 +03:00
parent 698358afaf
commit b021fab251
12 changed files with 175 additions and 43 deletions

View File

@@ -12,7 +12,7 @@ sidebar_position: 2
- const (константа, т.е. изменению не подлежит) - const (константа, т.е. изменению не подлежит)
- var (устаревший способ, подробности позже) - var (устаревший способ, подробности позже)
``` ```js
let message; let message;
message = 'Hello'; // сохранить строку 'Hello' в переменной с именем message message = 'Hello'; // сохранить строку 'Hello' в переменной с именем message
@@ -43,7 +43,7 @@ message = 'Hello';
Оператор typeof возвращает тип значения переменной, с двумя исключениями: Оператор typeof возвращает тип значения переменной, с двумя исключениями:
``` ```js
typeof null == "object" // ошибка в языке typeof null == "object" // ошибка в языке
typeof function(){} == "function" // именно для функций typeof function(){} == "function" // именно для функций
``` ```

View File

@@ -5,14 +5,18 @@ sidebar_position: 3
# Преобразование типов # Преобразование типов
## Строковое преобразование ## Строковое преобразование
**String(value)** ```js
String(value)
``` ```
```js
alert(typeof value); // string alert(typeof value); // string
``` ```
## Численное преобразование ## Численное преобразование
**Number(str)** ```js
Number(str)
``` ```
```js
let num = Number(str); // становится числом 123 let num = Number(str); // становится числом 123
``` ```
| Значение | Преобразуется в… | | Значение | Преобразуется в… |
@@ -22,14 +26,16 @@ let num = Number(str); // становится числом 123
| true / false | 1 / 0 | | true / false | 1 / 0 |
| string | Пробельные символы (пробелы, знаки табуляции \t, знаки новой строки \n и т. п.) по краям обрезаются. Далее, если остаётся пустая строка, то получаем 0, иначе из непустой строки «считывается» число. При ошибке результат NaN. | | string | Пробельные символы (пробелы, знаки табуляции \t, знаки новой строки \n и т. п.) по краям обрезаются. Далее, если остаётся пустая строка, то получаем 0, иначе из непустой строки «считывается» число. При ошибке результат NaN. |
``` ```js
alert( Number(" 123 ") ); // 123 alert( Number(" 123 ") ); // 123
alert( Number("123z") ); // NaN (ошибка чтения числа на месте символа "z") alert( Number("123z") ); // NaN (ошибка чтения числа на месте символа "z")
alert( Number(true) ); // 1 alert( Number(true) ); // 1
alert( Number(false) ); // 0 alert( Number(false) ); // 0
``` ```
## Логическое преобразование ## Логическое преобразование
**Boolean(value)**\ ```js
Boolean(value)
```
Происходит в логических операциях, но также может быть выполнено явно с помощью функции Boolean(value). Происходит в логических операциях, но также может быть выполнено явно с помощью функции Boolean(value).
Правило преобразования: Правило преобразования:
@@ -41,7 +47,7 @@ alert( Number(false) ); // 0
| 0, null, undefined, NaN, "" | false | | 0, null, undefined, NaN, "" | false |
| любое другое значение | true | | любое другое значение | true |
``` ```js
alert( Boolean(1) ); // true alert( Boolean(1) ); // true
alert( Boolean(0) ); // false alert( Boolean(0) ); // false
alert( Boolean("Привет!") ); // true alert( Boolean("Привет!") ); // true

View File

@@ -32,8 +32,8 @@ sidebar_position: 4
## Оператор «запятая» ## Оператор «запятая»
Оператор «запятая» предоставляет нам возможность вычислять несколько выражений, разделяя их запятой ,. Каждое выражение выполняется, но возвращается результат только последнего. Оператор «запятая» предоставляет нам возможность вычислять несколько выражений, разделяя их запятой ,. Каждое выражение выполняется, но возвращается результат только последнего.
``` ```js
let a = (1 + 2, 3 + 4); \ let a = (1 + 2, 3 + 4);
alert( a ); // 7 (результат вычисления 3 + 4) \ alert( a ); // 7 (результат вычисления 3 + 4)
``` ```
***Запятая имеет очень низкий приоритет*** ***Запятая имеет очень низкий приоритет***

View File

@@ -11,7 +11,7 @@ sidebar_position: 6
***Несколько условий: «else if»*** ***Несколько условий: «else if»***
## Конструкция "switch" ## Конструкция "switch"
``` ```js
let a = 2 + 2; let a = 2 + 2;
switch (a) { switch (a) {
@@ -29,7 +29,7 @@ switch (a) {
} }
``` ```
## Условный оператор „?“ (тернарный) ## Условный оператор „?“ (тернарный)
``` ```js
let result = условие ? значение1 : значение2; let result = условие ? значение1 : значение2;
``` ```
## Логические операторы ## Логические операторы
@@ -45,14 +45,14 @@ let result = условие ? значение1 : значение2;
- ??= (Оператор нулевого присваивания) - ??= (Оператор нулевого присваивания)
### || (ИЛИ) ### || (ИЛИ)
``` ```js
( true || true ); // true ( true || true ); // true
( false || true ); // true ( false || true ); // true
( true || false ); // true ( true || false ); // true
( false || false ); // false ( false || false ); // false
``` ```
### ИЛИ "||" находит первое истинное значение ### ИЛИ "||" находит первое истинное значение
``` ```js
( 1 || 0 ); // 1 (1 - истинное значение) ( 1 || 0 ); // 1 (1 - истинное значение)
( true || 'какая-то строка' ); // true ( true || 'какая-то строка' ); // true
( null || 1 ); // 1 (первое истинное значение) ( null || 1 ); // 1 (первое истинное значение)
@@ -61,7 +61,7 @@ let result = условие ? значение1 : значение2;
``` ```
### ||= (Логическое присваивание ИЛИ) ### ||= (Логическое присваивание ИЛИ)
``` ```js
a ||= b; a ||= b;
``` ```
Оператор **||=** принимает два операнда и выполняет следующие действия: Оператор **||=** принимает два операнда и выполняет следующие действия:
@@ -71,14 +71,14 @@ a ||= b;
- Если ***a*** ложно, присваивает ***a*** значение ***b***. - Если ***a*** ложно, присваивает ***a*** значение ***b***.
### && (И) ### && (И)
``` ```js
( true && true ); // true ( true && true ); // true
( false && true ); // false ( false && true ); // false
( true && false ); // false ( true && false ); // false
( false && false ); // false ( false && false ); // false
``` ```
#### И «&&» находит первое ложное значение #### И «&&» находит первое ложное значение
``` ```js
result = value1 && value2 && value3; result = value1 && value2 && value3;
``` ```
Оператор **&&** выполняет следующие действия: Оператор **&&** выполняет следующие действия:
@@ -103,7 +103,7 @@ result = value1 && value2 && value3;
Несмотря на то, что вариант с && кажется более коротким, if более нагляден и, как правило, более читабелен. Несмотря на то, что вариант с && кажется более коротким, if более нагляден и, как правило, более читабелен.
### &&= (Логическое присваивание И) ### &&= (Логическое присваивание И)
``` ```js
a &&= b; a &&= b;
``` ```
Принцип действия **&&=** практически такой же, как и у оператора логического присваивания **ИЛИ ||=**. \ Принцип действия **&&=** практически такой же, как и у оператора логического присваивания **ИЛИ ||=**. \
@@ -112,7 +112,7 @@ a &&= b;
### ! (НЕ) ### ! (НЕ)
``` ```js
result = !value; result = !value;
``` ```
@@ -146,19 +146,19 @@ result = !value;
По соображениям безопасности JavaScript запрещает использование оператора **??** вместе с **&&** и **||**, если По соображениям безопасности JavaScript запрещает использование оператора **??** вместе с **&&** и **||**, если
приоритет явно не указан при помощи круглых скобок. приоритет явно не указан при помощи круглых скобок.
``` ```js
let x = 1 && 2 ?? 3; // Синтаксическая ошибка let x = 1 && 2 ?? 3; // Синтаксическая ошибка
``` ```
Используйте скобки, чтобы обойти это ограничение: Используйте скобки, чтобы обойти это ограничение:
``` ```js
let x = (1 && 2) ?? 3; // Работает без ошибок let x = (1 && 2) ?? 3; // Работает без ошибок
``` ```
### Оператор нулевого присваивания (??=) ### Оператор нулевого присваивания (??=)
Предположим, нам необходимо проверить, равна ли переменная null или undefined, и если это так — присвоить этой Предположим, нам необходимо проверить, равна ли переменная null или undefined, и если это так — присвоить этой
переменной какое-либо другое значение. переменной какое-либо другое значение.
``` ```js
let userAge = null; let userAge = null;
if (userAge === null || userAge === undefined) { if (userAge === null || userAge === undefined) {
@@ -167,10 +167,12 @@ if (userAge === null || userAge === undefined) {
``` ```
Выглядит громоздко, правда? Существует оператор, более подходящий для подобных задач. Выглядит громоздко, правда? Существует оператор, более подходящий для подобных задач.
```x ??= y``` ```js
x ??= y
```
Оператор **??=** присвоит **x** значение **y** только в том случае, если **x** не определено (null/undefined). Оператор **??=** присвоит **x** значение **y** только в том случае, если **x** не определено (null/undefined).
``` ```js
let userAge = null; let userAge = null;
userAge ??= 18; userAge ??= 18;
alert(userAge) // 18 alert(userAge) // 18

View File

@@ -9,20 +9,20 @@ sidebar_position: 7
- **for…of** для перебора массивов и перебираемых объектов. - **for…of** для перебора массивов и перебираемых объектов.
## Цикл «while» ## Цикл «while»
``` ```js
while (condition) { while (condition) {
// код // код
// также называемый "телом цикла" // также называемый "телом цикла"
} }
``` ```
## Цикл «do…while» ## Цикл «do…while»
``` ```js
do { do {
// тело цикла // тело цикла
} while (condition); } while (condition);
``` ```
## Цикл «for» ## Цикл «for»
``` ```js
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
alert(i); alert(i);
} }
@@ -35,4 +35,6 @@ for (let i = 0; i < 3; i++) {
## Переход к следующей итерации: continue ## Переход к следующей итерации: continue
❗ Нельзя использовать break/continue справа от оператора „?“ \ ❗ Нельзя использовать break/continue справа от оператора „?“ \
Обратите внимание, что эти синтаксические конструкции не являются выражениями и не могут быть использованы с тернарным оператором ?. В частности, использование таких директив, как **break/continue**, вызовет ошибку. Обратите внимание, что эти синтаксические конструкции не являются выражениями и не могут быть использованы с тернарным оператором ?. В частности, использование таких директив, как **break/continue**, вызовет ошибку.
> (i > 5) ? alert(i) : continue; // continue здесь приведёт к ошибке ```js
(i > 5) ? alert(i) : continue; // continue здесь приведёт к ошибке
```

View File

@@ -1,5 +1,5 @@
{ {
"label": "Основа", "label": "Введение",
"position": 1, "position": 1,
"link": { "link": {
"type": "generated-index" "type": "generated-index"

View File

@@ -2,10 +2,10 @@
sidebar_position: 1 sidebar_position: 1
--- ---
# Введение # Общая информация
#### Function Declaration: функция в основном потоке кода #### Function Declaration: функция в основном потоке кода
``` ```js
function sum(a, b) { function sum(a, b) {
let result = a + b; let result = a + b;
@@ -14,7 +14,7 @@ function sum(a, b) {
``` ```
#### Function Expression: функция как часть выражения #### Function Expression: функция как часть выражения
``` ```js
let sum = function(a, b) { let sum = function(a, b) {
let result = a + b; let result = a + b;
@@ -23,7 +23,7 @@ let sum = function(a, b) {
``` ```
#### Стрелочные функции: #### Стрелочные функции:
``` ```js
// выражение в правой части // выражение в правой части
let sum = (a, b) => a + b; let sum = (a, b) => a + b;

View File

@@ -5,9 +5,9 @@ sidebar_position: 2
# Function Declaration # Function Declaration
Function Declaration (Объявление Функции): Function Declaration (Объявление Функции):
``` ```js
function имя(параметры, через, запятую) { function имя(параметры, через, запятую) {
...тело, код функции... //...тело, код функции...
} }
``` ```
Переменные, объявленные внутри функции, видны только внутри этой функции. Переменные, объявленные внутри функции, видны только внутри этой функции.

View File

@@ -6,7 +6,7 @@ sidebar_position: 3
**Function Declaration (Объявление Функции):** **Function Declaration (Объявление Функции):**
``` ```js
function sayHi() { function sayHi() {
alert( "Привет" ); alert( "Привет" );
} }
@@ -14,7 +14,7 @@ function sayHi() {
**Function Expression (Функциональное Выражение).** **Function Expression (Функциональное Выражение).**
``` ```js
let sayHi = function() { let sayHi = function() {
alert( "Привет" ); alert( "Привет" );
}; };
@@ -25,7 +25,7 @@ let sayHi = function() {
Давайте повторим: независимо от того, как создаётся функция она является значением. В обоих приведённых выше примерах Давайте повторим: независимо от того, как создаётся функция она является значением. В обоих приведённых выше примерах
функция хранится в переменной sayHi. функция хранится в переменной sayHi.
``` ```js
function sayHi() { function sayHi() {
alert( "Привет" ); alert( "Привет" );
} }
@@ -48,7 +48,7 @@ alert( sayHi ); // выведет код функции
***Function Declaration может быть вызвана раньше, чем она объявлена.*** ***Function Declaration может быть вызвана раньше, чем она объявлена.***
``` ```js
sayHi("Вася"); // Привет, Вася sayHi("Вася"); // Привет, Вася
function sayHi(name) { function sayHi(name) {
@@ -57,7 +57,7 @@ function sayHi(name) {
``` ```
***Function Expression создаётся, когда выполнение доходит до него, и затем уже может использоваться.*** ***Function Expression создаётся, когда выполнение доходит до него, и затем уже может использоваться.***
``` ```js
sayHi("Вася"); // ошибка! sayHi("Вася"); // ошибка!
let sayHi = function(name) { // (*) магии больше нет let sayHi = function(name) { // (*) магии больше нет

View File

@@ -6,7 +6,9 @@ sidebar_position: 4
Существует ещё один очень простой и лаконичный синтаксис для создания функций, который часто лучше, чем Function Expression. Существует ещё один очень простой и лаконичный синтаксис для создания функций, который часто лучше, чем Function Expression.
``` let sum = (a, b) => a + b;``` ```js
let sum = (a, b) => a + b;
```
## У стрелочных функций нет «this» ## У стрелочных функций нет «this»
Если происходит обращение к this, его значение берётся снаружи. Если происходит обращение к this, его значение берётся снаружи.
@@ -23,7 +25,7 @@ sidebar_position: 4
## Стрелочные функции не имеют «arguments» ## Стрелочные функции не имеют «arguments»
Это отлично подходит для декораторов, когда нам нужно пробросить вызов с текущими this и arguments. Это отлично подходит для декораторов, когда нам нужно пробросить вызов с текущими this и arguments.
``` ```js
function defer(f, ms) { function defer(f, ms) {
return function() { return function() {
setTimeout(() => f.apply(this, arguments), ms) setTimeout(() => f.apply(this, arguments), ms)
@@ -40,7 +42,7 @@ sayHiDeferred("John"); // выводит "Hello, John" через 2 секунд
То же самое без стрелочной функции выглядело бы так: То же самое без стрелочной функции выглядело бы так:
``` ```js
function defer(f, ms) { function defer(f, ms) {
return function(...args) { return function(...args) {
let ctx = this; let ctx = this;

View File

@@ -0,0 +1,120 @@
---
sidebar_position: 1
---
# Объекты
Объекты это ассоциативные массивы с рядом дополнительных возможностей.
Они хранят свойства (пары ключ-значение), где:
- Ключи свойств должны быть строками или символами (обычно строками).
- Значения могут быть любого типа.
Чтобы получить доступ к свойству, мы можем использовать:
- Запись через точку: obj.property.
- Квадратные скобки obj["property"]. Квадратные скобки позволяют взять ключ из переменной, например, obj[varWithKey].
Дополнительные операторы:
- Удаление свойства: delete obj.prop.
- Проверка существования свойства: "key" in obj.
- Перебор свойств объекта: цикл for for (let key in obj).
```js
let user = new Object(); // синтаксис "конструктор объекта"
let user = {}; // синтаксис "литерал объекта"
```
При использовании литерального синтаксиса \{...\} мы сразу можем поместить в объект несколько свойств в виде пар «ключ: значение»\
Имя свойства может состоять из нескольких слов, но тогда оно должно быть заключено в кавычки:
```js
let user = { // объект
name: "John", // под ключом "name" хранится значение "John"
age: 30, // под ключом "age" хранится значение 30
"likes birds": true // имя свойства из нескольких слов должно быть в кавычках
};
// получаем свойства объекта:
alert( user.name ); // John
```
Для удаления свойства мы можем использовать оператор delete:
```js
delete user.age;
```
💥 ***Объект, объявленный как константа, может быть изменён***
### Квадратные скобки
Для свойств, имена которых состоят из нескольких слов, доступ к значению «через точку» не работает
```js
let user = {};
// присваивание значения свойству
user["likes birds"] = true;
// получение значения свойства
alert(user["likes birds"]); // true
let key = "likes birds";
// то же самое, что и user["likes birds"] = true;
user[key] = true;
// удаление свойства
delete user["likes birds"];
```
Здесь переменная key может быть вычислена во время выполнения кода или зависеть от пользовательского ввода. После этого мы используем её для доступа к свойству.
### Ограничения на имена свойств
Как мы уже знаем, имя переменной не может совпадать с зарезервированными словами, такими как «for», «let», «return» и т.д.
Но для свойств объекта такого ограничения нет
Иными словами, нет никаких ограничений к именам свойств. Они могут быть в виде строк или символов (специальный тип для идентификаторов, который будет рассмотрен позже).
Все другие типы данных будут автоматически преобразованы к строке.
Например, если использовать число 0 в качестве ключа, то оно превратится в строку "0"
Есть небольшой подводный камень, связанный со специальным свойством __proto__. Мы не можем установить его в необъектное значение:
```js
let obj = {};
obj.__proto__ = 5; // присвоим число
alert(obj.__proto__); // [object Object], значение - это объект, т.е. не то, что мы ожидали
```
### Проверка существования свойства, оператор «in»
В отличие от многих других языков, особенность JavaScript-объектов в том, что можно получить доступ к любому свойству. Даже если свойства не существует ошибки не будет!
При обращении к свойству, которого нет, возвращается undefined. Это позволяет просто проверить существование свойства:
```js
let user = {};
alert( user.noSuchProperty === undefined ); // true означает "свойства нет"
```
### "key" in object
```js
let user = { name: "John", age: 30 };
alert( "age" in user ); // true, user.age существует
alert( "blabla" in user ); // false, user.blabla не существует
```
### Цикл "for..in"
```js
let user = {
name: "John",
age: 30,
isAdmin: true
};
for (let key in user) {
// ключи
alert( key ); // name, age, isAdmin
// значения ключей
alert( user[key] ); // John, 30, true
}
```
### Упорядочение свойств объекта
ойства упорядочены особым образом: свойства с целочисленными ключами сортируются по возрастанию, остальные располагаются в порядке создания.