封装 获取一个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] => techer
    let value = n[1];
    // value  n[1] => 1
    // value  n[1] => zhufeng
    // value  n[1] => aaa
    result[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、 08、 31
 */
 //  写 注释 和 写好清晰明了的注释你会很受他人欢迎和 相应的尊重

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);

那么那么 我所说的百分之70%开发工程不知道的 在哪里 他来了

~function(){
    /*
     * getParam:获取URL问号传参中某一个参数对应的值
     *   @params
     *      key:要获取值的属性名
     *   @return
     *      当前传递KEY对应的属性值
     * by  Take_fly  on 2019、 08、 31
     */
    function getParam(key){
        //1.先获取URL字符串中所有问号参数信息
        //验证是否存在问号,不存在无需处理
        let obj={},
            _this=this,
            askIn=_this.indexOf('?');
        if(askIn===-1) return;
        //获取问号后面的参数信息
        let link=document.createElement('a'),
            askText=null;
        link.href=_this;
        askText=link.search.substring(1);
        //把参数信息解析成为键值对的方式
        askText.split('&').forEach(item=>{
            let [key,value] = item.split('=');
            obj[key] = value;
        });
        //2.获取对应的属性值并返回
        return obj[key];
    }
    String.prototype.getParam=getParam;
}();
var url="locallhost?key1=val1&key2=val2&key3=val3";
console.log(url.getParam("key3")); //=>'val3'

知道你们都是那么聪明的高级开发工程师 其中一眼秒懂了吧 在控制台 输出consoile .dir(a)

不善言辞 愿你有所收获

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