JavaScript简单获取url地址参数-蒲公英云

JavaScript简单获取url地址参数

JavaScript用URLSearchParams获取url地址参数

我们页面之间传递数据很多时候都会用到url地址传参，一般都会用window.location获取地址
 对象，里面会有url信息，但是此方法比较麻烦
 然后我有一个好方法来分享给大家

JavaScript中的URLSearchParams对象这是MDN上对于 URLSearchParams的解释

// 模仿一个URL地址，相当于window.location
    var url = new URL("https://fortune?id=10&name=fortune-tao&num=111");
    // 这里只能用？开始后面的参数，不能加上地址(后面做解释)
    // new URLSearchParams(url地址参数)
    var searchParams = new URLSearchParams(url.search);

后面的案例就用以上url操作

方法

get方法
介绍：获取单个key的value。
使用方法：searchParams.get(“key”)
案例：searchParams.get('id') //输出10
append方法
介绍：插入一个指定的键/值对作为新的搜索参数。
使用方法：searchParams.append(key, value)
案例:
searchParams.append('nickName' , '小fortune') searchParams.get('nickName') //输出小fortune
delete方法
介绍：删除一个key
使用方法：searchParams.delete(‘id’)
案例：

searchParams.delete(‘id’)
```
   searchParams.get('id')                  //输出null
```
getAll方法
介绍：获取一个key的值，并以数组的形式返回
使用方法：searchParams.getAll(‘key名’)
案例：searchParams.getAll('id') //输出["10"]
has方法
介绍：判断一个key是否存在
使用方法：searchParams.has(‘key名’)
案例：

searchParams.has(‘name’) //输出true
```
 searchParams.has('has')        //输出false
```
keys方法
介绍：返回一个对象，包含所有的key名
使用方法：searchParams.keys()
案例：

for (const key of searchParams.keys()) {
```
      console.log(key)                //输出  id name num
      }
```
values方法
介绍：返回一个对象，包含所有的value
使用方法：searchParams.values()
案例：

for (const key of searchParams.values()) {
```
      console.log(key)                //输出 10 fortune-tao  111
    }
```