获取页面url参数,并将新的参数添加到url中主要是用于从当前页面的 URL 中获取查询字符串参数并将其转换为一个对象。

主要是用于从当前页面的 URL 中获取查询字符串参数并将其转换为一个对象。下面是该代码执行的过程：

const url = new window.URL(window.location.href); - 创建了一个新的 URL 对象，并将其初始化为当前网页的 URL。
let filterUrl = url.searchParams; - 获取 url 对象的 searchParams 属性（一个用于存储查询字符串参数的 URLSearchParams 对象），并将其分配给名为 filterUrl 的变量。
const filterUrlEntries = filterUrl; - 将 filterUrl 分配给名为 filterUrlEntries 的变量。这里使用相同的值而不是创建一个新的引用。
const filterUrlParams = Object.fromEntries(filterUrlEntries); - 使用 Object.fromEntries() 方法将 filterUrlEntries 转换为一个对象，其中每个键值对由查询字符串参数的名称和值组成。
const filterUrlRemoveString = filterUrl.toString(); - 将 filterUrl 对象转换为一个字符串以便在需要时快速访问。

综上所述，这个码段的总体目的是将 URL 查询字符串参数提取到 JavaScript 对象中，以便能够方便地访问和操作它们。在这种情况下，我们最终得到一个名为 filterUrlParams 的包含所有查询字符串参数的对象。

例如，在 URL 上有带参数的链接，如 http://example.com?color=red&size=medium。则通过这个代码片段，filterUrlParams 这个对象将会包含以下键值对：

{
  color: "red",
  size: "medium"
}

由此可以看出，该代码片段使用了 ES6 中的特性（如 const/let 变量声明和解构赋值）来更简洁和易于阅读地处理 URL 查询参数。同时，它还使用了与查询字符串相关的 Web API（URL, URLSearchParams），以方便快捷地从 URL 中提取查询参数。

这段代码创建了一个 FormData 对象并使用它来创建一个 URLSearchParams 对象。FormData 是用于在表单中以 AJAX 方式向服务器发送数据的 JS API，可以将表单数据封装成 key-value 对的方式，用于提交到服务器。

具体如下：

const formData = new FormData(this.form); - 创建一个新的 FormData 对象，并将表单元素（this.form）作为参数传递给构造函数。这个过程将把表单中所有被命名的表单控件(name) 的值组合成一个键值对格式的对象。
const formParams = new URLSearchParams(formData); - 创建一个新的 URLSearchParams 对象，并使用从 formData 中获取到的键值对来初始化它。这个 formParams 用于将以前存储在 FormData 中的表单数据转换为 URI 编码格式，以便将其添加到 URL 查询字符串中或通过 AJAX 发送给服务器。URLSearchParams 提供了一个方便的方式来处理 URL 查询字符串，它允许我们轻松地设置、追加和删除查询参数并生成一个包含这些参数的 URL 查询字符串。

最后我们得到了一个URLSearchParams 包含了由表单数据转换来的 key-value 对集合。这意味着你可以将这个对象传递到一个 fetch() 或 XmlHttpRequest 对象来提交表单数据，而不需要明确拼接请求 URL。

例如，假设您有一个表单，其中包含名为 username 和 password 的 input 控件，您可以使用上述代码获取其值，并将其转换为一组数据，以便于服务器进行处理：

<form>
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button>提交</button>
</form>

<script>
  const formData = new FormData(this.form);
  const formParams = new URLSearchParams(formData);

  fetch('/api/login', {
    method: 'post',
    body: formParams
  })
  .then(response => {
    console.log('登录成功');
  })
  .catch(error => {
    console.error('登录失败:', error);
  });
</script>

在此示例中，我们创建了一个表单，其中包含 username 和 password 输入控件。随后通过创建 FormData 对象和 URLSearchParams 实例来收集和编码表单数据，并与 fetch() 方法一起使用，以将表单数据作为 POST 请求的主体发送到指定的 API 端点。

综上所述，这个代码片段是用于获取表单元素中的键值对，并将它们编码成一个 URL 查询字符串格式的对象，最终目的是方便地传递表单数据给服务器或在客户端做一些自己的操作。