前端URL那些事儿

[FrankKai]

URL其实是一个很值得深入学习的东西，比如说url参数，url通信等等。

• URLSearchParams是什么

[FrankKai]

URLSearchParams是什么

这是一个或者url query参数的非常好用的一类。
可以传入的参数有：url.search, 序列，记录。

• url.search "?foo=1&bar=2"
• 序列 [["foo", 1],["bar", 2]]
• 记录{"foo" : 1 , "bar" : 2}
  例如：

var url = new URL('https://example.com?foo=1&bar=2');
var params = new URLSearchParams(url.search);// 生成一个URLSearchParams实例

URLSearchParams方法：

• 增加查询参数

params.append('baz', 3);// Query String 为 "?foo=1&bar=2&baz=3"

• 删除查询参数

params.delete('foo');//Query String 为 "?bar=2"

• 获得查询参数Iterator

for(var pair of params.entries()){
    console.log(pair[0]+ ', '+ pair[1]); // foo,1; bar,2
}

• forEach

params.forEach((value, key)=>{
    console.log(key, value);// foo 1; bar 2
})

• 获取某一个查询值

params.get('foo');// 1

• 获取一组相同key的查询值

params.append('foo', '3');
params.getAll('foo');// ["1", "3"]

• 判断某个query name是否存在

params.has('foo');// true

• 获取查询参数key的iterator

for(var key of params.keys()){
    console.log(key); // foo bar
}

• 修改某个key的值

params.set('foo', 0);// Query String 为 "?foo=0&bar=2"

• 排序query string

params.set('foo', 3);
params.sort()// Query String 为 "?bar=2&foo=3"

• 获得字符串形式的Query String

params.toString(); // "?foo=1&bar=2"

• 获取查询参数values的iterator

for(var value of params.values()){
    console.log(value); // 1,3
}