如何用map/filter一行代码提取URL查询参数，无需预定义对象？

嘿，这个需求我太懂了！你想不用提前声明q变量，直接通过迭代方法生成查询参数对象对吧？其实你之前选map有点找错工具啦——map的核心是转换数组元素并返回新数组，而我们要的是构建一个对象，reduce才是干这个活的最佳选手，刚好能满足你不用预定义变量的要求！

最推荐的方案：用reduce直接生成对象 #

直接上代码，完全不用提前定义q：

const q = location.search.substr(1)
  .split('&')
  .reduce((acc, pair) => {
    const [key, value] = pair.split('=');
    acc[key] = value;
    return acc;
  }, {});

原理说明： #

• 这里的{}是reduce的初始值，也就是我们一开始的空对象，不需要在外部提前声明。
• 每次迭代时，acc就是正在构建的参数对象，我们把拆分出的键值对添加进去，最后reduce会返回完整的对象，直接赋值给q就行。

优化版：处理空参数和URL编码 #

实际场景里，可能会遇到空的查询参数（比如URL结尾是&），或者参数值被URL编码的情况（比如空格变成%20），可以加上过滤和解码逻辑：

const q = location.search.substr(1)
  .split('&')
  .filter(pair => pair) // 过滤掉空的键值对
  .reduce((acc, pair) => {
    const [key, value] = pair.split('=');
    // 解码键和值，还原URL编码的特殊字符
    acc[decodeURIComponent(key)] = decodeURIComponent(value);
    return acc;
  }, {});

一定要用map的话？试试Object.fromEntries #

如果你坚持想用map，可以配合ES2019新增的Object.fromEntries方法，它能把[key, value]格式的二维数组直接转换成对象，同样不用预定义变量：

const q = Object.fromEntries(
  location.search.substr(1)
    .split('&')
    .filter(pair => pair)
    .map(pair => pair.split('=').map(decodeURIComponent))
);

为啥你之前的map方案不行？ #

你之前尝试用map里的this来赋值，主要有两个问题：

1. map回调里的this默认指向全局对象（严格模式下是undefined），就算手动绑定this，也没法直接生成你要的对象；
2. map最终返回的是一个数组，而不是对象，不符合你的需求。

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