// 传统方式示例
const buildQueryString = (params) => {
  return Object.keys(params)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
    .join('&');
};

const query = buildQueryString({
  name: "fly63前端网",
  page: 1,
  filter: "latest"
});

// 空实例
const params1 = new URLSearchParams();

// 从查询字符串初始化
const params2 = new URLSearchParams('?name=前端&page=2');

// 从对象初始化
const params3 = new URLSearchParams({
  name: "fly63前端网",
  page: "1"
});

// 从键值对数组初始化
const params4 = new URLSearchParams([
  ["name", "fly63前端网"],
  ["page", "1"],
  ["filter", "latest"],
  ["filter", "popular"] // 多值参数
]);

const params = new URLSearchParams();

// 添加单值参数
params.append('category', 'technology');

// 添加多值参数
params.append('tag', 'javascript');
params.append('tag', 'webdev');

// 设置参数（会覆盖同名参数）
params.set('page', '1');

// 获取第一个值
const category = params.get('category'); // "technology"

// 获取所有值（数组）
const tags = params.getAll('tag'); // ["javascript", "webdev"]

// 检查是否存在
const hasPage = params.has('page'); // true

// 删除指定参数（所有值）
params.delete('tag');

// 遍历所有参数
for (const [key, value] of params.entries()) {
  console.log(`${key}: ${value}`);
}

// 转为普通对象
const paramsObj = Object.fromEntries(params);

const url = new URL('https://example.com/search');
url.searchParams.set('q', '前端开发');
url.searchParams.set('sort', 'popular');

console.log(url.href); 

// 修改参数
url.searchParams.set('sort', 'latest');

// 删除参数
url.searchParams.delete('q');

// 将表单数据转为查询字符串
const form = document.querySelector('form');
const formData = new FormData(form);
const params = new URLSearchParams(formData);

// 直接用于URL
const submitUrl = `/submit?${params.toString()}`;

// 构建GET请求参数
async function fetchArticles(options) {
  const params = new URLSearchParams();
  
  if (options.page) params.set('page', options.page);
  if (options.limit) params.set('limit', options.limit);
  if (options.tags) {
    options.tags.forEach(tag => params.append('tag', tag));
  }
  
  const response = await fetch(`/api/articles?${params}`);
  return response.json();
}

// 更新URL参数而不刷新页面
function updateUrlParams(newParams) {
  const url = new URL(window.location.href);
  Object.entries(newParams).forEach(([key, value]) => {
    url.searchParams.set(key, value);
  });
  window.history.pushState({}, '', url);
}

// 读取当前URL参数
function getUrlParams() {
  const params = new URLSearchParams(window.location.search);
  return Object.fromEntries(params);
}

const filters = {
  category: 'technology',
  dateRange: {
    start: '2023-01-01',
    end: '2023-12-31'
  }
};

const params = new URLSearchParams();
params.set('filters', JSON.stringify(filters));

// 解析时
const restoredFilters = JSON.parse(params.get('filters'));

// 设置数值
params.set('page', 1); // 自动转为"1"

// 获取时转换
const page = parseInt(params.get('page')) || 1;
const isActive = params.get('active') === 'true';

// 检测支持情况
const isSupported = typeof URLSearchParams !== 'undefined';

// 不支持的polyfill方案
if (!isSupported) {
  import('url-search-params-polyfill').then(() => {
    // 现在可以使用URLSearchParams了
  });
}

// 不推荐
const url = `/api?${new URLSearchParams(params).toString()}`;

// 推荐
const urlObj = new URL('/api', location.origin);
Object.entries(params).forEach(([key, val]) => {
  urlObj.searchParams.set(key, val);
});
const url = urlObj.href;