JavaScript中的URLSearchParams

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/04/17/JavaScript%E4%B8%AD%E7%9A%84URLSearchParams/

摘要

本文主要讲述了：

作用
构造函数
原型方法

正文

作用

解析 URL 中的查询字符串

由于URLSearchParams实现了URLSearchParams.prototype[Symbol.iterator]，因此可以直接被for...of迭代。此外，迭代的顺序和插入的顺序是相同的。

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const foo = new URLSearchParams('?a=1&b=2&c=3');
      for (let item of foo) {
        console.log(item);
      }
    </script>
  </body>
</html>

构造函数

new URLSearchParams(search)

search为 URL 中的查询字符串，注意：前置?在解析时会被忽略

原型方法

has

判断是否存在指定键名

get

查询指定键名的值，如果存在多个同名的键，返回第 1 个

getAll

查询指定键名的所有值的数组

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const foo = new URLSearchParams('?a=1&a=2&a=3');
      console.log(foo.get('a'));
      console.log(foo.getAll('a'));
    </script>
  </body>
</html>

set

修改指定键名的值

delete

删除指定键名

append

新增键名

keys

返回键名的迭代器对象

values

返回键值的迭代器对象

entries

返回键名键值数组的迭代器对象

forEach

遍历键名和键值

sort

按照键名的 Unicode 码点大小重新排序参数字符串

注意：sort()没有参数

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const foo = new URLSearchParams('?c=3&b=2&a=1');
      foo.sort();
      // a=1&b=2&c=3
      console.log(foo.toString());
    </script>
  </body>
</html>