js中内置对象URLSearchParams

文章类型:Javascript

发布者:hp

发布时间:2023-05-28

一:定义

1:用于操作和处理 URL 的查询参数部分

2:提供了一组方法来解析、构建、添加、删除和迭代查询参数

二:方法

1:构造函数 :new URLSearchParams([query]) =>创建一个新的对象,query可选的参数,表示查询参数部分

const urlParams = new URLSearchParams(urlString);

2:append:=>向对象中添加一个新的键值对,如果键已经存在,则将新的值追加到已有值的末尾

urlParams.append('hobby', 'sports');

3:delete:=>对象删除知道名称的键值对

urlParams.delete('name');

4:get:=>返回指定名称的第一个值

console.log(urlParams.get('name'));

5:getAll(name):=>返回指定名称的所有值,以数组形式返回

console.log(urlParams.getAll('hobby'));

6:has(name):=>检查是否存在具有指定名称的键

console.log(urlParams.has('hobby'));

7:set(name, value):=>指定名称的值,如果键已经存在,则将现有的值替换为新值

urlParams.set('age', '35');

8:toString():=>返回包含所有键值对的查询参数字符串

console.log(urlParams.toString());

9:entries():=>返回一个迭代器,可以使用 for...of 循环迭代所有的键值对

for (const [key, value] of urlParams.entries()) {
  console.log(key, value);
}

10:keys() 和 values():=>返回迭代器,分别提供所有键和所有值的迭代

11:forEach(callback):=>对每个键值对调用回调函数

三:代码

// 假设当前地址栏为:https://www.cqhxb.com/?name=John&age=30

const urlString = window.location.search;
const urlParams = new URLSearchParams(urlString);
const paramsObject = {};

for (const [key, value] of urlParams.entries()) {
  paramsObject[key] = value;
}

console.log(paramsObject); //{ name: "John", age: "30" }

四:总结

1:可以灵活地处理地址栏中的查询字符串,将其转换为对象以便于进一步使用和操作