5. Массивы

![Иллюстрация к уроку](/lessons/javascript-arrays.png)
Массивы - это фундаментальная структура данных в JavaScript, позволяющая хранить упорядоченные коллекции элементов. Они являются строительными блоками для многих алгоритмов и широко используются при работе с данными.

## Что такое массив?

Представьте себе список покупок. Каждый пункт в списке - это отдельный элемент, а весь список целиком - это и есть массив. В JavaScript массив - это переменная, которая может хранить множество значений под одним именем. Эти значения могут быть любого типа: числа, строки, другие массивы, объекты и т.д.

```javascript
// Создание пустого массива
let myArray = [];

// Создание массива с начальными значениями
let numbers = [1, 2, 3, 4, 5];
let fruits = ["яблоко", "банан", "апельсин"];
let mixed = [1, "строка", true, null];

Доступ к элементам массива

Элементы массива индексируются, начиная с 0. Чтобы получить доступ к конкретному элементу, нужно использовать его индекс в квадратных скобках.

let fruits = ["яблоко", "банан", "апельсин"];

console.log(fruits[0]); // Вывод: "яблоко"
console.log(fruits[1]); // Вывод: "банан"
console.log(fruits[2]); // Вывод: "апельсин"

Изменение элементов массива

Элементы массива можно изменять, присваивая им новые значения по их индексу.

let fruits = ["яблоко", "банан", "апельсин"];

fruits[1] = "киви"; // Заменяем "банан" на "киви"

console.log(fruits); // Вывод: ["яблоко", "киви", "апельсин"]

Основные методы массивов

JavaScript предоставляет множество встроенных методов для работы с массивами. Вот некоторые из наиболее часто используемых:

push(element): Добавляет элемент в конец массива.
pop(): Удаляет и возвращает последний элемент массива.
shift(): Удаляет и возвращает первый элемент массива.
unshift(element): Добавляет элемент в начало массива.
length: Возвращает длину массива (количество элементов).

let numbers = [1, 2, 3];

numbers.push(4); // Добавляем 4 в конец массива
console.log(numbers); // Вывод: [1, 2, 3, 4]

numbers.pop(); // Удаляем последний элемент (4)
console.log(numbers); // Вывод: [1, 2, 3]

numbers.unshift(0); // Добавляем 0 в начало массива
console.log(numbers); // Вывод: [0, 1, 2, 3]

numbers.shift(); // Удаляем первый элемент (0)
console.log(numbers); // Вывод: [1, 2, 3]

console.log(numbers.length); // Вывод: 3

Жизненный пример

Массивы широко используются в веб-разработке. Например, при создании списка дел (todo list). Каждая задача в списке дел может быть представлена как элемент массива. При добавлении новой задачи, она добавляется в массив. При удалении задачи, она удаляется из массива.

Например, фреймворк React активно использует массивы для управления списком компонентов, которые нужно отобразить на странице. Vue.js также использует массивы для хранения данных и рендеринга списков.

Ключевые моменты

Массивы - это упорядоченные коллекции элементов.
Доступ к элементам осуществляется по индексу, начиная с 0.
Элементы массива могут быть любого типа.
JavaScript предоставляет множество встроенных методов для работы с массивами (push, pop, shift, unshift, length и другие).
Массивы широко используются в веб-разработке для хранения и обработки данных.

## Интерактивный пример

<Playground client:load
  template="static"
  files={{
    "/index.html": `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body { background: #1e1e2e; color: #cdd6f4; font-family: sans-serif; padding: 20px; margin: 0; }
    button { background: #89b4fa; color: #1e1e2e; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; margin: 4px; font-size: 14px; }
    button:hover { background: #74c7ec; }
    .box { background: #313244; border-radius: 8px; padding: 16px; margin: 10px 0; }
    .output { background: #181825; border-radius: 6px; padding: 12px; font-family: monospace; font-size: 13px; min-height: 40px; color: #a6e3a1; word-break: break-all; }
    input { background: #313244; color: #cdd6f4; border: 1px solid #45475a; padding: 6px 10px; border-radius: 4px; font-size: 14px; width: 120px; }
    label { font-size: 13px; color: #a6adc8; margin-right: 8px; }
    h3 { margin: 0 0 10px; font-size: 15px; color: #cba6f7; }
    .section { margin-bottom: 12px; }
    .result-label { font-size: 12px; color: #a6adc8; margin-bottom: 4px; }
    .tag { display: inline-block; background: #45475a; border-radius: 4px; padding: 2px 7px; margin: 2px; font-family: monospace; font-size: 13px; }
  </style>
</head>
<body>
  <h3>Методы массивов — интерактивный тренажёр</h3>
  <div class="box section">
    <div class="result-label">Текущий массив:</div>
    <div class="output" id="arrDisplay"></div>
  </div>
  <div class="box section">
    <label>Значение:</label>
    <input id="valInput" type="text" value="42" />
    <button onclick="doPush()">push()</button>
    <button onclick="doUnshift()">unshift()</button>
    <button onclick="doPop()">pop()</button>
    <button onclick="doShift()">shift()</button>
  </div>
  <div class="box section">
    <button onclick="doMap()">map(x => x * 2)</button>
    <button onclick="doFilter()">filter(x => x > 3)</button>
    <button onclick="doReduce()">reduce (сумма)</button>
    <button onclick="doSort()">sort()</button>
    <button onclick="doReverse()">reverse()</button>
    <button onclick="doReset()">↺ Сброс</button>
  </div>
  <div class="box section">
    <div class="result-label">Результат последней операции:</div>
    <div class="output" id="result" style="color:#f9e2af">—</div>
  </div>
  <script>
    let arr = [1, 2, 3, 4, 5];
    function render() {
      document.getElementById('arrDisplay').textContent = JSON.stringify(arr);
    }
    function setResult(msg) {
      document.getElementById('result').textContent = msg;
    }
    function getVal() {
      const v = document.getElementById('valInput').value;
      return isNaN(v) ? v : Number(v);
    }
    function doPush() { const v = getVal(); arr.push(v); setResult('push(' + v + ') → длина: ' + arr.length); render(); }
    function doUnshift() { const v = getVal(); arr.unshift(v); setResult('unshift(' + v + ') → длина: ' + arr.length); render(); }
    function doPop() { const v = arr.pop(); setResult('pop() → удалён: ' + v); render(); }
    function doShift() { const v = arr.shift(); setResult('shift() → удалён: ' + v); render(); }
    function doMap() { const r = arr.map(x => x * 2); setResult('map(x => x*2) → ' + JSON.stringify(r) + ' (исходный не изменён)'); }
    function doFilter() { const r = arr.filter(x => x > 3); setResult('filter(x > 3) → ' + JSON.stringify(r)); }
    function doReduce() { const r = arr.reduce((acc, x) => acc + x, 0); setResult('reduce(сумма) → ' + r); }
    function doSort() { arr.sort((a, b) => a - b); setResult('sort() — массив отсортирован'); render(); }
    function doReverse() { arr.reverse(); setResult('reverse() — массив развёрнут'); render(); }
    function doReset() { arr = [1, 2, 3, 4, 5]; setResult('Массив сброшен'); render(); }
    render();
  </script>
</body>
</html>`,
  }}
/>