Map — для преобразования элементов массива
Это уже вторая статья о методах массивов JavaScript. Если вы пропустили первую статью, обязательно изучите ее, чтобы разобраться в основах.
Продолжаем разбирать самые полезные методы для работы с массивами. Я считаю, что лучшим способом понять работу любого метода является разбор его кода, а лучше написание своего. Это полезно как для понимания, так и для тренировки. И если говорить о преобразовании данных, то здесь нам идеально подойдет метод map.
Так какую задачу мы решаем? Предлагаю не усложнять. У нас есть массив объектов учеников школы с их именами и возрастом. Нам нужно на его основе создать новый массив, где каждый элемент будет строкой вида: «Имя: Оля, возраст: 17».
Пишем свою функцию myMap:
function myMap(array, fn) {
const result = [];
for (let i = 0; i < array.length; i++) {
result.push(fn(array[i], i, array));
}
return result;
}
const students = [
{ name: 'Оля', age: 17 },
{ name: 'Петя', age: 16 },
{ name: 'Анна', age: 18 },
{ name: 'Иван', age: 17 },
{ name: 'Мария', age: 16 }
];
const studentStrings = myMap(students, function(student) {
return `Имя: ${student.name}, возраст: ${student.age}`;
});
console.log(studentStrings);
Готово! Наша функция успешно решила задачу. Она принимает данные и callback-функцию. Далее применяет ее к каждому элементу исходного массива с помощью цикла. И в итоге возвращает новый список с результатами, не меняя старый. А главное — она универсальна. Ее можно применять к любому массиву под разные задачи.
Именно такую логику преобразования каждого элемента и создания нового массива и реализует стандартный метод map. Синтаксис становится гораздо лаконичнее, а суть остается той же. Смотрим:
const students = [
{ name: 'Оля', age: 17 },
{ name: 'Петя', age: 16 },
{ name: 'Анна', age: 18 },
{ name: 'Иван', age: 17 },
{ name: 'Мария', age: 16 }
];
const studentStrings = students.map(function(student) {
return `Имя: ${student.name}, возраст: ${student.age}`;
});
console.log(studentStrings);
Все просто и наглядно, согласны? Главное, исходный массив students остался неизменным, а мы получили новый массив studentStrings.
Теперь можно дать определение методу map.
map — это метод массива, который создает его новую копию, применяя переданную функцию к каждому элементу исходного массива.
Принимает: callback-функцию, вызываемую для каждого элемента.
Эта функция может принимать три аргумента:
currentValue— текущий обрабатываемый элемент;index(необязательно) — индекс этого элемента;array(необязательно) — исходный массив.
Возвращает: новый массив той же длины, состоящий из результатов вызова callback-функции на каждом элементе. Исходный массив не изменяется.
Используйте map, например, чтобы извлечь данные или изменить формат. Метод просто создаст видоизмененную копию исходного массива.
Filter — убрать лишнее и оставить нужное
Скажу сразу: фильтрация — одна из самых частых задач при работе с массивами. Если вам нужно отсеять элементы по какому-либо условию и получить новый массив только с подходящими, то метод filter — ваш лучший помощник. Кстати, его можно использовать даже для удаления конкретного элемента (но, об этом позже).
Как и в прошлый раз с map, лучший способ разобраться — это написать свою упрощенную версию. Давайте создадим функцию, которая отфильтрует несовершеннолетних пользователей. То есть оставит только тех, чей возраст ≥ 18 лет.
function myFilter(array, fn) {
const result = [];
for (let i = 0; i < array.length; i++) {
if (fn(array[i], i, array)) {
result.push(array[i]);
}
}
return result;
}
const users = [
{ name: "Оля", age: 17 },
{ name: "Петя", age: 20 },
{ name: "Анна", age: 15 },
{ name: "Иван", age: 18 },
{ name: "Мария", age: 22 },
];
const adultUsers = myFilter(users, function (user) {
return user.age >= 18;
});
console.log(adultUsers);
Отлично, наша функция работает. Она принимает массив и функцию-условие (callback-функцию). Далее проверяет каждый элемент этим условием, проходит по массиву и в итоге возвращает новый. В него попадут только те элементы, для которых условие вернуло true.
В общем, вся суть функции myFilter заключена в передаваемой функции-условии, ее еще называют предикатом. Именно она «решает» судьбу каждого элемента: пропустить его в новый массив или отфильтровать. Это позволяет гибко настраивать отбор под самые разные задачи.
Ну а теперь немного практики, заменим нашу самописную функцию на встроенный метод, который уже есть в JavaScript:
const users = [
{ name: "Оля", age: 17 },
{ name: "Петя", age: 20 },
{ name: "Анна", age: 15 },
{ name: "Иван", age: 18 },
{ name: "Мария", age: 22 },
];
const adultUsers = users.filter(function (user) {
return user.age >= 18;
});
console.log(adultUsers);
И все работает. Исходный массив users остался цел, а мы получили новый — adultUsers.
Кстати, для новичка такие конструкции с callback-функцией внутри метода могут сначала казаться немного громоздкими. Но не переживайте, это нормально. Чуть больше практики, и вы будете читать этот код как обычное предложение. А теперь перейдем к определению.
filter — это метод, который создает новую копию и содержит только те элементы исходного массива, для которых переданная функция-условие возвращает true.
Принимает: обязательный параметр callback-функцию (условие).
Эта функция вызывается для каждого элемента массива и может принимать три аргумента:
currentValue— текущий элемент;index(необязательно) — индекс этого элемента;array(необязательно) — исходный массив.
Возвращает: новый массив, состоящий только из элементов, прошедших проверку. Если ни один элемент не соответствует условию, возвращается пустой массив []. При этом исходный массив не изменяется.
Используйте filter, когда вам нужно отобрать элементы из массива по какому-либо признаку. Метод не меняет исходный массив, что гарантирует безопасность ваших данных. Он хорошо подходит для фильтрации списков товаров, пользователей или любых данных по условию.
Больше увлекательных материалов по JS:
Sort — сортировка элементов это просто
И так, пожалуй, это финальный босс. Именно метод сортировки сложнее всего дается на начальном этапе изучения (не считая reduce).
Сортировка в коде встречается гораздо чаще, чем можно подумать. И дело не только в каталогах интернет-магазинов. Любой список контактов, таблица с данными, даже комментарии по дате — везде нужна сортировка. И очень удобно, что в JavaScript для этого есть готовый встроенный метод.
Давайте сначала напишем свою упрощенную функцию сортировки, чтобы понять логику. Внимание, этот алгоритм будет сложнее предыдущих. Один из самых простых для понимания — «Сортировка пузырьком». Как он работает, можно посмотреть в моем видео, а мы опишем его кодом с помощью двух вложенных циклов. Кстати, алгоритмов сортировки много, и их самостоятельное изучение будет большим плюсом.
По аналогии с myMap и myFilter напишем функцию mySort, которая будет принимать массив и callback-функцию:
function mySort(array, fn) {
// Внешний цикл: проходит по всем элементам
for (let i = 0; i < array.length; i++) {
// Внутренний цикл: сравнивает соседние элементы
for (let j = 0; j < array.length - 1 - i; j++) {
// Если результат сравнения больше 0, меняем элементы местами
if (fn(array[j], array[j + 1]) > 0) {
const temp = array[j];
array[j] = array[j + 1];
array[j + 1] = temp;
}
}
}
return array;
}
const users = [
{ name: "Оля", age: 17 },
{ name: "Петя", age: 20 },
{ name: "Анна", age: 15 },
{ name: "Иван", age: 18 },
{ name: "Мария", age: 22 },
];
// Пример 1: Сортировка по возрасту (по возрастанию)
const sortedByAge = mySort([...users], function (a, b) {
return a.age - b.age; // Если результат > 0, элементы поменяются местами
});
// Пример 2: Сортировка по возрасту (по убыванию)
const sortedByAge2 = mySort([...users], function (a, b) {
return b.age - a.age; // Если результат > 0, элементы поменяются местами
});
console.log("По возрастанию", sortedByAge);
console.log("По убыванию", sortedByAge2);
Если коротко, то передаваемая callback-функция получает два элемента массива a и b. Затем функция возвращает число:
- меньше 0 — a должен быть перед b (элементы остаются как есть);
- больше 0 — a должен быть после b (элементы меняются местами);
- равно 0 — порядок не важен.
Для чисел чаще всего используют a – b (сортировка по возрастанию) или b – a (по убыванию). Таким образом, на основе результата выполнения этой функции в цикле принимается решение стоит менять элементы местами или нет.
Кстати, обратите внимание, для создания копии массива я использую синтаксис rest, о котором уже рассказал в этой статье. Это нужно сделать для избежания сортировки исходного массива, так как наша функция является мутирующей (меняет исходные данные).
Своя функция — хорошо, но готовая лучше. Смотрим пример работы встроенного метода сортировки:
const users = [
{ name: "Оля", age: 17 },
{ name: "Петя", age: 20 },
{ name: "Анна", age: 15 },
{ name: "Иван", age: 18 },
{ name: "Мария", age: 22 },
];
// Пример 1: Сортировка по возрасту (по возрастанию)
const sortedByAge = [...users].sort(function (a, b) {
return a.age - b.age; // Если результат > 0, элементы поменяются местами
});
// Пример 2: Сортировка по возрасту (по убыванию)
const sortedByAge2 = [...users].sort(function (a, b) {
return b.age - a.age; // Если результат > 0, элементы поменяются местами
});
console.log("По возрастанию", sortedByAge);
console.log("По убыванию", sortedByAge2);
Эффект тот же, но кода стало меньше. Нам не пришлось писать алгоритм сортировки самим.
sort — это метод массива, который сортирует его элементы (мутирует исходный) и возвращает отсортированный массив.
Принимает: необязательную функцию-компаратор. Если функция не передана, элементы приводятся к строкам и сортируются по порядку Unicode.
Функция-компаратор должна возвращать число, которое определяет порядок элементов:
- отрицательное число (<0) — a ставится перед b;
- положительное число (>0) — a ставится после b;
- ноль (=== 0) — порядок a и b не меняется.
Возвращает: тот же самый массив, но отсортированный. Из-за мутации рекомендуется работать с копией, если нужно сохранить исходный порядок.
По умолчанию сортирует элементы как строки, что для чисел требует передачи функции-компаратора.
Так что используйте sort, когда нужно упорядочить элементы массива по какому-либо критерию: числа по возрастанию, строки по алфавиту, объекты по дате. Всегда создавайте копию, например, через [...arr].sort(...), если оригинальный порядок нужно сохранить для дальнейшей работы.
Подведем итог
Вы освоили три основных метода массивов: map для преобразования данных, filter для отбора и sort для сортировки. Теперь вы понимаете не только как их использовать, но и как они работают внутри.
Эти методы — ваши главные инструменты для работы с данными. Они делают код чище, понятнее и короче, заменяя громоздкие циклы одной выразительной строкой. Главное — они создают новые массивы, сохраняя исходные данные в безопасности (кроме sort, где нужно помнить о копировании).
Начинайте применять их на практике сразу же. Попробуйте в следующих задачах заменить циклы на эти методы, и вы быстро почувствуете, насколько эффективнее и удобнее становится ваш код.
