JS url查询参数转对象

⏹主要通过以下几个方法完成转换需求

• new URL()
• new URLSearchParams()
• Object.fromEntries()
• location.search
• location.href

---

一. 封装前的测试准备

⏹ 假定存在如下包含参数的url

// 可以通过 location.search 来获取地址栏中的查询参数,可直接得到 ?name=jiafeitian&age=28
const urlStr = "https://api.github.com/users/fengyehong123?name=jiafeitian&age=28";

⏹通过JS原生的方法将查询参数转换为对象

const urlObj = new URL(urlStr /* location.href */);
// 直接得到相应的参数
console.log(urlObj.search);  // ?name=jiafeitian&age=28

// new URL().searchParams 得到的是一个 URLSearchParams 对象
const urlSearchParams = urlObj.searchParams;

// 配合 Object.fromEntries 将查询参数转换为对象
const paramObj = Object.fromEntries(urlSearchParams);
console.log(paramObj);
/*
    {
        "name": "jiafeitian",
        "age": "28"
    }
*/

---

二. 转换方式1

• 将url中的查询参数转换为对象的方式封装为方法

const searchParamToObj = (url = location.href) => Object.fromEntries(new URL(url).searchParams);
console.log(searchParamToObj(urlStr));
/*
    {
        "name": "jiafeitian",
        "age": "28"
    }
*/

---

二. 转换方式2

• 转换查询参数为对象

const urlParamsToObject = (query) => Array.from(new URLSearchParams(query))
	.reduce((p, [k, v]) => Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v}), {});
	
// 获取url中的查询参数 项目中可以使用 location.search 来代替
const searchParamStr = new URL(urlStr).search;
console.log(searchParamStr);  // ?name=jiafeitian&age=28

console.log(urlParamsToObject(searchParamStr));
/*
    {
        "name": "jiafeitian",
        "age": "28"
    }
*/