Js-使用URL对象获取GET参数

概述

用法

创建URL对象

searchParams属性

get()获取单个的get参数

getAll()获取多个同名的get参数

keys()获取get参数中所有的键

values()获取get参数中所有的值

entries()以键值对的形式获取get参数

has()判断get参数是否包含某个键

实例

获取当前地址中的get参数以对象的形式保存

---

概述

一般我们自己从URL中分析和提取参数都是比较麻烦的, 所以为了防止无休止的重复造轮子, 大多数的浏览器都内置了URL对象。

有了URL对象我们就可以将URL参数很方便的解析出来。

用法

创建URL对象

创建URL对象要使用URL构造函数, URL对象接收一个url地址参数。

let u = new URL('https://blog.csdn.net/qq_45458749');
console.dir(u); // console.dir()输出对象的属性和方法

可以在控制台中看到URL对象有很多的属性和方法, 我们主要用到searchParams属性

searchParams属性

我们在控制台输出一下searchParams属性

let u = new URL('https://blog.csdn.net/qq_45458749');
console.dir(u); // console.dir()输出对象的属性和方法
console.log(u.searchParams);

 

get()获取单个的get参数

get()方法接收一个参数, 这个参数是url地址中get参数的键, 返回一个字符串

let u = new URL('https://blog.csdn.net/qq_45458749?a=1&b=张三');

console.log(u.searchParams.get('a')); // '1'
console.log(u.searchParams.get('b')); // '张三'

getAll()获取多个同名的get参数

getAll()方法接收一个参数, 这个参数是url地址中get参数的键, 返回一个数组

let u = new URL('https://blog.csdn.net/qq_45458749?a=1&a=2&a=张三');

let params = u.searchParams.getAll('a');

console.log(params); // ['1','2','张三']

keys()获取get参数中所有的键

kes()返回一个可迭代对象, 可以用for...of循环进行遍历, 获取每一个键

let u = new URL('https://blog.csdn.net/qq_45458749?a=1&b=张三');

let ks = u.searchParams.keys();

for(let k of ks){
    console.log(k);
} // 输出 'a' 'b'

values()获取get参数中所有的值

values()返回一个可迭代对象, 可以用for...of循环进行遍历, 获取每一个值

let u = new URL('https://blog.csdn.net/qq_45458749?a=1&b=张三');

let vs = u.searchParams.values();

for(let v of vs){
    console.log(v);
} // 输出 '1' '张三'

entries()以键值对的形式获取get参数

entries()返回一个可迭代对象, 可以用for...of循环进行遍历, 其返回形式为一个数组格式为[键,值]

let u = new URL('https://blog.csdn.net/qq_45458749?a=1&b=张三');

let kvs = u.searchParams.entries();

for(let arr of kvs){
    console.log(arr);
} // 输出 ['a','1']  ['b','张三']

可以用解构赋值对键值对进行处理

let u = new URL('https://blog.csdn.net/qq_45458749?a=1&b=张三');

let kvs = u.searchParams.entries();

for(let [k,v] of kvs){
    console.log(k+'的值为'+v);
} // 输出 'a的值为1'  'b的值为张三'

has()判断get参数是否包含某个键

has()接收一个参数, 参数为要判断的值, 返回true/false

let u = new URL('https://blog.csdn.net/qq_45458749?a=1');

console.log(u.searchParams.has('a')); // true
console.log(u.searchParams.has('x')); // false

实例

获取当前地址中的get参数以对象的形式保存

document.URL用来获取当前url地址, 和location.href获取的值相同, 两个都可以在URL对象中使用。

let u = new URL(document.URL);

// 创建一个对象用来保存参数
let obj = {};

// 对参数进行遍历
for(let [k,v] of u.searchParams.entries()){
    obj[k] = v;
}

// 输出信息
console.log(obj);

修改地址栏添加几个get参数查看一下效果