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

最 low的方法实现

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

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

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


/** 结果：{*    lx:1,*    name:'zhufeng',*    teacher:'aaa',*    HASH:'box'* }*/
let url = 'http://www.zhufengpeixun.cn/index.html?lx=1&name=zhufeng&teacher=aaa#box';
//1.获取问号或者井号后面的值let askIndex = url.indexOf('?'); // ? 第一次出现的位置索引 存在 askIndex
let wellIndex = url.indexOf('#'); // # 第一次出现的位置索引 存在 wellIndex
let askText = url.substring(askIndex + 1, wellIndex); // 从？的具体索引 +1 截取到# 的索引位置不包括#号   存在  askText
let 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= wellText
console.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 2019、 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 = 'http://www.zhufengpeixun.cn/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 = 'http://www.zhufengpeixun.cn/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 = 'http://www.zhufengpeixun.cn/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 = 'http://www.zhufengpeixun.cn/index.html?lx=1&name=zhufeng&teacher=aaa#box';
let paramsObj = queryURLParams(aa);
console.log(paramsObj);

基于封装方法和正则的优点

代码健壮性强
容错兼容问题优化

小编的处女作不善言辞愿你有所收获

               **信念道之所限愿力突破**

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

从输入一个URL地址到浏览器完成渲染的整个过程
从输入一个URL地址到浏览器完成渲染的整个过程 1. 浏览器地址输入URL并回车 2. 浏览器查找当前URL是否存在缓存,并比较缓存是否过期 3. DNS解析URL对应的IP DNS解析实际上就是寻找 ...
php获取接口url地址,PHP 获取完整URL地址
/** * 获取当前完整URL * @return string */ function get_url() { $sys_protocal = isset($_SERVER['SERVER_PORT ...
php 获取内容页图片,织梦DEDECMS内容页获取图片URL地址的方法
织梦DEDECMS内容页获取图片URL地址的方法 {dede:sql sql="select * from dede_uploads where arcid = ~id~"} [f ...
php获取所有url地址_PHP_php 获取完整url地址，主要是获取到地址栏的一些信 - phpStudy...
php 获取完整url地址主要是获取到地址栏的一些信息,域名,端口参数等复制代码代码如下: //获取域名或主机地址 echo $_SERVER['HTTP_HOST']." " ...
php获取所有url地址_php 获取完整url地址
php 获取完整url地址主要是获取到地址栏的一些信息,域名,端口参数等复制代码代码如下: //获取域名或主机地址 echo $_SERVER['HTTP_HOST']." " ...
php获取所有url地址_php 获取完整url地址实例详解
例1,获取到地址栏的一些信息,域名,端口参数等. 复制代码代码示例: //获取域名或主机地址 echo $_SERVER['HTTP_HOST']." "; //获取网页地址 e ...
Angular4_获取当前Url地址和获取Url传递的参数
import { Location } from '@angular/common'; console.log(location.pathname); 以上就是获取URL地址获取参数: import ...
javascript获取网页URL地址及参数等
2019独角兽企业重金招聘Python工程师标准>>> 用javascript获取url网址信息 Java代码 <script type="text/javascri ...
URL地址问号传参解析
一.什么是URL参数? URL 参数是追加到 URL 上的一个名称/值对.参数以问号 (?) 开始并采用 name=value 的格式.如果存在多个 URL 参数,则参数之间用一个 (&) 符 ...
js获取页面URL地址并判断URL是否包含具体值
本文介绍jquery/js获取当前页面url地址的方法,在jquery与js中获取当前页面url方法是一样的,因为jquery没有自己相关的函数,使用js 的windows方法来获取,相关方法如下: ...

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

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

最 low的方法实现

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

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

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

基于封装方法和正则的优点

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

最新文章

热门文章

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

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

最 low的方法实现

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

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

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

基于封装方法和正则的 优点

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

最新文章

热门文章

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

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

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

基于封装方法和正则的优点