失眠网 > 封装获取一个URL地址问号后面传递的参数信息以及哈希值HASH 方法

封装获取一个URL地址问号后面传递的参数信息以及哈希值HASH 方法

时间：2019-11-04 08:54:01

封装获取一个URL地址问号后面传递的参数信息以及哈希值 HASH 方法 <白话文>

最 low的方法实现

这是最终我们要拿到的结果

结果：{lx:1,name:'zhufeng',teacher:'aaa',HASH:'box'}最终我们要拿到的结果对象格式

详细的解析步骤走向秒懂步步解析

/** 结果：{* lx:1,* name:'zhufeng',* teacher:'aaa',* HASH:'box'* }*/let url = '/index.html?lx=1&name=zhufeng&teacher=aaa#box';//1.获取问号或者井号后面的值let askIndex = url.indexOf('?'); // ? 第一次出现的位置索引存在 askIndexlet wellIndex = url.indexOf('#'); // # 第一次出现的位置索引存在 wellIndexlet askText = url.substring(askIndex + 1, wellIndex); // 从？的具体索引 +1 截取到# 的索引位置不包括#号存在 askTextlet wellText = url.substring(wellIndex + 1); // 从#位置索引 +1 截取到最后存在 wellText// askText => "lx=1&name=zhufeng&teacher=aaa"// wellText => "box"//2.问号后面值的详细处理let result = {}; // 空对象let askAry = askText.split('&'); // 用指定的 & 分隔符把？号后面获取到的字符串拆成数组// askAry =>["lx=1", "name=zhufeng", "teacher=aaa"]askAry.forEach(item => {// forEach 遍历这个 askAry 数组// item：当前从数组中循环的这一项// item："lx=1"// item："name=zhufeng"// item："teacher=aaa"let n = item.split('='); // 在把数组中 item 的每一项用 = 拆分成数组// n [ '1x','1' ]// n [ 'name','zhufeng']// n [ 'teacher','aaa']let key = n[0];// key n[0] => 1x// key n[0] => name// key n[0] => techerlet value = n[1];// value n[1] => 1// value n[1] => zhufeng// value n[1] => aaaresult[key] = value;// key : value => 1x : 1// key : value => name : zhufeng// key : value => teacher : aaa});result['HASH'] = wellText;// key= HASH : wellText= wellTextconsole.log(result);// 控制台输出最终结果{lx: "1", name: "zhufeng", teacher: "aaa", HASH: "box"}HASH: "box"lx: "1"name: "zhufeng"teacher: "aaa"

没有什么是一张图解决不了事情，不行就两张看过图你会更清晰

如此 LOW 的东西你是不是看到害怕那么如此繁琐的东西怎么能不让<一等公民> FUNCTION 出来耍

啰嗦两句
编程开发最好的开发习惯
代码洁癖
代码强迫症
极客精神

封装的此方法足以让你应对开发实战的需求代码健壮应容错应强

/*** queryURLParams: 获取URL地址中间问号传参的信息和哈希值* @params*url [string] 要解析的URL字符串* @return*[object] 包含参数和哈希值信息的对象* by Take_fly on 、 07、 24*/// 写注释和写好清晰明了的注释你会很受他人欢迎和相应的尊重function queryURLParams(url) {//1.获取?和#后面的信息let askIn = url.indexOf('?'),wellIn = url.indexOf('#'),askText = '',wellText = '';// #不存在wellIn === -1 ? wellIn = url.length : null;// ?存在askIn >= 0 ? askText = url.substring(askIn + 1, wellIn) : null;wellText = url.substring(wellIn + 1);//2.获取每一部分信息let result = {};wellText !== '' ? result['HASH'] = wellText : null;if (askText !== '') {let ary = askText.split('&');ary.forEach(item => {let itemAry = item.split('=');result[itemAry[0]] = itemAry[1];});}return result;}

此时就结束了， no 方法封装出不执行那就是一堆破代码有用么就好比你买一台全自动洗衣机回家，往墙角一堆，那就是是一个大破铁壳子他有什么用途么没有，函数也是如此

各种情况下代码的容错性let aa = '/index.html?lx=1&name=zhufeng&teacher=aaa#box';let paramsObj = queryURLParams(aa);console.log(paramsObj);结果：{HASH: "box", lx: "1", name: "zhufeng", teacher: "aaa"}；没有哈希值也不会报错let aa = '/index.html?lx=1&name=zhufeng&teacher=aaa';let paramsObj = queryURLParams(aa);console.log(paramsObj);结果： {lx: "1", name: "zhufeng", teacher: "aaa"}；此时的URL 和 HASH 都没有 let aa = '/index.html';let paramsObj = queryURLParams(aa);console.log(paramsObj);最终结果：对象{}

此时的你是不是在吐槽小编是不是LOW 了逼格来了o 优秀的 REGEXP 效率那是无法估量的

基于正则封装的才是最完美的

代码的容错性和健壮性会更强大

function queryURLParams(url) {let result = {},reg1 = /([^?=&#]+)=([^?=&#]+)/g,reg2 = /#([^?=&#]+)/g;url.replace(reg1, (n, x, y) => result[x] = y);url.replace(reg2, (n, x) => result['HASH'] = x);return result;} let aa = '/index.html?lx=1&name=zhufeng&teacher=aaa#box';let paramsObj = queryURLParams(aa);console.log(paramsObj);