在现代前端框架中，针对路由的参数都做了开箱即用的包装。在脱离现代框架后我们该如何获取路由中的参数呢，通常最简单的做法是使用?分割url，取参数部分后继续使用&分割后遍历，对每个遍历项继续使用=分割，下标为0的为查询参数key，下标为1的为查询参数值，组装后返回即可实现一个简易版的路由查询参数获取

function getUrlQuery(url) {
    const query = {}, queryStr = url.split("?")[1];
    // prettier-ignore
    queryStr && queryStr.split("&").forEach(function(str) {
        const [queryKey, queryVal] = str.split("="), queryDecodeVal = decodeURIComponent(queryVal);
        // 如果已经存在相同的查询参数key，就将查询参数值修改为数组格式
        if (query[queryKey] !== undefined) {
            if (!Array.isArray(query[queryKey])) {
                query[queryKey] = [query[queryKey]]
            }
            query[queryKey].push(queryDecodeVal);
        } else {
            query[queryKey] = queryDecodeVal;
        }
    });
    return query;
}

如上，自行实现的代码量并不算小，针对有无限可能的url其中可能也存在着未知的兼容性问题。事实上无论是浏览器运行环境还是Nodejs(8+)均提供了可全局访问的URL对象，下面我们一起看看URL针对查询参数为我们提供的API.

语法示例

new URLSearchParams('key=1&key=2');
new URLSearchParams({key: [1,2]});
new URLSearchParams([["foo", 1], ["bar", 2]]);
// 当然我们也可以使用URL创建一个URLSearchParams对象
new URL('http://www.baidu.com?key=1&key=2').searchParams;

方法

URLSearchParams.append - 插入一个指定的键/值对作为新的搜索参数。
URLSearchParams.delete - 从搜索参数列表里删除指定的搜索参数及其对应的值。
URLSearchParams.entries - 返回一个iterator可以遍历所有键/值对的对象。
URLSearchParams.get - 获取指定搜索参数的第一个值。
URLSearchParams.getAll - 获取指定搜索参数的所有值，返回是一个数组。
URLSearchParams.has - 判断是否存在此搜索参数。
URLSearchParams.keys - 返回iterator 此对象包含了键/值对的所有键名。
URLSearchParams.set - 设置一个搜索参数的新值，假如原来有多个值将删除其他所有的值。
URLSearchParams.sort - 按键名排序。
URLSearchParams.toString - 返回搜索参数组成的字符串，可直接使用在 URL 上。
URLSearchParams.values - 返回iterator 此对象包含了键/值对的所有值。

注意事项

值得注意的是，使用URL创建的URLSearchParams对象，在对象上的任何操作都会实时的更新到实例化后的URL对象上，所以更建议使用URLSearchParams构造函数来处理查询参数。

MDN上关于URLSearchParams以及URL的介绍

【js基础】冷门API之URLSearchParams

语法示例

方法

注意事项