Что такое Array?

Что такое Array

Array (массив) — это упорядоченная коллекция элементов, которые хранятся под одним именем и доступны по числовому индексу. Array является фундаментальной структурой данных в JavaScript и используется повсеместно при разработке приложений.

Основные характеристики Array

1. Индексированная коллекция — каждый элемент имеет числовой индекс (начинается с 0)
2. Динамический размер — можно добавлять и удалять элементы
3. Мутабельность — элементы можно изменять
4. Гетерогенные элементы — может содержать элементы разных типов
5. Object в основе — Array это специальный тип Object

Создание Array

// Литеральная нотация
const fruits = ["яблоко", "банан", "апельсин"];

// Конструктор Array
const numbers = new Array(1, 2, 3, 4, 5);

// Пустой массив
const empty = [];

// Массив определенного размера (заполнен undefined)
const sized = new Array(3); // [undefined, undefined, undefined]

// Массив с разными типами
const mixed = [42, "text", true, null, { key: "value" }, [1, 2, 3]];

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

const arr = ["a", "b", "c", "d", "e"];

// По индексу
console.log(arr[0]); // "a"
console.log(arr[2]); // "c"
console.log(arr[-1]); // undefined (нет отрицательных индексов)

// Свойство length
console.log(arr.length); // 5

// Последний элемент
console.log(arr[arr.length - 1]); // "e"

Array это Object

Много разработчиков не знают, что Array это на самом деле специальный Object с числовыми ключами и свойством length:

const arr = ["a", "b", "c"];

console.log(typeof arr); // "object"
console.log(Array.isArray(arr)); // true

// Array это Object с особенностями
console.log(arr["0"]); // "a" — ключи преобразуются в строки
console.log(Object.keys(arr)); // ["0", "1", "2"]

// Можно добавлять свойства
arr.customProperty = "value";
console.log(arr.customProperty); // "value"
console.log(arr.length); // 3 — не меняется!

Основные методы Array

Методы преобразования

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

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

// filter — выбирает элементы по условию
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

// reduce — агрегирует элементы в одно значение
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

// flatMap — комбинирует map и flatten
const result = [1, 2, 3].flatMap(n => [n, n * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]

Методы поиска

const arr = [10, 20, 30, 40, 50];

// find — первый элемент, удовлетворяющий условию
const found = arr.find(n => n > 25);
console.log(found); // 30

// findIndex — индекс первого найденного элемента
const index = arr.findIndex(n => n > 25);
console.log(index); // 2

// includes — проверяет наличие элемента
console.log(arr.includes(30)); // true

// indexOf — индекс элемента
console.log(arr.indexOf(30)); // 2

Методы изменения (мутирующие)

const arr = [1, 2, 3];

// push — добавляет элементы в конец
arr.push(4); // arr = [1, 2, 3, 4]

// pop — удаляет последний элемент
arr.pop(); // arr = [1, 2, 3], возвращает 3

// unshift — добавляет элементы в начало
arr.unshift(0); // arr = [0, 1, 2, 3]

// shift — удаляет первый элемент
arr.shift(); // arr = [1, 2, 3], возвращает 1

// splice — удаляет/добавляет элементы
arr.splice(1, 1, "a", "b"); // arr = [1, "a", "b", 3]

// sort — сортирует
arr.sort((a, b) => a - b);

// reverse — разворачивает
arr.reverse();

Методы слияния

const arr1 = [1, 2];
const arr2 = [3, 4];

// concat — создает новый массив
const merged = arr1.concat(arr2);
console.log(merged); // [1, 2, 3, 4]

// spread operator — современный способ
const merged2 = [...arr1, ...arr2];
console.log(merged2); // [1, 2, 3, 4]

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

Важная разница: мутирующие и немутирующие методы

const arr = [1, 2, 3];

// МУТИРУЮЩИЕ — изменяют исходный массив
arr.push(4); // arr теперь [1, 2, 3, 4]
arr.sort(); // arr изменился

// НЕМУТИРУЮЩИЕ — создают новый массив
const newArr = arr.map(x => x * 2); // arr не изменился
const filtered = arr.filter(x => x > 1); // arr не изменился

Это критически важно при работе с React и функциональным программированием!

Array deconstructuring

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

// Пропуск элементов
const [a, , c] = [1, 2, 3];
console.log(a, c); // 1, 3

Array-like objects

Некоторые объекты "похожи" на массивы (есть length и числовые индексы), но не являются массивами:

function test() {
  console.log(Array.isArray(arguments)); // false
  console.log(arguments.length); // количество аргументов
  
  // Преобразуем в настоящий массив
  const arr = Array.from(arguments);
  console.log(Array.isArray(arr)); // true
}

// NodeList тоже array-like
const elements = document.querySelectorAll("div");
const arr = Array.from(elements);

Производительность

// Избегайте частых splice в начале массива — O(n)
const arr = [1, 2, 3, 4, 5];
arr.splice(0, 1); // медленно для больших массивов

// Используйте slice для создания копии
const copy = arr.slice();

// Или spread
const copy2 = [...arr];

Практический пример: работа с данными

const users = [
  { id: 1, name: "Иван", age: 25 },
  { id: 2, name: "Мария", age: 30 },
  { id: 3, name: "Петр", age: 28 }
];

// Найти пользователя
const user = users.find(u => u.id === 2);

// Получить имена
const names = users.map(u => u.name);

// Отфильтровать
const adults = users.filter(u => u.age >= 25);

// Отсортировать
const sorted = users.sort((a, b) => a.age - b.age);

// Получить сумму возрастов
const totalAge = users.reduce((sum, u) => sum + u.age, 0);

Заключение

Array — это мощный и гибкий инструмент в JavaScript. Понимание его методов и особенностей критически важно для эффективной разработки. Современный JavaScript предполагает работу с массивами через функциональные методы (map, filter, reduce), а не через мутирующие операции.