Методы массивов
Добавление и поиск элементов, перебор, преобразование и фильтрация.
also in web development basics
Метод массива – готовая операция, которую вызывают после точки: fruits.push(...). Одни методы меняют исходный массив, другие возвращают новый результат.
Добавить или удалить элемент
| Метод | Действие | Что возвращает |
|---|---|---|
push(value) | Добавляет в конец | Новую длину массива |
pop() | Удаляет последний элемент | Удалённый элемент |
unshift(value) | Добавляет в начало | Новую длину массива |
shift() | Удаляет первый элемент | Удалённый элемент |
Эти четыре метода изменяют исходный массив. Названия можно запомнить по очередям: push и pop работают с концом, unshift и shift – с началом.
const queue = ["Анна", "Борис"];
queue.push("Вера"); // Добавили в конец.
const firstPerson = queue.shift(); // Забрали первого.
console.log(firstPerson); // "Анна"
console.log(queue); // ["Борис", "Вера"]Функция для каждого элемента
Методы forEach, map, filter, find и reduce принимают функцию. Функцию, которую передали другой функции, называют callback (функция обратного вызова): метод сам запускает её для элементов массива.
const numbers = [5, 4, 3];
numbers.forEach((number) => {
console.log(number);
});Callback-функция может получить не только элемент, но и его индекс. Например, второй параметр forEach - номер элемента, начиная с нуля:
const greetings = ["Привет", "Как дела?"];
greetings.forEach((greeting, index) => {
console.log(`${index + 1}. ${greeting}`);
});Выбирайте метод по результату задачи:
| Метод | Вопрос | Результат |
|---|---|---|
forEach | Что сделать с каждым элементом? | Не создаёт массив результата |
map | Во что преобразовать каждый элемент? | Новый массив той же длины |
filter | Какие элементы оставить? | Новый, возможно более короткий массив |
find | Какой первый элемент подходит? | Элемент или undefined |
reduce | Как собрать одно общее значение? | Например, число или объект |
const prices = [120, 250, 80];
const doubled = prices.map((price) => price * 2);
const expensive = prices.filter((price) => price >= 100);
const firstLarge = prices.find((price) => price >= 200);
const total = prices.reduce((sum, price) => sum + price, 0);
console.log(doubled); // [240, 500, 160]
console.log(expensive); // [120, 250]
console.log(firstLarge); // 250
console.log(total); // 450В reduce начальное значение 0 – это первый накопленный результат. Указание начального значения делает поведение понятнее и работает также для пустого массива.
В примере reduce первый параметр sum - уже накопленная сумма, второй price - очередная цена. Шаги такие: 0 + 120, затем 120 + 250, затем 370 + 80. В итоге получаем 450.
Если find не находит подходящий элемент, он возвращает undefined - значение JavaScript, означающее, что результата нет. В отличие от filter, find возвращает один первый элемент, а не новый список.
Если нужно получить новый список, не используйте forEach только потому, что его название знакомо. map преобразует, filter отбирает, а find останавливается на первом совпадении. Справочник всех методов: Array на MDN.