Освойте этот классический вопрос на собеседовании, чтобы выделиться на собеседовании.

Мы знаем, что строка запроса является важной частью 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, и мы добавим вас в качестве автора. Также сообщите нам, к каким публикациям вы хотите быть добавлены.