В последнее время я написал много статей о Ruby благодаря усилиям, которые я приложил к недавнему вызову кода. Хотя у меня еще много планов насчет Ruby/Rails/Backend, я хотел вернуться туда, где остановился, изучая JavaScript30 Уэса Боса. Упражнение на 17-й неделе этого курса было идеальным способом вернуться к обычной практике JavaScript.

В этом упражнении у нас есть список названий групп, и, как известно, многие названия групп содержат артикли the (The Band), a (A Flock of Чайки), или более редкий an (Альбатрос). В нашем списке мы хотим игнорировать эти статьи, поэтому при сопоставлении с нашей страницей они будут отображаться в порядке следования слов, которые не являются статьей. Например, если бы мы использовали три имени выше, порядок их появления был бы следующим:

  • Альбатрос
  • Группа
  • Стая чаек

Обратите внимание, что «Стая чаек» находится под «Группой». Если мы не будем игнорировать статьи, наш порядок изменится. Это может быть очень важно для простоты использования пользователем при сортировке чего-либо на вашем веб-сайте. Теперь давайте посмотрим, как мы это делаем!

Шаг 1: Знайте свои методы

В этом упражнении мы собираемся использовать два метода для создания желаемого списка. Они сортируются и заменяются.

  • .sort() — Метод .sort() сортирует элементы массива на месте и возвращает отсортированный массив (из MDN). Обычно он сравнивает две вещи и изменяет массив в зависимости от желаемого результата сравнения/алфавитизации.
  • .replace() —Метод .replace() возвращает новую строку, в которой некоторые или все совпадения шаблона заменены заменой. Шаблон может быть строкой или RegExp, а заменой может быть строка или функция, вызываемая при каждом совпадении. Если шаблон является строкой, будет заменено только первое вхождение (из MDN).

Шаг 2. Создайте свой .sort( )

Для начала мы создадим наш метод .sort(). Взгляните на код ниже.

const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1)

Это однострочное тернарное выражение, которое сортирует наш массив полос по переменной sortedBands. Параметры (a, b) — это два названия полос, которые мы будем сравнивать по алфавиту. Функция strip будет использовать наш метод replace, но пока вы можете знать, что эта функция удалит названия наших групп из их статей, если они у них есть.

Таким образом, если strip(a) выше в алфавите, чем strip(b), он «вернет 1», другими словами, переместит полосу (a) в начало массива.

Если strip(b) выше в алфавите, чем полоса (а), то функция «вернет -1», другими словами, переместит полосу (а) в конец массива. Это даст нам точный алфавитный список!

Шаг 2.5: Создайте свой .replace()

Я не могу назвать этот шаг 3, потому что на самом деле нашему .sort() нужна наша функция полосы, чтобы работать правильно. Итак, давайте продолжим и посмотрим, как выглядит эта строка кода.

function strip(bandName) {
   return bandName.replace(/^(a |the |an)/i, '').trim()
}

Мы создаем функцию, которая принимает параметр bandName. Это соответствует нашему сравнению a и b в нашей сортировке, так что мы на правильном пути!

Оттуда мы можем продолжить рекламу небольшого кода и просто написать явный возврат. В этом возврате мы собираемся использовать метод replace для названия нашей группы. Когда я вижу .replace(), я сразу же думаю о RegEx. Для тех, кто действительно плохо знаком с RegEx, вот разбивка того, что находится внутри нашего метода replace.

  • Regex всегда находится между двумя //
  • Когда вы видите ^ в начале RegEx, это означает, что мы смотрим, с чего начинается переданное значение.
  • Все, что в скобках, — это биты, которые мы будем заменять. Здесь мы записали все статьи, которые искали, и разделили их знаком «или» ( | | ).
  • I в конце означает, что он нечувствителен, другими словами, не чувствителен к регистру и может быть написан как заглавными, так и строчными буквами.

После того, как регулярное выражение закончено, мы пишем, что мы хотели бы заменить значениями, которые мы перечислили. В этом случае мы будем использовать пустую строку (‘ ‘). Последнее, что делает наша функция, — это обрезает дополнительное пространство, созданное заменой артикля, и мы делаем это, как вы уже догадались, .trim() .

Используйте наши методы sort и replace с пользой, и вы сможете делать такие забавные вещи JS на лету! Не забудьте также заглянуть к Уэсу Босу!