|
|
|
@ -0,0 +1,205 @@
|
|
|
|
|
|
|
|
# Основы JavaScript: типы данных
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> Скетчноут [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Предлекционный квиз
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[Предлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Этот урок охватывает основы JavaScript - языка, обеспечивающего интерактивность в Интернете.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> Вы можете пройти этот урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Переменные в JavaScript")
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[](https://youtube.com/watch?v=AWfA95eLdq8 "Типы данных в JavaScript")
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> 🎥 Нажмите на изображения выше, чтобы просмотреть видеоролики о переменных и типах данных.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Начнем с переменных и типов данных, которые их заполняют!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Переменные
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
В переменных хранятся значения, которые можно использовать и изменять в коде.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Создание и **объявление** переменной имеет следующий синтаксис **[ключевое слово] [имя]** т.е. состоит из двух частей:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- **Ключевое слово**. Ключевые слова могут быть `let` или `var`.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
✅ Ключевое слово `let` было введено в ES6 и дает вашей переменной так называемую _блочную область_. Рекомендуется использовать `let` вместо `var`. Мы рассмотрим блочные области более подробно в следующих частях.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- **Имя переменной** - это имя вы выбираете сами.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Задача - работа с переменными
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. **Объявить переменную**. Давайте объявим переменную, используя ключевое слово `let`:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
let myVariable;
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
`myVariable` теперь объявлена с использованием ключевого слова `let`. В настоящее время она не имеет значения.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. **Присвоить значение**. Присвойте значение переменной с помощью оператора `=`, после которого укажите значение.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
myVariable = 123;
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> Примечание: использование `=` в этом уроке означает, что мы используем "оператор присваивания", для установки значения переменной. Этот оператор не означает равенства.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
`myVariable` теперь была _инициализирована_ со значением 123.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. **Рефакторинг**. Замените свой код следующим выражением.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
let myVariable = 123;
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Вышеприведенная запись называется _явной инициализацией_, когда переменная объявляется и одновременно ей присваивается значение.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. **Изменить значение переменной**. Измените значение переменной следующим образом:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
myVariable = 321;
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Как только переменная объявлена, вы можете изменить ее значение в любой точке вашего кода с помощью оператора `=` и нового значения.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
✅ Попробуйте самостоятельно! Вы можете писать JavaScript прямо в браузере. Откройте окно браузера и перейдите в Инструменты разработчика. В консоли вы найдете место ввода; введите `let myVariable = 123`, нажмите клавишу Enter, затем введите `myVariable`. Что произойдет? Вы узнаете больше об этих концепциях в последующих уроках.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Константы
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Объявление и инициализация константы следует той же концепции, что и переменная, за исключением ключевого слова `const`. Константы обычно объявляются заглавными буквами.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
const MY_VARIABLE = 123;
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Константы аналогичны переменным, но имеют два отличия:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- **Должны иметь значение**. Константы должны быть инициализированы, иначе при выполнении кода возникнет ошибка.
|
|
|
|
|
|
|
|
- **Ссылка не может быть изменена**. Ссылка на константу не может быть изменена после инициализации, иначе при выполнении кода возникнет ошибка. Давайте рассмотрим два примера:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- **Простое значение**. Следующая запись НЕ допускается:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
const PI = 3;
|
|
|
|
|
|
|
|
PI = 4; // не допустимо
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- **Ссылка на объект защищена**. Следующая запись НЕ допускается.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
const obj = { a: 3 };
|
|
|
|
|
|
|
|
obj = { b: 5 }; // не допустимо
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- **Значение объекта не защищено**. Допускается следующее:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
const obj = { a: 3 };
|
|
|
|
|
|
|
|
obj.a = 5; // допустимо
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Выше изменяется значение объекта, а не сама ссылка, что является допустимым.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> Обратите внимание, что `const` означает, что ссылка защищена от переприсваивания. Однако значение не является _неизменяемым (иммутабельным)_ и может быть изменено, особенно если это сложная конструкция, такая как объект.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Типы данных
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Переменные могут хранить множество различных типов значений, к примеру числа или текст. Эти различные типы значений известны как **типы данных**. Типы данных являются важной частью разработки программного обеспечения, поскольку они помогают разработчикам принимать решения о том, как следует писать код и как должно работать программное обеспечение. Кроме того некоторые типы данных имеют уникальные функции, которые помогают преобразовывать или извлекать дополнительную информацию из значения.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
✅ Типы данных также называются примитивами данных JavaScript, поскольку они представляют собой типы данных самого низкого уровня, предоставляемые языком. Существует 6 примитивных типов данных: string, number, bigint, boolean, undefined, и symbol. Потратьте минуту, чтобы визуализировать, что может представлять каждый из этих примитивов. Что такое `зебра`? Как насчет `0`? `true` (ИСТИНА)?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Numbers - Числа
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
В предыдущем разделе значение `myVariable` имело числовой тип данных.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
`let myVariable = 123;`
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Переменные могут хранить все типы чисел, включая десятичные или отрицательные числа. Числа также можно использовать с арифметическими операторами, описанными в [следующем разделе](#арифметические-операторы).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Арифметические операторы
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Существует несколько типов операторов, используемых при выполнении арифметических функций, и некоторые из них перечислены здесь:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Символ | Описание | Пример |
|
|
|
|
|
|
|
|
| ------ | ----------------------------------------------------------- | ----------------------------- |
|
|
|
|
|
|
|
|
| `+` | **Сложение**: Вычисляет сумму двух чисел | `1 + 2 //ожидаемый ответ 3` |
|
|
|
|
|
|
|
|
| `-` | **Вычитание**: Вычисляет разность двух чисел | `1 - 2 //ожидаемый ответ -1` |
|
|
|
|
|
|
|
|
| `*` | **Умножение**: Вычисляет произведение двух чисел | `1 * 2 //ожидаемый ответ 2` |
|
|
|
|
|
|
|
|
| `/` | **Деление**: Вычисляет частное двух чисел | `1 / 2 //ожидаемый ответ 0.5` |
|
|
|
|
|
|
|
|
| `%` | **Взятие остатка**: Вычисляет остаток от деления двух чисел | `1 % 2 //ожидаемый ответ 1` |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
✅ Попробуйте самостоятельно выполнить арифметическую операцию в консоли браузера. Удивляют ли вас результаты?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Strings - Строки
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Строки — это наборы символов, заключенные в одинарные или двойные кавычки.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- `'Это строка'`
|
|
|
|
|
|
|
|
- `"Это тоже строка"`
|
|
|
|
|
|
|
|
- `let myString = 'Это строковое значение, хранящееся в переменной';`
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Не забывайте использовать кавычки при написании строки, иначе JavaScript примет ее за имя переменной.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Форматирование строк
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Строки являются текстом и время от времени требуют форматирования.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Чтобы **конкатенировать** две или более строк (иначе говоря, объединить их вместе), используйте оператор `+`.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
let myString1 = "Hello";
|
|
|
|
|
|
|
|
let myString2 = "World";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
myString1 + myString2 + "!"; //HelloWorld!
|
|
|
|
|
|
|
|
myString1 + " " + myString2 + "!"; //Hello World!
|
|
|
|
|
|
|
|
myString1 + ", " + myString2 + "!"; //Hello, World!
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
✅ Почему в JavaScript `1 + 1 = 2` , но `'1'` +`'1'` = `'11'`? Подумайте об этом. Как насчет `'1' + 1`?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**Шаблонные литералы** (также известны как "шаблонные строки") — это еще один способ форматирования строк, за исключением того, что вместо обычных кавычек используются обратные кавычки. Все, что не является обычным текстом, должно быть помещено внутри следующей конструкции `${ }`. Сюда могут быть помещены любые переменные, в т.ч. строки.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
let myString1 = "Hello";
|
|
|
|
|
|
|
|
let myString2 = "World";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
`${myString1} ${myString2}!` //Hello World!
|
|
|
|
|
|
|
|
`${myString1}, ${myString2}!`; //Hello, World!
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Вы можете достичь своих целей форматирования любым методом, но шаблонные литералы будут учитывать любые пробелы и разрывы строк.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
✅ Когда бы вы использовали шаблонные литералы, а когда просто строки?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Booleans - Булевый (логический) тип
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Логические значения могут принимать только два значения: `true` или `false` (ИСТИНА или ЛОЖЬ). Логические значения могут помочь принять решение о том, какие строки кода должны выполняться при выполнении определенных условий. Во многих случаях [операторы](#арифметические-операторы) помогают установить значение логического значения, и вы часто будете замечать и записывать инициализируемые переменные или их значения, обновляемые с помощью оператора.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- `let myTrueBool = true`
|
|
|
|
|
|
|
|
- `let myFalseBool = false`
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
✅ Переменная может считаться «истинной», если она оценивается как логическое значение `true`. Интересно, что в JavaScript [все значения истинны, если они не определены как ложные](https://developer.mozilla.org/docs/Glossary/Truthy).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 🚀 Челлендж
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
JavaScript печально известен своими неожиданными способами обработки типов данных. Проведите небольшое исследование этих «подводных камней». Например: чувствительность к регистру может кусаться! Попробуйте это в своей консоли: `let age = 1; let Age = 2; age == Age` (выводит `false` -- почему?). Какие еще странности вы можете найти?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Постлекционный квиз
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[Постлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Обзор и самообучение
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Взгляните на [этот список упражнений JavaScript](https://css-tricks.com/snippets/javascript/) и попробуйте одно из них. Чему вы научились?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Задание
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[Практика типов данных](assignment.md)
|
OKitel
3 years ago