0%

前端简单常用算法（一）

发表于 更新于

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

处理 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()

  • ~~