前端简单常用算法(一)

记录一些在前端会常用到的一些简单函数

处理 url 得到需要查询的东西

解析 URL 为一个对象

1
2
3
4
5
6
7
8
9
let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
parseParam(url)
/* 结果
{ user: 'anonymous',
id: [ 123, 456 ], // 重复出现的 key 要组装成数组,能被转成数字的就转成数字类型
city: '北京', // 中文需解码
enabled: true, // 未指定值得 key 约定为 true
}
*/

获取到查询参数

按道理一般是 location.search.slice(1)

但是本题给出 url 所以选择正则

1
2
/.+\?(.+)$/.exec(url)[1]
//user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled'

处理查询参数为对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function parseParam(url){
let search = /.+\?(.+)$/.exec(url)[1]
let hash = {}
let kvs = search.split('&')
kvs.forEach(kv => {
if(/=/.test(kv)){
let [key, val] = kv.split('=')
val = decodeURIComponent(val)//解码
val = /^\d+$/.test(val) ? ~~val : val//若全为数字则将其有字符串转换为数字
if(hash.hasOwnProperty(key)){
hash[key] = [].concat(hash[key],val)
}else{
hash[key] = val
}
}else{
hash[kv] = true
}
})
return hash
}
  • 正则

  • hasOwnProperty()

  • ~~

棒棒糖