Если вы пишете на JavaScript больше недели, то уже заметили: без массивов и объектов никуда. Это как кухонный нож — вроде простой инструмент, но без него готовить невозможно. Но знаете ли вы все приёмы работы с ними? В этой статье разберём, как ловко управлять массивами и объектами, чтобы код стал чище, а вы — увереннее. Без лишней теории, только практика.

Digital-студия WNDER

Почему это важно

Массивы и объекты — это основа данных в JavaScript. Любой API, любая база данных, любая логика — всё это сводится к ним. Если вы научитесь манипулировать ими эффективно, вы сократите время разработки в разы. Но главное — вы перестанете бояться сложных структур данных и начнёте получать удовольствие от кода.

Представьте, что вы собираете чемодан в отпуск. Массив — это список вещей в порядке очереди. Объект — это чемодан с отделениями, где у каждой вещи есть своё место. Оба нужны, и оба можно использовать по-разному.

Основные методы массивов

Начнём с массивов. В JavaScript есть куча встроенных методов, которые экономят время. Вот самые полезные:

  • push() — добавляет элемент в конец.
  • pop() — удаляет последний элемент.
  • shift() — удаляет первый элемент.
  • unshift() — добавляет элемент в начало.
  • map() — создаёт новый массив, преобразуя каждый элемент.
  • filter() — отбирает элементы по условию.
  • reduce() — сводит массив к одному значению.
  • forEach() — просто выполняет функцию для каждого элемента.

Например, если нужно удвоить все числа в массиве, можно сделать так:

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

А если нужно оставить только чётные числа — фильтруем:

const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

Видите, как просто? Никаких циклов, всё читается как обычный текст.

Работа с объектами

Объекты — это хранилища ключ-значение. Они удобны для описания сущностей: пользователь, товар, заказ. Вот как с ними работать:

const user = {
  name: 'Анна',
  age: 28,
  city: 'Москва'
};

// Получить значение
console.log(user.name); // Анна

// Добавить новое свойство
user.email = 'anna@example.com';

// Изменить значение
user.age = 29;

// Удалить свойство
delete user.city;

Но часто нужно перебрать все свойства объекта. Для этого есть несколько способов:

  • Object.keys() — возвращает массив ключей.
  • Object.values() — возвращает массив значений.
  • Object.entries() — возвращает массив пар [ключ, значение].

Пример:

const keys = Object.keys(user);
console.log(keys); // ['name', 'age', 'email']

const values = Object.values(user);
console.log(values); // ['Анна', 29, 'anna@example.com']

const entries = Object.entries(user);
console.log(entries); // [['name', 'Анна'], ['age', 29], ['email', 'anna@example.com']]

Это очень удобно, когда нужно, например, вывести все данные пользователя на страницу.

Вложенные структуры и деструктуризация

В реальной жизни данные редко бывают плоскими. Часто у нас есть массив объектов или объект с вложенными объектами. Например, список заказов:

const orders = [
  { id: 1, product: 'Ноутбук', price: 50000 },
  { id: 2, product: 'Мышь', price: 1500 },
  { id: 3, product: 'Клавиатура', price: 3000 }
];

Чтобы получить общую стоимость всех заказов, используем reduce:

const total = orders.reduce((sum, order) => sum + order.price, 0);
console.log(total); // 54500

А если нужно найти заказ по id — поможет find:

const order = orders.find(o => o.id === 2);
console.log(order); // { id: 2, product: 'Мышь', price: 1500 }

Теперь о деструктуризации. Это способ быстро извлечь значения из объекта или массива. Очень удобно:

const { name, age } = user;
console.log(name); // Анна
console.log(age); // 29

const [first, second] = orders;
console.log(first.product); // Ноутбук

Деструктуризация сокращает код и делает его понятнее. Особенно когда нужно передать несколько свойств в функцию.

Практические советы и лайфхаки

Теперь пара трюков, которые упростят жизнь.

Правило золотого массива: если вы пишете цикл for для обхода массива — стоп. Скорее всего, есть метод лучше. map, filter, reduce, forEach — выбирайте по задаче.

Ещё один лайфхак: клонирование объектов и массивов. Чтобы не менять оригинал, используйте спред-оператор:

const original = { a: 1, b: 2 };
const copy = { ...original };
copy.a = 10;
console.log(original.a); // 1 — оригинал не изменился

Для массивов аналогично:

const arr = [1, 2, 3];
const newArr = [...arr];
newArr.push(4);
console.log(arr); // [1, 2, 3] — без изменений

Но помните: спред делает поверхностное копирование. Если внутри объекта есть вложенные объекты, они будут скопированы по ссылке. Для глубокого клонирования используйте structuredClone или библиотеки типа lodash.

Сравнение методов: таблица

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

Что в итоге

Массивы и объекты — это не страшно. Главное — знать основные методы и не изобретать велосипед. Используйте map вместо циклов, filter для выборки, reduce для агрегации. С объектами работайте через Object.keys и деструктуризацию. Это сделает код чище и приятнее.

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

Студия WNDER