Как использовать фильтры и сортировку на сайте с помощью JavaScript

Основная цель фильтров и сортировки на сайте — улучшение пользовательского опыта, путем облегчения навигации и поиска нужной информации. В этой статье мы рассмотрим, как использовать фильтры и сортировку на сайте с помощью JavaScript.

Фильтрация данных

Фильтрация — это процесс отбора определенных элементов из набора данных на основе заданных критериев. В JavaScript для фильтрации данных можно использовать метод filter().

Пример использования метода filter()

Предположим, у нас есть массив объектов с данными о студентах:

const students = [
  { name: "Alice", age: 20, course: "Web Development" },
  { name: "Bob", age: 23, course: "Data Science" },
  { name: "Carol", age: 22, course: "Web Development" },
];

Теперь, если мы хотим отфильтровать студентов, которые изучают «Web Development», мы можем сделать это следующим образом:

const webDevStudents = students.filter(
  (student) => student.course === "Web Development"
);

console.log(webDevStudents);
// Output: [{ name: "Alice", age: 20, course: "Web Development" }, { name: "Carol", age: 22, course: "Web Development" }]

Сортировка данных

Сортировка — это процесс упорядочивания данных в определенной последовательности (по возрастанию или убыванию). В JavaScript для сортировки данных можно использовать метод sort().

Пример использования метода sort()

Используя тот же массив студентов, давайте отсортируем их по возрасту:

const sortedByAge = students.sort((a, b) => a.age - b.age);

console.log(sortedByAge);
// Output: [{ name: "Alice", age: 20, course: "Web Development" }, { name: "Carol", age: 22, course: "Web Development" }, { name: "Bob", age: 23, course: "Data Science" }]

Теперь студенты отсортированы по возрастанию возраста.

Курсы по программированию

Помогаем получить новую профессию с гарантией трудоустройства!

Подробнее

Использование фильтров и сортировки вместе

Вы также можете комбинировать фильтрацию и сортировку для получения более точных результатов. Например, отфильтровать студентов по курсу и затем отсортировать их по возрасту:

const webDevAndSorted = students
  .filter((student) => student.course === "Web Development")
  .sort((a, b) => a.age - b.age);

console.log(webDevAndSorted);
// Output: [{ name: "Alice", age: 20, course: "Web Development" }, { name: "Carol", age: 22, course: "Web Development" }]

Теперь наши данные отфильтрованы и отсортированы в соответствии с заданными критериями.

💡 Важно помнить, что методы filter() и sort() не изменяют исходный массив, а возвращают новый массив с результатами.

Теперь вы знаете, как использовать фильтры и сортировку на сайте с помощью JavaScript. Эти методы могут быть очень полезными для улучшения пользовательского опыта и облегчения навигации по данным на вашем сайте. Удачи в изучении веб-разработки! 🚀

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее