【前端手撕】url解析

手写 URL 查询字符串解析器作用是把https://xxx.com?name张三age18这种网址后面的参数解析成一个方便调用的对象{ name: 张三, age: 18 }。思路是先做划分再逐一解析之后加入到resObj中需要注意的是1. 如果串里有相同的键则该键的值应该是一个数组。2. 中文或特殊字符会被编码需要解码。代码const parseUrl (url) { const tmpUrl url.split(?)[1] const resObj {} for (const item of tmpUrl.split()) { let [key, value] item.split() // 解码value value decodeURIComponent(value) if (resObj.hasOwnProperty(key)) { resObj[key] [].concat(resObj[key], value) } else { resObj[key] value } } return resObj }这里讲一下concatconcat作用是拼接两个数组但传参的话可以是数组也可以是值参数是数组把该数组的每个元素拉平只会拉平一层放入新数组。参数是非数组普通值把这个值原封不动作为一项放入新数组。这样无论resObj[key]当前是字符串还是数组都能干净利落地把它变成数组并追加新值。Tipd老师说有几个点可以改进一下没处理#锚点如果 URL 是?a1#topsplit(?)[1]拿到的会是a1#top结果对象会变成{ a#top: ... }逻辑会崩。没处理号HTML 表单中空格常被编码为但decodeURIComponent不会把转成空格导致解析错误。值里带了号会崩比如?q112split()会切成三个片段解构[key, value]只拿前两个后面的2直接丢掉。