Методы массивов JS: шпаргалка с примерами

Методы массивов JS нужны, чтобы работать со списками данных: добавить элемент, удалить элемент, найти объект, отфильтровать строки, преобразовать массив карточек, посчитать сумму. Новичку не обязательно учить все методы сразу. Достаточно понять группы: изменение массива, поиск, фильтрация, преобразование и расчет результата

Содержание

Добавить и удалить элементы
Найти элемент в массиве
Отфильтровать список
Преобразовать элементы
Проверить условия
Посчитать итог через reduce
slice, splice и sort
Как выбрать метод
Что почитать дальше по JavaScript
Что почитать дальше по JavaScript

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

push добавляет элемент в конец массива, pop удаляет последний элемент. unshift добавляет в начало, shift удаляет первый элемент

const tasks = ["Позвонить клиенту", "Отправить счет"];

tasks.push("Проверить оплату");
console.log(tasks);

const lastTask = tasks.pop();
console.log(lastTask);

Эти методы изменяют исходный массив. Это нормально в простом скрипте, но в интерфейсах и фреймворках часто удобнее создавать новый массив, чтобы состояние обновлялось предсказуемо

Найти элемент в массиве

find возвращает первый подходящий элемент, findIndex возвращает его индекс, includes проверяет наличие простого значения

const users = [
  { id: 1, name: "Динар" },
  { id: 2, name: "Анна" }
];

const user = users.find((item) => item.id === 2);
console.log(user.name);

Если нужно найти объект по id, используйте find. Если нужно проверить, есть ли строка в списке, используйте includes

const roles = ["admin", "editor", "viewer"];

if (roles.includes("admin")) {
  console.log("Есть доступ");
}

Отфильтровать список

filter возвращает новый массив только с теми элементами, которые прошли условие

const orders = [
  { id: 1, status: "new", total: 1200 },
  { id: 2, status: "paid", total: 3400 },
  { id: 3, status: "paid", total: 900 }
];

const paidOrders = orders.filter((order) => order.status === "paid");
console.log(paidOrders);

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

Преобразовать элементы

map создает новый массив, где каждый элемент преобразован по вашему правилу

const prices = [1000, 2500, 4000];
const labels = prices.map((price) => `${price} ₽`);

console.log(labels);

В веб-интерфейсе map часто используют, чтобы превратить данные в HTML-строки или компоненты. Но если вы создаете DOM-элементы вручную, аккуратнее использовать forEach, потому что map должен возвращать новый массив, а не просто выполнять действие

Проверить условия

some отвечает на вопрос «есть ли хотя бы один подходящий элемент». every проверяет, подходят ли все элементы

const cart = [
  { title: "Курс", paid: true },
  { title: "Консультация", paid: false }
];

const hasUnpaid = cart.some((item) => !item.paid);
const allPaid = cart.every((item) => item.paid);

Эти методы хороши для проверок: есть ли ошибка, все ли поля заполнены, есть ли товар в корзине, все ли задачи завершены

Посчитать итог через reduce

reduce сворачивает массив в одно значение: сумму, объект, карту, строку, статистику

const ordersTotal = orders.reduce((sum, order) => {
  return sum + order.total;
}, 0);

console.log(ordersTotal);

Второй аргумент 0 — начальное значение. Его лучше не пропускать, особенно когда массив может быть пустым

slice, splice и sort

slice возвращает часть массива и не меняет оригинал. splice удаляет или вставляет элементы и меняет исходный массив. sort сортирует массив на месте, поэтому с ним нужно быть внимательным

const numbers = [10, 2, 30];

numbers.sort((a, b) => a - b);
console.log(numbers);

Без функции сравнения числа сортируются как строки, поэтому результат может удивить

Как выбрать метод

Если нужно пройтись и выполнить действие — forEach. Если нужен новый массив такой же длины — map. Если нужен новый массив короче — filter. Если нужен один найденный элемент — find. Если нужен итог — reduce. Если нужна проверка — some или every

Мини-задача: создайте массив заказов с полями id, status, total. Отфильтруйте оплаченные заказы, получите массив сумм через map, посчитайте общий итог через reduce и проверьте через some, есть ли заказ меньше 1000 рублей