JavaScript 30 Day 6 Study Notes

JavaScript 30 День 6 повысил сложность по сравнению с предыдущими уроками. Он включает в себя широкое использование JavaScript для обработки и организации ввода, использования выборки для доступа к API и сопоставления ввода и данных. Не говоря уже о каком-то чуждом (для меня) синтаксисе и новом термине, регулярных выражениях. Ничего себе, много вещей, с которыми я не был слишком знаком.

Первый шаг — доступ к API и отправка данных в массив.

const cities =[];
fetch(endpoint)
   .then(blob => blob.json())
   .then(data => cities.push(...data))

Ладно, пока все хорошо. Я не очень часто использовал fetch, но, по крайней мере, это было мне знакомо.

Затем Бос написал функцию для сопоставления ввода из формы с данными в массиве. Для этого ему нужно было преобразовать данные в регулярное выражение. Хм? Я смутно припоминаю, что раньше слышал термин регулярное выражение. Но я понятия не имел, что это значит. Бос упомянул этот термин только для объяснения кода.

function findMatches(wordToMatch, cities){
   return cities.filter(place => {
      const regex = new RegExp(wordToMatch, 'gi'); //g=global, i= case insensitive
      return place.city.match(regex) || place.state.match(regex)
   });}

Прыжок в кроличью нору регулярных выражений

Согласно Eloquent JavaScript, регулярные выражения являются способом описания шаблонов в строковых данных. Они являются типом объекта. Один из способов объявить их — использовать конструктор, как это сделал Бос.

const regex = new RegExp('wordToMatch','gi');

Это преобразует ввод в регулярное выражение в виде переменной regex.

Здорово. Но WTF — это второй аргумент gi? Я не смог найти в Eloquent JavaScript ничего, что имело бы смысл. Наконец, я выполнил поиск в Google, который привел меня на веб-сайт Mozilla Developer Network (MDN). Объект RegExp имеет 6 свойств флажков, которые используются для расширенного поиска. Два из этих свойств: g относятся к глобальному поиску и i относятся к поиску без учета регистра.

Затем Bos использовал метод match, чтобы сопоставить входные данные с данными.

return place.city.match(regex) || place.state.match(regex)

Фух. Это был сложный кусок кода для интерпретации.

Затем Бос создал массив с совпадениями и использовал метод карты для преобразования элементов в HTML.

function displayMatches(){
//get data matches
   const matchArray = findMatches(this.value, cities);
//loop over array to display
   const html = matchArray.map(place => {

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

const cityName = place.city.replace(regex, `<span class ="hl">${this.value}</span>`);
const stateName = place.state.replace(regex, `<span class ="hl">${this.value}</span>`)

Функция вернула литерал шаблона с HTML.

return 
`<li>
<span class ="name">${cityName}, ${stateName}</span>
<span class ="population">${numberWithCommas(place.population)}</span>
</li> `;

А Бос добавил код для преобразования массива в строку. Это то, что я никогда бы не подумал сделать.

}).join('');

Наконец, добавление возврата к innerHTML в класс .suggestions.

suggestions.innerHTML = html;

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

Посмотрите мои заметки об изучении JavaScript 30 с самого начала.