面试题之 获取URL参数

前言：

偶然看到这个面试题，一开始题目都看不懂（是我太菜了😭），慢慢思考然后加理解别的大佬的答案。终于是磕磕绊绊的写出来了，把这个解法分享出来主要是想要督促督促自己，如果呢们有更好的办法啥的，拜托也告诉我一下🤞。

题目：

获取 url 参数
 限定语言：HTML/CSS/JavaScript

     1. 指定参数名称，返回该参数的值 或者 空字符串
     2. 不指定参数名称，返回全部的参数对象 或者 {}
     3. 如果存在多个同名参数，则返回数组
     4. 不支持URLSearchParams方法
     示例1
     输入
     http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe 
     输出
     {'key':[1, 2, 3] ,'test':4 } 

题目分析：

（真的，我一开始，读题都没读明白，大概也许可能是题目太复杂了）

1. 我们看题目中的那几点要求，意思就是写一个函数：

   • 可以传入两个参数，一个是url，一个是 url中的参数，不过前面这个参数是必须要传的，后面则是可选的。

   • 返回值根据传入的参数来定。如果只传了url，那么就要将url中的参数和对应的参数值都返回（放在一个对象中）。如果是两个参数都传了，那么返回值就是url中对应的参数值。

   • 特殊情况：如果url中没有参数、参数值，返回空字符串或者空对象。如果有多个url中的参数是同名的（比如题目中给的例子，key），那么将他们的参数值放在一个数组中。

2. 小细节：题目给的示例中输出：{'key':[1, 2, 3] ,'test':4 } ，参数值是数字，但是给的 url 是字符串，所以要将参数值从字符串处理成数字。

代码：

spilt是字符串方法：string.spilt() ，作用是将字符串分割成字符串数组。

let url = 'http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe key'

function getUrl(params,temp) {
// 将url分割，取 ？ 和 # 之间的字符串。
    let query = params.split('?')[1].split('#')[0]
// 将 key=1&key=2&key=3&test=4 ，依据 & 切割成  ，['key=1','key=2','key=3','test=4'] 
    let ans = query.split('&')  
    
    let res = {}  // 返回的对象
    
    for(let i=0;i<ans.length;i++){
        let re = ans[i].split('=')
       // 如果 对象中此参数值 不等于undefined，那么它是第二次及以上出现
        if(res[re[0]] !== undefined){
         // 如果是数组，说明参数是出现第三次及以上
            if(res[re[0]] instanceof Array){ 
                res[re[0]].push(Number(re[1]))
                // 也可以使用展开运算符
               // res[re[0]]=[...res[re[0]],Number(re[1])]
            }else{
            // 参数第二次出现。直接使用一个中括号，就会变成一个数组
                res[re[0]] =[res[re[0]],Number(re[1])]  
            }
           
        }else{  
        // 第一次出现，注意，结果中的参数值是数字，但是re[1] 是字符串。用 Number强制类型转换一下，就会变成数字
            res[re[0]] = Number(re[1])
        }

    }
  //使用三元运算符，判断函数是否传入第二个参数，依据判断返回不同的结果
    return temp?res[temp]:res
}
console.log(getUrl(url,'key'))  // 输出结果[1,2,3]
console.log(getUrl(url)  // 输出结果 {'key':{1,2,3},'test':4}