URLSearchParams对象

Posted 2020-11-23 lyralee

URLSearchParams对象用于处理URL中查询字符串，即？之后的部分。

1.语法

其实例对象的用法和Set数据结构类似。实例对象本身是可遍历对象。但是不是遍历器。

var paramsString = ‘q=URLUtils.searchParams&topic=api‘;
var searchParams = new URLSearchParams(paramsString);

2. 实例操作方法

1. has(key)

searchParams.has(‘topic‘); // true

2.get(key)

searchParams.get(‘topic‘); // ‘api‘

3.getAll(key)

当同一个键值对应多个值时用该方法

searchParams.getAll(‘topic‘); // [‘api‘]

4.append(key,value)-增加

searchParams.append(‘test‘, ‘testvalue‘); 
// searchParams.toString()变为
// "q=URLUtils.searchParams&topic=api&test=testValue"

5delete(key)-删除

会删除所有键值为key的查询参数

searchParams.delete(‘test‘); 
// searchParams.toString()变为
// "q=URLUtils.searchParams&topic=api"

6. set(key, value) 修改

searchParams.set(‘q‘, ‘test‘);
// searchParams.toString()变为
// "q=test&topic=api"

7.toString()

将实例对象变回字符串的形式

3. 实例遍历方法

下面的方法调用都返回一个Iterator对象。可以通过调用next()方法遍历对象。

想要获取预想的结果，需要使用扩展运算符。

1.keys()

[...searchParams.keys()] // ["q","topic"]

2.value()

[... searchParams.values()] // ["test", "api"]

3.entries()

因为实例对象本身也是可遍历对象。也可以使用扩展运算符。而且和entries()方法的结果相同。

[... searchParams.entries()] // [["q", "test"],["topic", "api"]]
//遍历自身
[... searchParams] // [["q", "test"],["topic", "api"]]

4. 应用

1. 实例作为POST方法的请求体

该类型的请求体，浏览器会自动添加请求头:

Content-Type: application/x-www-form-urlencoded;charset=UTF-8

而且，作为请求体的=两侧的数据会被进行URL编码（encodeURIComponent()）。

      const data = new URLSearchParams("a=b&c=d");
      fetch(‘/post‘,{
        method: ‘POST‘,
        body: data
      }).then((result) => console.log(result))

2. 通过URL的实例对象的searchParams属性获取URLSearchParams实例

const url = new URL(location);
url.searchParams instanceof URLSearchParams // true