使用js获取url中的参数并返回一个对象方式

获取URL中的参数对于前端开发来说是一个很常见的需求，这里介绍两种使用JS获取URL参数并返回一个对象的方法。

方法一：使用URLSearchParams

URLSearchParams是浏览器提供的一个内置对象，可以方便的获取URL参数。以下是具体的实现过程：

function getSearchParams() {
  const params = new URLSearchParams(window.location.search);
  const result = {};

  for (const [key, value] of params) {
    result[key] = value;
  }

  return result;
}

console.log(getSearchParams());

代码解释：

1. 使用URLSearchParams()构造函数来初始化一个URLSearchParams对象，传入location.search作为参数，即可获取URL中的查询参数部分。
2. 遍历该对象，将每个参数保存在一个空对象中。
3. 返回这个保存所有参数的对象。

方法二：手动解析URL

手动解析URL参数比较复杂，需要自己进行字符串截取和解析。以下是具体的实现过程：

function getQueryParams(url) {
  const queryParamsString = url.split("?")[1];
  const queryParamsArr = queryParamsString.split("&");

  const result = {};
  queryParamsArr.forEach((param) => {
    const [key, value] = param.split("=");
    result[key] = value;
  });

  return result;
}

console.log(getQueryParams(window.location.href));

代码解释：

1. 首先使用split()方法将URL按照?截成两部分，获取查询参数部分。
2. 再使用split()方法将查询参数部分按照&符号拆分为一个包含多个参数的数组。
3. 再遍历这个数组，使用split()方法将每个参数按照 = 拆分为 key 和 value，并将他们存入一个空对象中。
4. 最后返回这个存储所有参数的对象。

示例描述：

假设我们有一个URL如下：http://example.com?name=Charlie&age=21。

执行以上两段代码后，都会返回一个对象{name: "Charlie", age: "21"}。

这个对象中的属性名为 URL 参数的键，属性值为 URL 参数的值。使用这两种方法，我们可以快速的获取URL中的参数并以对象的形式返回。