День 17 JavaScript 30 Веса Боса включал в себя работу с множеством названий групп. Задача заключалась в том, чтобы удалить артикли а, ан, то из имен, а затем отсортировать список в алфавитном порядке.

Звучит просто, и Бос предложил нам попробовать сделать это самостоятельно, прежде чем смотреть остальную часть урока. Хорошо, я знал, как использовать методы замены и сортировки. Но я столкнулся с проблемой, пытаясь понять, как перебрать массив и применить эти методы к каждому члену массива. Кроме того, мне все еще трудно понять, что является строкой, а что нет. После нескольких часов бесполезного программирования я включил оставшуюся часть урока.

Массив уже был в начальном коде. Самое смешное, что я не узнал ни одного имени.

const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];

Сначала Бос создал функцию для замены статей пустым пространством, а затем использовал метод обрезки, чтобы удалить пробелы на концах. Он использовал регулярное выражение, которое я до сих пор не совсем понимаю, как его использовать. Я с облегчением понял, что не смог бы сделать это сам.

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

Затем Бос использовал эту функцию вместе с методом сортировки для изменения массива.

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

Наконец, он изменил файл innerHTML. Он использовал метод map вместе с литералом шаблона и методом соединения, чтобы преобразовать элементы массива в строку.

document.querySelector('#bands').innerHTML = 
   sortedBands
      .map(band => `<li>${band}</li>`)
      .join('');

Мне нужно больше практики использования регулярных выражений и литералов шаблонов. С другой стороны, мне становится удобнее использовать методы массива.

Следите за моими учебными заметками по мере того, как я продвигаюсь по JavaScript 30.





JavaScript30 — День 2. Учебные заметки
Проект «Часы
включал работу с переходами CSS и использованием объекта Date JavaScript.jeffrey-amen.medium.com»