关于URLSearchParams的秘密

在前端开发过程中，有时候会需要获取浏览器地址上附带的参数，作为条件去请求接口，你还在通过数组的分割方法去一步步获取需要的参数吗？今天讲解一下URLSearchParams这个无敌的API，它是JavaScript 专门处理URL查询参数。 URLSearchParams提供了一组方法来添加、获取、删除和遍历查询参数，下面是一个简单的示例代码，演示如何使用URLSearchParams。

const params = new URLSearchParams(window.location.search); //window.location.search就是浏览器地址,
//解析window.location.search这种?xxx=xx&bb=1里面的参数
   or
const params = new URLSearchParams(window.location.search)
params.has('xxxx')    //用has是去判断当前解析的浏览器地址里是否有这个字符串，返回的是true/false
params.get('xxxx')  //用get是去获取xxx的值，例如consloe.log(params.get('bb')),拿到的值就是1
params.set('xxxx',2)  //用set设定xxxx值是2，设置指定键的值
params.append('xxxx',2)   //用append向查询参数中添加一个键值对
params.delete('xxxx')   //用delete删除xxxx
params.getAll('xxxx')   //用getAll获取xxxx的指定值
params.forEach((value, key) => { ... }) //用forEach遍历所有查询参数

以上是 URLSearchParams提供的一些方法，下面我们用简单的代码看一下

const params = new URLSearchParams("?name=John&age=30"); 
console.log(params.get("name")); // "John" 
console.log(params.get("age")); // "30"
console.log(params.has("gender")); // false
console.log(params.getAll("age")); // ["30"] 
console.log(params.append("city", "New York")););console.log(params); // "?name=John&age=30&city=New York" 
console.log(params.delete("age"));; console.log(params); // "?name=John&city=New York" 
console.log(params.forEach((value, key) => { console.log(key + ": " + value); }));;// name: John  age: 30  city: New York

如有补充，欢迎留言。