获取 url 中的参数
- 指定参数名称,返回该参数的值 或者 空字符串
- 不指定参数名称,返回全部的参数对象 或者 {}
- 如果存在多个同名参数,则返回数组
- 不支持URLSearchParams方法
function getUrlParam(sUrl, sKey) {
}
输入: http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe key
输出:[1, 2, 3]
分析:
- 指定 sKey 参数, 返回 该参数值 || 数组 || 空字符串
- 不指定sKey参数 ,返回 全部的参数 对象 || { }
这题一看,就想到正则,我当时想法是根据 ?分割,得到后面 ,然后分两种情况;
指定sKey 和 不指定 sKey 两种情况分别讨论,具体思路还是分割出key,value做操作
function getUrlParam(sUrl, sKey) {
var arr = sUrl.split('?')[1].split('&')
let rs = [];
if (sKey !== undefined) {
for (let t of arr) {
let reg = new RegExp(`${sKey}=`)
if (reg.test(t)) {
let tmp = t.replace(`${sKey}=`, '');
tmp = tmp.replace(/#\w*/, ''); // 面向测试用例编程,解决4#hehe的问题
rs.push(tmp)
}
}
if (rs.length == 0) return '';
console.log(rs.length === 1 ? rs[0] : rs);
} else {
let map = new Map();
for (let t of arr) {
rs.push(t.split('='));
}
// map 存信息
for (let t of rs) {
if (!map.has(t[0])) {
map.set(t[0], t[1]);
} else {
// 开始出现第2个相同的key时 ,对应value使用数组存储
if (!Array.isArray(map.get(t[0]))) { map.set(t[0], [map.get(t[0])]) }
let value = [...map.get(t[0]), t[1]];
map.set(t[0], value);
}
}
rs = {}
for (let key of map.keys()) {
rs[key] = map.get(key);
}
console.log(map.size == 0 ? {} : rs);
}
}
自己写的比较拉跨,就不具体展开了,没什么营养。
看看大佬写的 (代码之美!) :
我这里没用/ /形式正则表达式,是因为/ /里面是不能使用模板字符串传变量,但是大佬这里匹配所有key和value,最后根据sKey,根我的想法完全不一样。这也是后答案可以复用的原因。
以前只知道replace的第一项可以是正则表达式,不知道后面可以接回调函数,回调函数的参数是匹配项,秀到家了- - ,以后学到了!
function getUrlParam(sUrl, sKey) {
var result = {};
sUrl.replace(/\??(\w+)=(\w+)&?/g, function (a, k, v) {
//\w是匹配数组、下划线、字母、不会匹配# 所以4#hehe 匹配 4;
// a是整个匹配项,k是group1 (\w+), v 是group2 (\w+)
if (result[k] !== undefined) {
var t = result[k];
result[k] = [].concat(t, v);
} else {
result[k] = v;
}
});
console.log(result)
if (sKey === undefined) {
return result;
} else {
return result[sKey] || '';
}
}
最后返回结果的处理也有一定思考, result 是匹配完所有key值,返回一个对象以 上面例子为例:
result = { key: [ ‘1’, ‘2’, ‘3’ ], test1: ‘4’ }
然后根据sKey 是否为undefined ;
- sKey不为undefined ,sKey=‘key‘ 则取 result[sKey]= [ ‘1’, ‘2’, ‘3’ ] 为结果; 没找到就是 ’ ’
- sKey 为undefined ,则直接返回 result; 没找到就是 [ ]
我以sKey 为开始的逻辑判断条件;
大佬以sKey 为结束的逻辑判断条件;
如果能够想到结果之间是有联系的,以sKey为结束条件,可以大大减少代码量,太秀了。