URLSearchParams对象
2021-05-13 13:28
标签：ams 扩展 encodeuri col 字符串 修改 字符 查询参数 fetch URLSearchParams对象用于处理URL中查询字符串，即？之后的部分。 其实例对象的用法和Set数据结构类似。实例对象本身是可遍历对象。但是不是遍历器。 当同一个键值对应多个值时用该方法 会删除所有键值为key的查询参数 将实例对象变回字符串的形式 下面的方法调用都返回一个Iterator对象。可以通过调用next()方法遍历对象。 想要获取预想的结果，需要使用扩展运算符。 因为实例对象本身也是可遍历对象。也可以使用扩展运算符。而且和entries()方法的结果相同。 该类型的请求体，浏览器会自动添加请求头: 而且，作为请求体的=两侧的数据会被进行URL编码（encodeURIComponent()）。 URLSearchParams对象 标签：ams 扩展 encodeuri col 字符串 修改 字符 查询参数 fetch 原文地址：https://www.cnblogs.com/lyraLee/p/11999966.html1.语法
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)-删除
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. 实例遍历方法
1.keys()
[...searchParams.keys()] // ["q","topic"]
2.value()
[... searchParams.values()] // ["test", "api"]
3.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
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
上一篇：CSS3中的渐变效果