Как работать с массивом?

Работа с массивами в JavaScript

Массивы - это один из фундаментальных типов данных в JavaScript. Знание методов работы с массивами критически важно для эффективной разработки фронтенда. Рассмотрим все основные способы.

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

// Создание массива
const arr1 = [1, 2, 3];
const arr2 = new Array(3); // [undefined, undefined, undefined]
const arr3 = Array.from({length: 3}, (_, i) => i + 1); // [1, 2, 3]

// Длина массива
console.log(arr1.length); // 3

// Доступ к элементам
console.log(arr1[0]); // 1
console.log(arr1.at(-1)); // 3 (последний элемент)

// Проверка это ли массив
Array.isArray([1, 2, 3]); // true

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

const arr = [1, 2, 3];

// МУТИРУЮЩИЕ методы (меняют исходный массив)

// push - добавить в конец
arr.push(4, 5); // arr = [1, 2, 3, 4, 5]

// unshift - добавить в начало
arr.unshift(0); // arr = [0, 1, 2, 3, 4, 5]

// pop - удалить последний
const last = arr.pop(); // arr = [0, 1, 2, 3, 4], last = 5

// shift - удалить первый
const first = arr.shift(); // arr = [1, 2, 3, 4], first = 0

// splice - добавить/удалить в позиции
arr.splice(2, 1); // удалить 1 элемент с позиции 2
arr.splice(2, 0, 'new'); // добавить 'new' в позицию 2

// =============================================

// НЕ МУТИРУЮЩИЕ методы (создают новый массив)

// spread оператор
const arr2 = [1, 2, 3];
const arr3 = [...arr2, 4, 5]; // [1, 2, 3, 4, 5]
const arr4 = [0, ...arr2]; // [0, 1, 2, 3]

// concat
const arr5 = arr2.concat(4, 5); // [1, 2, 3, 4, 5]
const arr6 = arr2.concat([4, 5]); // [1, 2, 3, 4, 5]

// slice - копия части массива
const arr7 = arr2.slice(1, 3); // [2, 3]
const arr8 = arr2.slice(); // полная копия

3. Преобразование массива (map, filter, reduce)

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

const product = numbers.reduce((acc, n) => acc * n, 1);
// 120

// Сложный пример с reduce
const grouped = numbers.reduce((acc, n) => {
  const key = n % 2 === 0 ? 'even' : 'odd';
  return { ...acc, [key]: [...(acc[key] || []), n] };
}, {});
// { even: [2, 4], odd: [1, 3, 5] }

4. Поиск и проверка элементов

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

// find - найти первый элемент подходящий условию
const found = arr.find(n => n > 3); // 4

// findIndex - найти индекс
const index = arr.findIndex(n => n > 3); // 3

// some - проверить есть ли хотя бы один
const hasEven = arr.some(n => n % 2 === 0); // true

// every - проверить все ли соответствуют условию
const allEven = arr.every(n => n % 2 === 0); // false

// includes - проверить наличие
const has2 = arr.includes(2); // true

// indexOf - найти индекс первого вхождения
const idx = arr.indexOf(2); // 1

// lastIndexOf - найти индекс последнего вхождения
const lastIdx = arr.lastIndexOf(2); // 5

5. Сортировка и реверс

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

// МУТИРУЮЩИЕ
arr.reverse(); // [6, 2, 9, 5, 1, 4, 1, 3]
arr.sort(); // [1, 1, 2, 3, 4, 5, 6, 9] (сортирует как строки!)

// Правильная сортировка чисел
arr.sort((a, b) => a - b); // по возрастанию
arr.sort((a, b) => b - a); // по убыванию

// Сортировка объектов
const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 }
];

users.sort((a, b) => a.age - b.age);
// По имени (с локализацией):
users.sort((a, b) => a.name.localeCompare(b.name));

// НЕ МУТИРУЮЩИЕ
const sorted = [...arr].sort((a, b) => a - b);
const reversed = arr.reverse(); // берет копию

6. Объединение и разделение

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

// join - объединить в строку
const str = arr.join('-'); // 'a-b-c'

// split - разделить строку
const chars = 'a-b-c'.split('-'); // ['a', 'b', 'c']

// flatMap - map + flatten
const matrix = [[1, 2], [3, 4], [5, 6]];
const flat = matrix.flatMap(row => row); // [1, 2, 3, 4, 5, 6]

// flat - раскрыть вложенные массивы
const nested = [1, [2, [3, [4]]], 5];
const flattened = nested.flat(Infinity); // [1, 2, 3, 4, 5]

// forEach - перебрать каждый элемент
arr.forEach((item, index) => {
  console.log(`${index}: ${item}`);
});

7. Практические паттерны

const users = [
  { id: 1, name: 'Alice', role: 'admin' },
  { id: 2, name: 'Bob', role: 'user' },
  { id: 3, name: 'Charlie', role: 'user' },
  { id: 4, name: 'David', role: 'admin' }
];

// 1. Фильтр + Map (получить имена админов)
const adminNames = users
  .filter(u => u.role === 'admin')
  .map(u => u.name);
// ['Alice', 'David']

// 2. Группировка по свойству
const byRole = users.reduce((acc, user) => {
  return {
    ...acc,
    [user.role]: [...(acc[user.role] || []), user]
  };
}, {});
// { admin: [...], user: [...] }

// 3. Создание Map (id -> user)
const usersMap = new Map(users.map(u => [u.id, u]));
const user = usersMap.get(2); // Bob

// 4. Уникальные элементы
const ids = [1, 2, 2, 3, 3, 3];
const unique = [...new Set(ids)]; // [1, 2, 3]

// 5. Слияние и дедупликация
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const merged = [...new Set([...arr1, ...arr2])];
// [1, 2, 3, 4, 5]

// 6. Разбиение на chunks
const chunkArray = (arr, size) => {
  const chunks = [];
  for (let i = 0; i < arr.length; i += size) {
    chunks.push(arr.slice(i, i + size));
  }
  return chunks;
};
const chunked = chunkArray([1, 2, 3, 4, 5], 2);
// [[1, 2], [3, 4], [5]]

8. Работа с типизацией в TypeScript

// Типизирование массива
const numbers: number[] = [1, 2, 3];
const strings: Array<string> = ['a', 'b', 'c'];

interface User {
  id: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

// Массив может быть readonly
const readonlyArray: readonly number[] = [1, 2, 3];
// readonlyArray.push(4); // Ошибка!

// Кортежи (fixed-length массивы с типами)
const tuple: [string, number, boolean] = ['hello', 42, true];
const [str, num, bool] = tuple; // деструктуризация

9. Лучшие практики

// ПЛОХО: мутировать исходный массив
const arr = [1, 2, 3];
arr.push(4); // изменяем исходный

// ХОРОШО: создать новый
const newArr = [...arr, 4];

// ПЛОХО: для простых операций используй мап
const result = [];
for (const item of arr) {
  result.push(item * 2);
}

// ХОРОШО: используй встроенные методы
const result = arr.map(item => item * 2);

// ПЛОХО: очень сложный reduce
const total = arr.reduce((sum, item) => sum + item.price * item.quantity, 0);

// ХОРОШО: разбей на понятные части
const itemCosts = arr.map(item => item.price * item.quantity);
const total = itemCosts.reduce((sum, cost) => sum + cost, 0);

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

// Для больших массивов:

// forEach быстрее map если не нужен результат
largeArray.forEach(item => processItem(item));

// for loop быстрее всех
for (let i = 0; i < largeArray.length; i++) {
  processItem(largeArray[i]);
}

// Избегай вложенных фильтров/map
// Плохо:
arr.filter(...).map(...).filter(...).map(...)

// Хорошо: один проход
arr.reduce((acc, item) => {
  if (condition1) {
    acc.push(transform(item));
  }
  return acc;
}, []);

Железо и эффективность работы с массивами - ключ к написанию быстрого и чистого JavaScript кода.