|
|
|
|
@ -0,0 +1,161 @@
|
|
|
|
|
# Основы JavaScript: массивы и циклы
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> Скетчноут [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
|
|
|
|
## Предлекционный квиз
|
|
|
|
|
|
|
|
|
|
[Предлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
|
|
|
|
|
|
|
|
|
|
Этот урок охватывает основы JavaScript, языка, обеспечивающего интерактивность в Интернете. В этом уроке вы узнаете о массивах и циклах, которые используются для управления данными.
|
|
|
|
|
|
|
|
|
|
[](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
|
|
|
|
|
|
|
|
|
|
[](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
|
|
|
|
|
|
|
|
|
|
> 🎥 Нажмите на изображения выше, чтобы просмотреть видео о массивах и циклах.
|
|
|
|
|
|
|
|
|
|
> Вы можете пройти этот урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
|
|
|
|
|
|
|
|
|
|
## Массивы
|
|
|
|
|
|
|
|
|
|
Работа с данными — обычная задача для любого языка, и она становится намного проще, когда данные организованы, например в массивы. В массивах данные хранятся в структуре, похожей на список. Одним из основных преимуществ массивов является то, что вы можете хранить различные типы данных в одном массиве.
|
|
|
|
|
|
|
|
|
|
✅ Массивы вокруг нас! Можете ли вы привести реальный пример массива, например массива солнечных батарей?
|
|
|
|
|
|
|
|
|
|
Синтаксис массива — пара квадратных скобок.
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let myArray = [];
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Это пустой массив, но массивы могут быть объявлены уже заполненными данными. Несколько значений в массиве разделяются запятой.
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let iceCreamFlavors = [
|
|
|
|
|
"Chocolate",
|
|
|
|
|
"Strawberry",
|
|
|
|
|
"Vanilla",
|
|
|
|
|
"Pistachio",
|
|
|
|
|
"Rocky Road",
|
|
|
|
|
];
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Каждому из значений массива присваивается свое уникальное значение, называемое **индексом**. Индекс — целое число, которое вычисляется на основе расстояния элемента массива от начала массива. В приведенном выше примере строка "Chocolate" имеет индекс 0, а индекс "Rocky Road" — 4. Используйте индекс с квадратными скобками для извлечения, изменения или вставки значений массива.
|
|
|
|
|
|
|
|
|
|
✅ Вас не удивляет, что массивы начинаются с нулевого индекса? В некоторых языках программирования индексы начинаются с 1. С этим связана интересная история, которую вы можете [прочитать в Википедии](https://en.wikipedia.org/wiki/Zero-based_numbering).
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let iceCreamFlavors = [
|
|
|
|
|
"Chocolate",
|
|
|
|
|
"Strawberry",
|
|
|
|
|
"Vanilla",
|
|
|
|
|
"Pistachio",
|
|
|
|
|
"Rocky Road",
|
|
|
|
|
];
|
|
|
|
|
iceCreamFlavors[2]; //"Vanilla"
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Вы можете использовать индекс для изменения значения, например:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
iceCreamFlavors[4] = "Butter Pecan"; //Изменяет "Rocky Road" на "Butter Pecan"
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
И вы можете вставить новое значение по заданному индексу следующим образом:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
iceCreamFlavors[5] = "Cookie Dough"; //Добавили "Cookie Dough"
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
✅ Более распространенный способ поместить значения в массив — использовать методы массива, например array.push().
|
|
|
|
|
|
|
|
|
|
Чтобы узнать, сколько элементов содержится в массиве, используйте свойство `length`.
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let iceCreamFlavors = [
|
|
|
|
|
"Chocolate",
|
|
|
|
|
"Strawberry",
|
|
|
|
|
"Vanilla",
|
|
|
|
|
"Pistachio",
|
|
|
|
|
"Rocky Road",
|
|
|
|
|
];
|
|
|
|
|
iceCreamFlavors.length; //5
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
✅ Попробуйте самостоятельно! Используйте консоль вашего браузера для создания собственного массива и управления им.
|
|
|
|
|
|
|
|
|
|
## Циклы
|
|
|
|
|
|
|
|
|
|
Циклы позволяют выполнять повторяющиеся или **итеративные** задачи и могут сэкономить много времени и кода. Каждая итерация может различаться своими переменными, значениями и условиями. В JavaScript есть разные типы циклов, они имеют небольшие различия, но по сути делают одно и то же: перебирают данные.
|
|
|
|
|
|
|
|
|
|
### Цикл for
|
|
|
|
|
|
|
|
|
|
Цикл `for` требует 3 частей для итерации:
|
|
|
|
|
|
|
|
|
|
- `счетчик` Переменная, которая обычно инициализируется числом, подсчитывающим количество итераций.
|
|
|
|
|
- `условие` Выражение, использующее операторы сравнения, для остановки цикла при `false`
|
|
|
|
|
- `итерация-выражение` Запускается в конце каждой итерации, обычно используется для изменения значения счетчика.
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
// Счет до 10
|
|
|
|
|
for (let i = 0; i < 10; i++) {
|
|
|
|
|
console.log(i);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
✅ Запустите этот код в консоли браузера. Что происходит, когда вы вносите небольшие изменения в счетчик, условие или выражение итерации? Можете ли вы заставить его работать в обратном направлении, создавая обратный отсчет?
|
|
|
|
|
|
|
|
|
|
### Цикл while
|
|
|
|
|
|
|
|
|
|
В отличие от синтаксиса цикла `for`, для циклов `while` требуется только условие, которое остановит цикл при значении `false`. Условия в циклах обычно зависят от других значений, таких как счетчики, и ими необходимо управлять во время цикла. Начальные значения для счетчиков должны создаваться вне цикла, а любые выражения, отвечающие условию, включая изменение счетчика, должны поддерживаться внутри цикла.
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
//Счет до 10
|
|
|
|
|
let i = 0;
|
|
|
|
|
while (i < 10) {
|
|
|
|
|
console.log(i);
|
|
|
|
|
i++;
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
✅ Почему вы должны выбрать цикл for вместо цикла while? 17 тысяч людей задали один и тот же вопрос на StackOverflow, и некоторые мнения [могут быть вам интересны](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
|
|
|
|
|
|
|
|
|
|
## Циклы и массивы
|
|
|
|
|
|
|
|
|
|
Массивы часто используются с циклами, поскольку для остановки цикла в большинстве условий требуется длина массива, а индекс также может быть значением счетчика.
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let iceCreamFlavors = [
|
|
|
|
|
"Chocolate",
|
|
|
|
|
"Strawberry",
|
|
|
|
|
"Vanilla",
|
|
|
|
|
"Pistachio",
|
|
|
|
|
"Rocky Road",
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < iceCreamFlavors.length; i++) {
|
|
|
|
|
console.log(iceCreamFlavors[i]);
|
|
|
|
|
} //Заканчивается, когда все вкусы выведены
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
✅ Поэкспериментируйте с циклами для созданного вами массива в консоли браузера.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 🚀 Челлендж
|
|
|
|
|
|
|
|
|
|
Существуют и другие способы обработки массивов, кроме циклов for и while. Есть [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), и [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Перепишите свой цикл для массива, используя один из этих методов.
|
|
|
|
|
|
|
|
|
|
## Постлекционный квиз
|
|
|
|
|
|
|
|
|
|
[Постлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
|
|
|
|
|
|
|
|
|
|
## Обзор и самообучение
|
|
|
|
|
|
|
|
|
|
У массивов в JavaScript есть множество методов, чрезвычайно полезных для манипулирования данными. [Почитайте об этих методах](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) и попробуйте некоторые из них (например, push, pop, slice и splice) на созданном вами массиве.
|
|
|
|
|
|
|
|
|
|
## Задание
|
|
|
|
|
|
|
|
|
|
[Пройдитесь циклом по массиву](assignment.ru.md)
|
OKitel
3 years ago