JS массивы основы

Массив в JavaScript — упорядоченная коллекция значений любых типов, доступ к элементам которой осуществляется по числовому индексу.

Зачем нужно

Массивы — самая распространённая структура данных в JavaScript. Они используются для хранения списков, очередей, стеков, результатов запросов к API. Богатый встроенный API (map, filter, reduce, find, sort) позволяет обрабатывать данные декларативно без написания ручных циклов. Понимание работы массивов необходимо для любой front-end или back-end разработки.

Где используется

  • Списки товаров, пользователей, сообщений в интерфейсах
  • Результаты API-запросов: fetch.then(res => res.json()) возвращает массив
  • Очереди задач, стеки навигации, история действий
  • Трансформация и фильтрация данных перед отображением
  • Алгоритмы: сортировка, поиск, агрегация

Основной контент

Создание и базовые операции

// Создание
const fruits = ['яблоко', 'банан', 'вишня'];
const nums = new Array(3).fill(0); // [0, 0, 0]
const range = Array.from({ length: 5 }, (_, i) => i + 1); // [1,2,3,4,5]

// Доступ и изменение
console.log(fruits[0]);     // 'яблоко'
console.log(fruits.at(-1)); // 'вишня' (с конца, ES2022)
fruits[1] = 'груша';

// Длина
console.log(fruits.length); // 3

Добавление и удаление элементов

const arr = [1, 2, 3];

// В конец / из конца
arr.push(4);       // [1, 2, 3, 4]
arr.pop();         // [1, 2, 3]

// В начало / из начала (медленнее push/pop — сдвигает все элементы)
arr.unshift(0);    // [0, 1, 2, 3]
arr.shift();       // [1, 2, 3]

// splice — добавление/удаление в произвольном месте
arr.splice(1, 1, 99); // удаляем 1 элемент с индекса 1, вставляем 99
console.log(arr);     // [1, 99, 3]

Трансформация (не мутируют оригинал)

const numbers = [1, 2, 3, 4, 5];

// map — преобразование каждого элемента
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]

// filter — фильтрация
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce — свёртка в одно значение
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15

// flat — разворачивание вложенных массивов
const nested = [1, [2, [3, [4]]]];
console.log(nested.flat());    // [1, 2, [3, [4]]]
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]

// flatMap — map + flat(1)
const sentences = ['hello world', 'foo bar'];
console.log(sentences.flatMap(s => s.split(' '))); // ['hello','world','foo','bar']

Поиск

const users = [
  { id: 1, name: 'Иван' },
  { id: 2, name: 'Мария' },
  { id: 3, name: 'Пётр' }
];

// find — первый подходящий элемент
const user = users.find(u => u.id === 2); // { id: 2, name: 'Мария' }

// findIndex — индекс первого подходящего
const idx = users.findIndex(u => u.name === 'Пётр'); // 2

// some / every — проверка условия
console.log(users.some(u => u.id > 2));  // true
console.log(users.every(u => u.id > 0)); // true

// includes — наличие примитива
console.log([1, 2, 3].includes(2)); // true

Сортировка и копирование

const nums = [3, 1, 4, 1, 5, 9, 2, 6];

// sort мутирует массив! Компаратор обязателен для чисел
const sorted = [...nums].sort((a, b) => a - b);
console.log(sorted); // [1, 1, 2, 3, 4, 5, 6, 9]

// toSorted (ES2023) — не мутирует
const sorted2 = nums.toSorted((a, b) => a - b);

// slice — срез (не мутирует)
console.log(nums.slice(1, 3)); // [1, 4]

// concat — объединение (не мутирует)
const a = [1, 2];
const b = [3, 4];
console.log([...a, ...b]); // [1, 2, 3, 4] — spread предпочтительнее

Частые ошибки

  • sort без компаратора: числа сортируются как строки — [10, 9, 2].sort() даёт [10, 2, 9]. Всегда передавайте (a, b) => a - b.
  • Мутация через splice, sort, push вместо создания копии: при работе с state (React, Vue) нужно возвращать новый массив, иначе изменения не обнаруживаются.
  • indexOf vs includes для NaN: [NaN].indexOf(NaN) вернёт -1, а [NaN].includes(NaN) — true.
  • Пустые слоты: new Array(3) создаёт массив с «дырками», а не с undefined — map/filter пропускают их.

Связанные темы

Ресурсы

⚡ Источник: How to get maximum performance when working with JS arrays · AsForJS

  • 📅 2021-11-29 · YouTube
  • Тезисы:
    • V8 хранит массивы в нескольких внутренних формах: PACKED_SMI_ELEMENTS, PACKED_DOUBLE_ELEMENTS, PACKED_ELEMENTS, HOLEY_*
    • Переход от PACKED к HOLEY — необратим: один delete arr[5] навсегда демотает массив в HOLEY
    • SMI (Small Integer, 31 бит) — самая быстрая форма. Добавление double → переход в DOUBLE
    • new Array(1000) создаёт HOLEY сразу — медленнее чем `` с push'ом

⚡ Источник: Производительность JavaScript Array в V8 ⎡perf5⎦ · AsForJS

  • 📅 2024-04-06 · YouTube
  • Тезисы: глубокий разбор Element Kinds Transitions в V8. Дырки (holes) убивают inline cache. Array.from({length: n}) и new Array(n).fill дают разные shapes

⚡ Источник: Разбор вопроса из Telegram о Array Double vs Array SMI · AsForJS

  • 📅 2023-06-23 · YouTube
  • Тезисы: добавление 0.5 в массив целых чисел переводит весь массив в double — даже если оставшиеся числа целые

⚡ Источник: JavaScript Array и значения по умолчанию · AsForJS

  • 📅 2023-05-28 · YouTube
  • Тезисы: new Array(3) ≠ [undefined, undefined, undefined]. Это разреженный массив с holes. Array.prototype.map пропускает holes, а for — нет

⚡ Источник: Производительность for, forEach и reduce · AsForJS

  • 📅 2026-04-14 · YouTube
  • Тезисы: for быстрее forEach/reduce потому что не требует вызова callback на каждый элемент. Но разница важна только на больших массивах (>10⁵)

⚡ Источник: Сравнение JavaScript Array метода reduce с for statement · AsForJS

  • 📅 2024-04-10 · YouTube
  • Тезисы: в V8 reduce оптимизируется хуже из-за необходимости создавать closure для аккумулятора

⚡ Источник: Code Review Array.from и два вложенных for · AsForJS

  • 📅 2025-11-12 · YouTube
  • Тезисы: Array.from(arr, mapFn) эффективнее цепочки arr.map.filter — один проход вместо двух

⚡ Источник: Остерегайся удара Зюзькой - Дональд Кнут 1972 год · AsForJS

  • 📅 2021-04-13 · YouTube
  • Тезисы: premature optimization. Цитата Кнута применяется к JS — сначала измерь, потом оптимизируй массивы

⚡ Источник: Практика и теория сложности алгоритмов в JS · AsForJS

  • 📅 2025-07-18 · YouTube
  • Тезисы: в V8 push это O(1) амортизированно, unshift/shift это O(n). arr.length = 0 быстрее arr = если хотите сохранить shape

🎓 Источник: 💻 Массивы, объекты, классы, прототипы в JavaScript

  • 📅 2018-10-04 · YouTube
  • Тезисы: массив — это объект с числовыми ключами и специальной обработкой length. Все методы массива работают через [[Get]]/[[Set]] через индексы как строки