用 reduce 将 URL 查询字符串转为对象,需先提取并分割键值对,用 decodeURIComponent 解码,再通过判断键是否存在来处理重复键(转数组),支持空值、无等号参数等边界情况。

直接用 reduce 把 URL 查询字符串(如 "name=John&age=30&city=Beijing")转成对象,关键在于正确拆分键值对、处理编码、并规避重复键覆盖问题。
先提取查询字符串并分割成键值对
从完整 URL 中提取 search 部分(即 ?... 后的内容),去掉开头的 ?,再用 & 拆成数组。每项再用 = 分割为键和值——注意只切第一个 =,避免值中含 = 导致误拆。
- 可用
location.search.slice(1)或手动截取url.split('?')[1] - 用
pair.split('=', 2)确保最多切两段 - 空键或空值可跳过,提升健壮性
用 reduce 累积构建对象,支持重复键转数组
默认行为是后出现的同名参数覆盖前一个,但实际中常需保留多个值(如 ?tag=js&tag=web)。在 reduce 回调中判断目标键是否已存在:若存在且当前已是数组,直接 push;若存在但为单值,先转成数组再推入;否则直接赋值。
- 初始值设为空对象
{} - 解构每对:
const [key, value] = pair.split('=', 2) - 用
decodeURIComponent解码键和值,防止中文或特殊字符乱码
封装成可复用函数,兼顾边界情况
把逻辑收拢为一个函数,自动处理无查询参数、参数无值(?debug)、值为空字符串(?name=)等情况。可加选项控制是否合并重复键,或是否忽略空值。
- 示例调用:
parseQuery('?a=1&b=2&b=3')→{ a: '1', b: ['2','3'] } - 对
?flag这类无=的参数,可设默认值为true - 不建议在 reduce 内部做深拷贝或类型转换,保持轻量;后续按需处理
不复杂但容易忽略编码与重复键场景,写一次就能稳定复用。











