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

Освоение фильтрации и сортировки массивов в JavaScript поначалу может быть довольно запутанным. Давайте рассмотрим пример массива объектов, который мог бы собрать учитель на замену, и посмотрим, сможем ли мы придать ему смысл.

const students = [
  { id:105, name: "Jessica",   is_present:true },
  { id:101, name: "Denise",    is_present:true },
  { id:103, name: "Blake",     is_present:false},
  { id:102, name: "Jaqueline", is_present:true },
  { id:104, name: "Aaron",     is_present:true },
]
Вход в полноэкранный режим Выход из полноэкранного режима

Допустим, мы хотим увидеть, кто отсутствует в классе. Мы бы использовали .filter следующим образом:

let filteredStudents =
students.filter(student=>student.is_present===false)
Войти в полноэкранный режим Выйти из полноэкранного режима

Результат будет следующим:

filteredStudents=[{id: 103, name: 'Blake', is_present: false}]
Войти в полноэкранный режим Выйти из полноэкранного режима

Что, если вы хотите получить в результате работы фильтра не только подмножество исходного массива? Поскольку фильтр на самом деле отвечает на вопрос, результат можно использовать для создания новых данных.

Мы можем предположить, каким будет результат следующего действия:

let filteredStudents =  
students.filter(student=>student.name.includes("J"))
Войти в полноэкранный режим Выход из полноэкранного режима
 filteredStudents = [
  { id:105, name: "Jessica",   is_present:true },
  { id:102, name: "Jaqueline", is_present:true }
]
Войти в полноэкранный режим Выход из полноэкранного режима

Но что, если мы хотим получить новый массив, в котором будет указано, что имена в массиве прошли проверку фильтра?

let filteredStudentsJ =
students.filter(student=>student.name.includes("J"))
.sort((a,b)=>a.name>b.name?1:-1)
.map(filteredStudent=>({
   name:filteredStudent.name,
   id:filteredStudent.id,
   includes_J:true}))
Войти в полноэкранный режим Выход из полноэкранного режима

Мы получаем новый массив объектов, который имеет ключ ‘includes_J’ вместо ‘is_present’.

filteredStudentsJ =[
 {name: 'Jaqueline', id: 102, includes_J: true}
 {name: 'Jessica', id: 105, includes_J: true}
]
Войти в полноэкранный режим Выход из полноэкранного режима

Массив filteredStudentsJ также теперь расположен в алфавитном порядке благодаря этому маленькому, но мощному фрагменту кода:

array.sort((a,b)=>a.name>b.name?1:-1)

Вход в полноэкранный режим Выход из полноэкранного режима

А? .sort просят сравнить (в данном случае) ключ имени пары объектов в массиве. В данном случае нам нужен порядок возрастания, поэтому для сравнения мы используем greater than (>). Это сравнение используется в троичном операторе, который применяется к индексу. Если значение a больше b, вы прибавляете единицу к его индексу, если нет — вычитаете 1 из его индекса. Затем .sort повторяет процесс сортировки массива до тех пор, пока сортировка не будет прекращена.

Фух, теперь мы готовы приступить к работе.

Оцените статью
devanswers.ru
Добавить комментарий