Получить профессию в Skypro
Сериализация объекта в список URL-параметров в JavaScript
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для преобразования объекта в параметры URL в JavaScript рекомендуется использовать следующую конструкцию: привести объект к массиву с помощью Object.entries(), а затем отформатировать его, применяя класс URLSearchParams.
const objectToQueryString = obj => new URLSearchParams(Object.entries(obj)).toString();
const queryString = objectToQueryString({name: 'John', age: 30}); // "name=John&age=30"Не забывайте про encodeURIComponent для обрабатывания символов, требующих кодирования в URL!
Скалярные значения null и undefined
Обращайте внимание на значения null и undefined, которые непреднамеренно могут быть преобразованы в строки "null" и "undefined". Выполните предварительное исключение этих значений из объекта.
// Очистка объекта от `null` и `undefined` перед сериализацией
const cleanObject = obj => Object.fromEntries(Object.entries(obj).filter(([_, v]) => v != null));
const objectToQueryString = obj => new URLSearchParams(cleanObject(obj)).toString();Учет совместимости браузеров
Если возникают трудности с использованием URLSearchParams из-за его несовместимости с некоторыми браузерами, рассмотрите вариант применения полифилла для поддержки старых версий.
Визуализация
В качестве примера рассмотрим подготовку к путешествию и сравним объект со списком вещей:
До: { "city": "New York", "date": "2023-05-01", "guests": 2 }Превращаем объект (чемодан) в строку запроса (упакованный набор вещей):
🛄👔👗👖 <=> 🗺️➡️ city=New+York&date=2023-05-01&guests=2И каждый элемент объекта преобразуется в параметр URL:
| Параметр объекта | как | Предмет в чемодане | ✈️ | Параметр URL |
|--------------|-----|--------------------|----|-----------------------|
| city | ➡️ | 👔 | ✈️ | city=New+York |
| date | ➡️ | 👗 | ✈️ | date=2023-05-01 |
| guests | ➡️ | 👖 | ✈️ | guests=2 |Получившийся URL теперь готов отправиться в путешествие по Интернету! 🌐✨
Альтернативный подход с jQuery
Любители jQuery или в случае необходимости работы со старыми браузерами могут использовать метод $.param().
// jQuery преобразует объект в строку запроса
const queryString = $.param({ name: 'John', age: 30, hobbies: ['reading', 'gaming'] });
// "name=John&age=30&hobbies[]=reading&hobbies[]=gaming"Ручная сериализация
Предпочитаете самостоятельность и нативный JavaScript? Используйте encodeURIComponent() для ручной сериализации:
// Методика сериализации объекта без использования внешних библиотек
const serialize = obj => Object.keys(obj).map(key =>
`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`
).join('&');
const queryString = serialize({name: 'John', age: 30}); // "name=John&age=30"Исключение пустых строк
Не позволяйте пустым строкам в объекте добавлять лишний вес к URL:
// Исключаем все пустые строки из объекта
const cleanObject = obj => Object.fromEntries(Object.entries(obj).filter(([_, v]) => v !== ''));
const objectToQueryString = obj => new URLSearchParams(cleanObject(obj)).toString();Обработка вложенных структур
Что делать с массивами и вложенными объектами? Их нужно дополнительно "распаковать" для корректной сериализации.
// Функция для сериализации сложных объектов и массивов
function serializeComplexObj(object, prefix = '') {
const pairs = [];
for (const [key, value] of Object.entries(object)) {
if (typeof value === 'object' && value !== null) {
pairs.push(...serializeComplexObj(value, `${prefix}${key}.`));
} else {
pairs.push([`${prefix}${key}`, value]);
}
}
return pairs;
}
const objectToQueryString = obj => new URLSearchParams(serializeComplexObj(obj)).toString();