了解URLSearchParams对象

 

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