如何实现从当前URL解析查询字符串为键值对数组的函数？

没问题，这是前端开发里挺常见的需求，我给你几个实用的实现思路和代码示例：

基础实现（满足你的核心需求） #

最直接的方式就是利用浏览器提供的window.location.search来获取查询字符串，然后做简单的切割处理：

function getQueryParametersArray() {
  // 获取URL中带?的查询字符串部分，比如"?product=shoes&price=59.99&color=red"
  const queryString = window.location.search;
  
  // 如果没有查询参数，直接返回空数组
  if (!queryString) return [];
  
  // 去掉开头的?，再用&分割成单个键值对元素
  return queryString.slice(1).split('&');
}

// 测试用例（假设当前URL是http://example.com?product=shoes&price=59.99&color=red）
const parameters = getQueryParametersArray();
console.log(parameters); // 输出：["product=shoes","price=59.99","color=red"]

进阶优化：处理特殊场景 #

如果你的业务场景需要考虑一些边缘情况，可以用下面的优化版本：

1. 过滤空的键值对 #

如果URL的查询字符串末尾多了一个&（比如http://example.com?product=shoes&price=59.99&），基础版本会返回一个空字符串元素。可以加个过滤逻辑去掉这些无效项：

function getCleanQueryParametersArray() {
  const queryString = window.location.search;
  if (!queryString) return [];
  
  return queryString.slice(1)
    .split('&')
    .filter(pair => pair.trim() !== ''); // 过滤空字符串
}

2. 解码URL编码的参数值 #

有时候参数值会包含特殊字符（比如空格、&），这些字符会被URL编码成%20、%26之类的格式。如果需要返回解码后的真实键值对，可以加上解码逻辑：

function getDecodedQueryParametersArray() {
  const queryString = window.location.search;
  if (!queryString) return [];
  
  return queryString.slice(1)
    .split('&')
    .filter(pair => pair.trim() !== '')
    .map(pair => decodeURIComponent(pair)); // 解码每个键值对
}

// 测试用例（URL为http://example.com?name=John%20Doe&hobby=reading%26hiking）
const decodedParams = getDecodedQueryParametersArray();
console.log(decodedParams); // 输出：["name=John Doe", "hobby=reading&hiking"]

根据你的需求描述，基础版本完全能满足要求；如果有特殊的业务场景，再选择对应的优化版本就好。

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