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:可以灵活地处理地址栏中的查询字符串,将其转换为对象以便于进一步使用和操作