Структурированное клонирование и URLSearchParams
Глубоко копируйте данные с помощью structuredClone (сохраняет Dates, Maps и Sets), а также разбирайте и создавайте строки запросов с помощью URLSearchParams
«Структурированное клонирование и URLSearchParams» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.
Зачем нужны эти инструменты
Цель: безопасно копировать и сериализовать данные URL.
- structuredClone создаёт глубокую копию данных
- Сохраняет даты/отображения/множества
- Параметры URL-запроса разбирают и создают запросы
- Понятные для начинающих шаблоны
Глубокая копия с сохранением типов
structuredClone создаёт глубокую copy и сохраняет объекты дат без изменений.
// Deep copy with structuredClone (Node 17+/modern browsers)
const original = { n: 1, list: [1, 2], when: new Date("2024-01-01") };
const copy = structuredClone(original);
copy.n = 2;
copy.list.push(3);
console.log("original.n:", original.n);
console.log("copy.n:", copy.n);
console.log("dates equal type?", copy.when instanceof Date);
JSON теряет типы
JSON содержит только данные; даты, отображения и множества превращаются в обычные значения или теряются.
// JSON round-trip loses special types (e.g., Date becomes string)
const obj = { when: new Date("2024-01-01"), ok: true };
const round = JSON.parse(JSON.stringify(obj));
console.log("after JSON:", typeof round.when, round.when);
console.log("is Date?", round.when instanceof Date);
Отображения и множества сохраняются
Отображение и множество корректно сохраняются при копировании с помощью structuredClone.
// structuredClone preserves Map and Set
const m1 = new Map([["a", 1]]);
const s1 = new Set([1, 2]);
const cloned = structuredClone({ m1, s1 });
console.log("map has a?", cloned.m1.has("a"));
console.log("set has 2?", cloned.s1.has(2));
Разбор строк запроса
Параметры URL-запроса читают строки запроса; используйте get, getAll, has и при необходимости выполняйте перебор.
// Parse a query string with URLSearchParams
const qs = "q=shoes&color=red&color=blue&page=2";
const params = new URLSearchParams(qs);
console.log("q:", params.get("q"));
console.log("first color:", params.get("color"));
console.log("all colors:", params.getAll("color"));
console.log("page:", params.get("page"));
Создание строк запроса
Используйте set/append, а затем toString(), чтобы создать безопасные строки запроса.
// Build a query string from key/value pairs
const build = new URLSearchParams();
build.set("q", "shoes");
build.append("color", "red");
build.append("color", "blue");
build.set("page", String(2));
console.log("query:", build.toString());
// Example full URL
const url = "https://example.com/search?" + build.toString();
console.log("url:", url);
Тест по structuredClone и JSON
Быстрая проверка: глубокая копия с сохранением типов.
Итоги
Итоги: Используйте structuredClone для глубоких копий с сохранением таких типов, как даты/отображения/множества. Используйте параметры URL-запроса, чтобы безопасно разбирать и создавать строки запроса.
Часто задаваемые вопросы
Урок «Структурированное клонирование и URLSearchParams» бесплатный?
Да — полный текст урока «Структурированное клонирование и URLSearchParams» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Структурированное клонирование и URLSearchParams»?
Глубоко копируйте данные с помощью structuredClone (сохраняет Dates, Maps и Sets), а также разбирайте и создавайте строки запросов с помощью URLSearchParams Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.
Сколько времени занимает урок «Структурированное клонирование и URLSearchParams»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы JSON.parse и JSON.stringify
- Структурированное клонирование и URLSearchParams
- Стратегии безопасного разбора JSON