获取 url 参数

获取 url 参数

• 描述

获取 url 中的参数，题目链接 (opens new window)

1. 指定参数名称，返回该参数的值 或者 空字符串
2. 不指定参数名称，返回全部的参数对象 或者 {}
3. 如果存在多个同名参数，则返回数组
4. 不支持 URLSearchParams 方法

• 例子

输入：http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe key

输出：[1, 2, 3]

自己实现

function getUrlParam(sUrl, sKey) {
    let result = null
    let arr = sUrl
        .slice(sUrl.indexOf('?') + 1, sUrl.indexOf('#'))
        .split('&')
        .map((el) => {
            const [a, b] = el.split('=')
            return {
                key: a,
                value: b,
            }
        })

    if (sKey) {
        let find_filter = arr.filter((el) => el.key === sKey)
        if (find_filter.length === 0) {
            result = ''
        } else {
            result = find_filter.length > 1 ? find_filter.map((el) => el.value) : find_filter[0].value
        }
    } else {
        result = {}
        arr.forEach((el) => {
            const { value, key } = el
            !result[key] && (result[key] = [])
            result[key].push(value)
        })
    }
    return result
}

注意的点：

1. url 中的#不是参数的值
2. 没有 sKey 的时候要把所有的参数存放到{}，那么每一个 key 需要用数组来存放
3. 找不到符合条件的 sKey 值时，需要返回空字符串

讨论中别人正则实现

function getUrlParam(sUrl, sKey) {
    let result = {}
    // 1. 正则解释：第一个？匹配问号本身，后面的问号表示匹配前面的表达式出现0次或1次，等价于{0,1},\w匹配一个单字字符,等价于 [A-Za-z0-9_]，+匹配前面表达式，出现一次hove多次，等价于{1,}
    // 2.replace方法如果第二个参数是函数，在这种情况下，当匹配执行后，该函数就会执行。 函数的返回值作为替换字符串。
    // 如果第一个参数是正则表达式，并且其为全局匹配模式，那么这个方法将被多次调用，每次匹配都会被调用。其中的第一个参数是匹配到的字符串，后面的参数是在正则表达式中指定的括号子串，有几个括号子串后面那几个参数就对应的子串值
    // 3.void 0可以理解为undefined，了解可[点击查看](https://github.com/lessfish/underscore-analysis/issues/1)
    sUrl.replace(/\??(\w+)=(\w+)&?/g, function(a, k, v) {
        if (result[k] !== void 0) {
            let t = result[k]
            result[k] = [].concat(t, v)
        } else {
            result[k] = v
        }
    })
    if (sKey === void 0) {
        return result
    } else {
        return result[sKey] || ''
    }
}

URLSearchParams

看到题目要求，才知道有这个方法，于是去看了一下。mdn 链接 (opens new window)

打开控制台简单使用一下，作用一目了然。