优雅的获取url的参数

通常我们都是自己实现一个函数去拿参：

function getUrlParam() {
   const ret = window.location.href.split('?')[1].split('&').map(v=>
       ({
          [v.split('=')[0]]: v.split('=')[1]
       })
   )
   return Object.assign(...ret);
// 深拷贝
JSON.parse(JSON.stringify(window.location.href.split('?')[1].split('&').map(i=>({[i.split('=')[0]]:i.split('=')[1]}))))
}
// es5写法
function getUrlParam() {
   let ret = {};
   for (let x of window.location.href.split('?')[1].split('&')) {
       ret[x.split('=')[0]]= x.split('=')[1];
   }
   return ret;
}

另一种方法：使用new URL()解析url，获取一个对象urlParams

// 假设 window.location.href=https://halo.zoey.fun/posts/list?page=0&size=10&statuses=PUBLISHED&statuses=DRAFT&statuses=INTIMATE
const urlParams = new URL(window.location.href);
// 是否有这个参数，返回布尔值
urlParams.searchParams.has("page") // true
// 获取这个参数
urlParams.searchParams.get("page")// '0'
// 获取所有这个参数，返回数组
urlParams.searchParams.getAll("size"); //['10']
// 添加参数
urlParams.searchParams.append("statuses", "DCDRAFT");
// 输出所有参数
urlParams.searchParams.toString(); // 'page=0&size=10&statuses=PUBLISHED&statuses=DRAFT&statuses=INTIMATE&statuses=DCDRAFT'
// 设置参数的值
urlParams.searchParams.set("statuses", "More DRAFT");
urlParams.searchParams.toString(); // 'page=0&size=10&statuses=More+DRAFT'
// 删除参数的值
urlParams.searchParams.delete("statuses");
urlParams.searchParams.toString(); // 'page=0&size=10'