前端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
  }