Массивы и объекты — это хлеб и масло любого JavaScript-разработчика. Без них не построить ни одну программу. Но умеете ли вы управляться с ними так, чтобы код был чистым, быстрым и понятным? В этой статье разберём основные приёмы манипуляции, которые сэкономят вам часы отладки.

Digital-студия WNDER

Массивы: не просто список, а мощный инструмент

Массив — это упорядоченная коллекция. Вроде списка покупок. Но в JavaScript массивы умеют творить чудеса. Забудьте про циклы for — есть методы поинтереснее.

Начнём с простого: добавление и удаление элементов. push() и pop() работают с концом массива, unshift() и shift() — с началом. Но это скучно. Давайте о том, что реально экономит время.

Метод map() — создаёт новый массив, преобразуя каждый элемент. Например, умножить все числа на два:

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

Метод filter() — оставляет только те элементы, которые прошли проверку. Как фильтр для кофе:

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(n => n % 2 === 0);
console.log(even); // [2, 4]

Метод reduce() — сворачивает массив в одно значение. Самый мощный и самый непонятный для новичков. Считаем сумму всех элементов:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

Эти три метода — основа функционального стиля. Они не меняют исходный массив, а возвращают новый. Это важно для предсказуемости кода.

Объекты: ключи, значения и хитрости доступа

Объект — это коллекция пар «ключ-значение». Как анкета: имя, возраст, город. В JavaScript объекты повсюду: от конфигураций до DOM-элементов.

Создать объект просто: const user = { name: 'Alice', age: 30 };. Доступ к свойствам — через точку или квадратные скобки. Но есть нюансы.

  • Если ключ — переменная, используйте obj[key].
  • Проверить наличие свойства: 'name' in user или user.hasOwnProperty('name').
  • Удалить свойство: delete user.age.

Перебор свойств: Object.keys(), Object.values(), Object.entries(). Последний возвращает массив пар [ключ, значение]. Удобно для преобразований.

const user = { name: 'Alice', age: 30 };
Object.entries(user).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
// name: Alice
// age: 30

Копирование объектов — отдельная боль. Простое присваивание копирует ссылку. Чтобы сделать поверхностную копию, используйте Object.assign({}, obj) или спред-оператор {...obj}. Для глубокой копии нужен либо рекурсивный обход, либо structuredClone() (современный метод).

Слияние, сортировка и поиск: практические приёмы

Часто нужно объединить массивы или объекты. Для массивов есть concat() и спред [...arr1, ...arr2]. Для объектов — Object.assign() или {...obj1, ...obj2}. Помните: при слиянии объектов свойства с одинаковыми ключами перезаписываются последним.

Сортировка массива: sort() по умолчанию сортирует как строки. Для чисел передавайте компаратор:

const nums = [10, 2, 5];
nums.sort((a, b) => a - b); // [2, 5, 10]

Поиск элемента: indexOf(), includes(), find(), findIndex(). Для объектов используйте find() с условием.

Преобразование массива объектов в объект по ключу — частая задача. Например, есть массив пользователей, нужно сделать объект, где ключ — id. Поможет reduce():

const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
const usersById = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});
console.log(usersById); // { '1': {id:1, name:'Alice'}, '2': {id:2, name:'Bob'} }

Лайфхаки и правила, которые спасут ваш код

Правило: Никогда не мутируйте исходные данные без необходимости. Методы вроде push, splice, sort меняют массив. Если нужно сохранить оригинал, используйте slice() или спред для копии.

Вот ещё несколько полезных приёмов:

  • Деструктуризация массивов и объектов упрощает извлечение значений: const [first, ...rest] = arr;
  • Опциональная цепочка ?. безопасно обращается к вложенным свойствам: user?.address?.city.
  • Для проверки, что массив пуст: arr.length === 0.
  • Чтобы создать массив заданной длины с заполнением: Array(5).fill(0).

Сравнение популярных методов для перебора массива:

Метод Возвращает Мутирует Когда использовать
forEachundefinedНетПросто выполнить действие для каждого
mapНовый массивНетПреобразовать каждый элемент
filterНовый массивНетОтфильтровать по условию
reduceОдно значениеНетСвернуть в одно значение (сумма, объект и т.д.)
findЭлемент или undefinedНетНайти первый подходящий

Для объектов часто используют Object.freeze(), чтобы запретить изменения. Но помните: это поверхностная заморозка. Вложенные объекты остаются изменяемыми.

Что в итоге?

Массивы и объекты — это фундамент JavaScript. Освоив методы map, filter, reduce и понимая, как работают ссылки и копирование, вы будете писать меньше кода и меньше ошибаться. Не бойтесь экспериментировать, но всегда помните о мутациях. И не забывайте про современные возможности вроде спред-оператора и деструктуризации — они делают код чище.

Практикуйтесь на реальных задачах: преобразуйте данные из API, группируйте, сортируйте. И тогда массивы с объектами станут вашими лучшими друзьями, а не головной болью.

Студия WNDER