如何从URL查询参数生成指定格式的数组？

处理解析后的查询参数对象 #

如果已经有了解析好的urlObj，直接遍历对象的键值对，将每个值按逗号拆分后生成目标数组元素即可：

const urlObj = { cat_id: "18,20,24", color_id: "4" };
const filteredItems = [];

// 遍历对象的键值对
for (const [queryKey, valueStr] of Object.entries(urlObj)) {
  // 把逗号分隔的字符串拆分成单个值的数组
  const values = valueStr.split(',');
  // 逐个生成目标对象并加入结果数组
  values.forEach(value => {
    filteredItems.push({ value, queryKey });
  });
}

console.log(filteredItems);

处理URL查询参数字符串 #

如果输入是原始的查询字符串，需要先将其解析为对象，再复用上面的逻辑：

const query = "cat_id=18%2C20%2C24&color_id=4";
// 使用URLSearchParams解析字符串
const params = new URLSearchParams(query);
// 转换为普通对象
const urlObj = Object.fromEntries(params);

// 后续逻辑和处理对象的代码一致
const filteredItems = [];
for (const [queryKey, valueStr] of Object.entries(urlObj)) {
  const values = valueStr.split(',');
  values.forEach(value => {
    filteredItems.push({ value, queryKey });
  });
}

console.log(filteredItems);

封装成通用函数 #

可以把逻辑封装成函数，同时支持字符串和对象两种输入：

function convertQueryToFilteredItems(input) {
  let urlObj;
  // 判断输入类型并处理
  if (typeof input === 'string') {
    const params = new URLSearchParams(input);
    urlObj = Object.fromEntries(params);
  } else if (typeof input === 'object' && input !== null) {
    urlObj = input;
  } else {
    throw new Error('输入必须是URL查询字符串或解析后的参数对象');
  }

  const filteredItems = [];
  for (const [queryKey, valueStr] of Object.entries(urlObj)) {
    valueStr.split(',').forEach(value => {
      filteredItems.push({ value, queryKey });
    });
  }
  return filteredItems;
}

// 调用示例
const queryStr = "cat_id=18%2C20%2C24&color_id=4";
const paramObj = { cat_id: "18,20,24", color_id: "4" };

console.log(convertQueryToFilteredItems(queryStr));
console.log(convertQueryToFilteredItems(paramObj));

内容的提问来源于stack exchange，提问作者Zubair Khan