EvolCode
треки/С нуля·06 / 11
6 мин чтения

Массивы — список с индексами

Массив — самый частый тип данных в программировании. Список товаров, список пользователей, список задач. ИИ постоянно генерирует код с массивами — нужно знать как они устроены изнутри.

Массив = список с номерами

Массив — это упорядоченный список значений. У каждого элемента есть номер (индекс), начиная с НУЛЯ. Если в массиве 5 элементов — индексы 0, 1, 2, 3, 4. Доступ: arr[0]. Длина: arr.length. Последний элемент:

$ arr[arr.length - 1]

или короче arr.at(-1).

Главные операции

Добавить в конец: arr.push(item). Удалить с конца: arr.pop(). Добавить в начало: arr.unshift(item) (медленно — двигает все остальные). Удалить из начала: arr.shift(). Найти индекс: arr.indexOf(item) (вернёт -1 если нет). Проверить наличие: arr.includes(item). Срез: arr.slice(start, end) — НЕ меняет оригинал, возвращает копию.

Перебор

Старый стиль:

$ for (let i = 0; i < arr.length; i++) { ... arr[i] ... }

Современный для каждого элемента:

$ for (const item of arr) { ... item ... }

Если нужен и индекс —

$ arr.forEach((item, i) => ...)

ИИ часто пишет for-of или forEach — их и читай в первую очередь.

Изменчивость — главная ловушка

push, pop, splice, sort — МЕНЯЮТ исходный массив. slice, map, filter, concat, [...arr] — возвращают НОВЫЙ массив, оригинал не трогают. В React и других реактивных штуках это критично: меняешь массив через push — компонент НЕ обновится, нужно сделать новый массив.

примерjavascript
const товары = ['яблоко', 'хлеб', 'молоко'];

// Доступ
console.log(товары[0]);             // 'яблоко'
console.log(товары.length);          // 3
console.log(товары.at(-1));          // 'молоко' — последний

// Изменение
товары.push('сыр');                  // в конец
товары.unshift('масло');             // в начало
const последний = товары.pop();      // достать с конца + удалить

// Поиск
console.log(товары.indexOf('хлеб')); // 2 (или -1 если нет)
console.log(товары.includes('сыр')); // true

// Перебор — три способа
for (const t of товары) {
  console.log(t);                    // только значение
}

товары.forEach((t, i) => {
  console.log(i + ':', t);           // значение + индекс
});

for (let i = 0; i < товары.length; i++) {
  console.log(товары[i]);            // старый стиль
}

// Копия vs мутация (часто ловушка)
const копия = [...товары];           // новый массив
const другая_копия = товары.slice(); // тоже новый

товары.sort();                       // меняет товары
const отсортированные = [...товары].sort(); // не меняет

Главные операции с массивами в одном файле

главное
  • 01Индексы стартуют с НУЛЯ, последний = length - 1 или .at(-1)
  • 02push/pop в конец — быстро, unshift/shift в начало — медленно
  • 03for...of — современный способ перебора, видишь в AI-коде чаще всего
  • 04push/pop/splice/sort МЕНЯЮТ массив, slice/map/filter возвращают НОВЫЙ
  • 05В React всегда создавай НОВЫЙ массив через [...arr] или filter, иначе UI не обновится
  • 06includes vs indexOf: includes даёт булево, indexOf — позицию
проверь себя
01Что вернёт `[10, 20, 30].at(-1)`?
02В чём разница между arr.slice() и arr.splice()?
03В React state — массив. Хочешь добавить элемент. Что НЕ сработает?
следующий урок: Объекты — пары ключ-значение