Освойте этот классический вопрос на собеседовании, чтобы выделиться на собеседовании.
Мы знаем, что строка запроса является важной частью URL-адреса, который появляется после ?
, обычно в формате key1=value1&key2=value2
.
На картинке выше q=hello+world&oq=hello+world&aqs=chrome..69i57j0l7.7105j0j7&sourceid=chrome&ie=UTF-8
- это то, что мы называем строкой запроса.
Строка запроса часто содержит много информации, но такую строку неудобно использовать напрямую. Нам нужно преобразовать строку в формат объекта для удобства использования.
let str = 'key1=value1&key2=value2'; // not good let obj = {key1: 'value1', key2: 'value2'}; // good
Итак, как написать отличную функцию «parseUrl» для преобразования строк запроса в объектный формат?
Базовая реализация
Очевидно, мы можем получить каждый ключ и значение, используя &
для разделения строки, а затем =
для разделения подстроки.
Пример:
Исправить ошибку
Но иногда строка запроса не соответствует формату key=value
. Мы должны учитывать эту ситуацию.
Мы можем добавить в код дополнительное суждение: если поле не соответствует формату key=value
или имеет только ключ, но не имеет значения, то мы проигнорируем это поле.
Пример:
Учитывайте тип объекта
В приведенном выше примере мы рассматриваем только простой формат строки запроса. Фактически, строки запроса также могут быть записаны таким образом: name[firstname]=Rock&name[lastname]=Lee&sex=man
.
Если мы воспользуемся предыдущей функцией pareUrl, мы получим только следующие результаты:
Но на самом деле мы хотим получить такой результат:
Итак, как мы можем улучшить нашу функцию parseUrl?
Реализация не сложная. мы можем использовать регулярные выражения для сопоставления [
и ]
, а затем преобразовывать строки в объектные форматы. Следует отметить, что строки в этом формате объекта могут иметь несколько уровней вложенности, что нам необходимо учитывать в нашем коде.
Пример:
Рассмотрим массив
Строка запроса может быть не только в объектном формате, но и в формате массива: firend[0]=Tom&firend[1]=Jerry
.
Код в этом случае знаком с кодом на предыдущем шаге: если ключ является числом, мы обрабатываем его как массив.
Пример:
Рассмотрим кодирование
Наконец, мы знаем, что в URL-адресах кодируются специальные символы, такие как +
%
.
Таким образом, в коде нам также нужно декодировать строку входного запроса.
function parseUrl(str) { //... } function deepObj(obj, keys, value) { //... obj[keys[i]] = decodeURIComponent(value); }
Примечание из JavaScript In Plain English
Мы запустили три новых издания! Проявите любовь к нашим новым публикациям, подписавшись на них: AI на простом английском, UX на простом английском, Python на простом английском - спасибо и продолжайте учиться!
Мы также всегда заинтересованы в продвижении качественного контента. Если у вас есть статья, которую вы хотели бы отправить в какую-либо из наших публикаций, отправьте нам электронное письмо по адресу [email protected] с вашим именем пользователя Medium, и мы добавим вас в качестве автора. Также сообщите нам, к каким публикациям вы хотите быть добавлены.