查询字符串(queryString)

最新推荐文章于 2023-03-12 17:47:37 发布

xhello

最新推荐文章于 2023-03-12 17:47:37 发布

阅读量375

点赞数 3

本文链接：https://blog.csdn.net/xhello/article/details/119682739

版权

本文介绍了两种方法解析和转换URL查询字符串。第一种方法通过split和map操作将字符串转化为对象，处理重复键值对时将值转为数组。第二种方法使用reduce实现相同功能，但代码更简洁。此外，还提供了将对象还原为查询字符串的函数。

摘要由CSDN通过智能技术生成

给你一段字符串'foo=bar&abc=xyz&abc=123'，queryString.parse('foo=bar&abc=xyz&abc=123')。

把上面那段字符串转成下面这种格式：

        const queryString = {
			    parse() {
			        let arg = arguments[0];
			        let obj = {}
			        let arr = arg.split("&")
			        arr = arr.map(item => {
			            return item.split("=");
			        })	
			        for(var i=0;i<arr.length;i++){
			            var item = arr[i][0];
			            if(obj[item]){
			                obj[item] = [obj[item]].concat([arr[i][1]])
			            }else{
			                obj[item]=item
			            }
			        }
			        return obj;
			    }
			};
			console.log(queryString.parse('foo=bar&abc=xyz&abc=123'));

上面那段代码是把它转成图片需要的那种格式但是相对来说代码量比较多，于是就有了下面这种方法：

           const queryString = {
			    parse(str) {
			       return str.split("&").reduce((prev,next)=>{
					   const [key,val] = next.split("=")
					   // 对于重复存在的key值转换成数组方式
					   if(!prev[key]){
						   prev[key] = val
					   }else{
						   prve[key] = [val].concat(prev[key])
					   }
				   })
				   return prev
			    }
			};

这段代码同样可以实现图片所要的效果，而且相对于上段代码来说代码量相对较少，就是不太好理解。

            queryString.objToStr = function(obj){
				//取出它的key
				const keys = Object.keys(obj)
				// 遍历这个key的集合取出每一个key
				return keys.reduce((prev,key)=>{
					//获取对应的值
					const curr = obj[key]
					// 判断它是否是一个数组
					if(curr instanceof Array){
						// 将数组转换成一个由key=val组成的字符串的集合然后合并到原数组里
						prev = prev.concat(curr.map(item=>key+"="+item))
					}
					//将当前的key与他的值组合成一个字符串扔给统一的数组
					else{
						prev.push(key+"="+obj[key])
					}
					return prev
				},[].join("&"))
			}

👆这段代码是将图片所需要的那种效果转变成原来的字符串，需要的自取。