js 怎么获得get 数据

通过URL参数获取GET数据的几种方法包括使用URLSearchParams API、借助正则表达式解析URL、手动字符串解析。下面，我们将详细介绍这几种方法，并对其中一种进行详细描述。

一、使用`URLSearchParams` API

这是最现代且简单的方法。URLSearchParams 是一个内置的Web API，可以轻松地解析和操作URL查询参数。

// 假设 URL 是 https://example.com?page=1&sort=asc
const urlParams = new URLSearchParams(window.location.search);
const page = urlParams.get('page'); // "1"
const sort = urlParams.get('sort'); // "asc"

详细描述：URLSearchParams API

URLSearchParams API 是解析URL查询参数的首选方法。它不仅可以方便地获取参数值，还支持方法链调用和参数的动态添加、删除等操作。

创建实例：使用 new URLSearchParams(window.location.search) 创建一个URLSearchParams实例。
获取参数：通过 get 方法获取特定参数的值。例如：urlParams.get('page')。
遍历参数：可以使用 for...of 循环遍历所有参数。
修改参数：可以使用 set、append 等方法动态修改参数。

// 遍历所有参数
for (const [key, value] of urlParams) {
  console.log(`${key}: ${value}`);
}
// 动态修改参数
urlParams.set('page', 2);
console.log(urlParams.toString()); // page=2&sort=asc

二、借助正则表达式解析URL

正则表达式可以用来匹配和解析URL中的查询参数。

function getQueryParam(name) {
  const regex = new RegExp('[?&]' + name + '=([^&#]*)', 'i');
  const result = regex.exec(window.location.search);
  return result ? decodeURIComponent(result[1]) : null;
}
// 使用方法
const page = getQueryParam('page'); // "1"
const sort = getQueryParam('sort'); // "asc"

三、手动字符串解析

手动解析字符串虽然繁琐，但也不失为一种方式，尤其在一些特殊场景下。

function getQueryParam(name) {
  const query = window.location.search.substring(1);
  const vars = query.split('&');
  for (let i = 0; i < vars.length; i++) {
    const pair = vars[i].split('=');
    if (pair[0] === name) {
      return decodeURIComponent(pair[1]);
    }
  }
  return null;
}
// 使用方法
const page = getQueryParam('page'); // "1"
const sort = getQueryParam('sort'); // "asc"

四、结合现代框架和库

在使用React、Vue等现代前端框架时，可以借助其内置或第三方库来处理URL参数。

React Router

React Router 提供了一种简单的方法来获取查询参数。

import { useLocation } from 'react-router-dom';
function useQuery() {
  return new URLSearchParams(useLocation().search);
}
// 使用方法
const query = useQuery();
const page = query.get('page'); // "1"
const sort = query.get('sort'); // "asc"

Vue Router

Vue Router 也提供了类似的方法来获取查询参数。

// 在Vue组件中 this.$route.query.page; // "1" this.$route.query.sort; // "asc"

五、使用第三方库

有许多第三方库可以简化URL参数的处理，如 qs、query-string 等。

`qs`库

import qs from 'qs';
// 假设 URL 是 https://example.com?page=1&sort=asc
const query = qs.parse(window.location.search, { ignoreQueryPrefix: true });
const page = query.page; // "1"
const sort = query.sort; // "asc"

`query-string`库

import queryString from 'query-string';
// 假设 URL 是 https://example.com?page=1&sort=asc
const query = queryString.parse(window.location.search);
const page = query.page; // "1"
const sort = query.sort; // "asc"

六、总结

无论是使用内置的URLSearchParams API，还是借助正则表达式、手动字符串解析，甚至是现代前端框架和第三方库，都可以有效地获取GET数据。在实际开发中，选择适合项目需求的方法可以提高代码的可读性和维护性。推荐使用URLSearchParams API，因为它不仅简单易用，还具有强大的功能和良好的浏览器兼容性。