70%開發工程師不知道的獲取url的方式 --最簡單沒有之一

封裝 獲取一個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 201九、 0八、 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 201九、 0八、 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)

不善言辭 願你有所收穫

**信念
                         道之所限
                                     願力突破**
複製代碼