location对象相关

　　JS是由DOM（文档对象模型）、BOM（浏览器对象模型）、以及ECMA组成，而location对象是BOM中的一个非常重要的对象，所有关于地址栏信息的内容都在这里。了解location对象之前让我们先来了解下URL地址的组成。“http://1.11.111.11:8080/locationtest/locationtest.html?id=1234&name=abcd“; 以此为例，URL地址由协议、域名、端口、路径、参数、哈希等组成。下面我们就从location各个对象的属性来分析下这地址。

对象属性：

　　location.href = “http://1.11.111.11:8080/locationtest/locationtest.html?id=1234&name=abcd“; (整个URL路径)

　　location.origin = “http://1.11.111.11:8080“; (协议名称及主机名称、端口号)

　　location.host = “1.11.111.11:8080”; (主机名称和端口号)

　　location.port = “8080”; (端口号)

　　location.hostname = “1.11.111.11”；(主机名称)

　　location.search= “?id=1234&name=abcd”; (问号 (?) 之后的部分)

　　location.pathname = “/locationtest/locationtest.html”; (路径)

　　location.protocol = “http:”; (设置或返回URL路径的协议)

　　location.hash = “#hash”; (哈希，#代表网页中的一个位置。其右面的字符，就是该位置的标识符;#是用来指导浏览器动作的)

对象方法： 

location.reload(true); (重新加载当前文档)

　// true 表示强制刷新强制加载 ，就是得到服务器去重新请求数据

　// false 是从本地读取缓存

location.replace(“locationtest2.html”)； 
(以新的文档替换当前文档，替换后浏览器回退功能不会回退到之前的文档；注意参数值如果不加协议名称，如：location.replace(“www.baidu.com”);将不会跳转，会在当前文档的目录路径下去寻找”www.baidu.com”这个新文档，如果没有会404；
修改成location.replace(“https://www.baidu.com/“);将会正确的替换到百度的首页面；)

　　了解完location对象的基本方法和属性后，再来学习下location对象常用的一个功能的封装：即获取URL地址的参数转换成对象的形式。常见的有两种方法，用正则表达式和普通的字符串拼接。推荐用正则，因为URL地址是可以任由用户输入的，

用正则则不会出错，可能谈到正则，很多人就产生了抵触心理，其实对于正则不要我我们理解的很深刻，能读懂一些简单的以及能写一些简单的就够了。这里推荐一篇关于学习正则的文章：http://www.cnblogs.com/virus1102/p/4966789.html

方法1：正则

function getQueryObject(url) {
    url = url == null ? window.location.href : url;
    var search = url.substring(url.lastIndexOf("?") + 1); // name=1&dd=ddd
    var obj = {};
    var reg = /([^?&=]+)=([^?&=]*)/g;
    search.replace(reg, function (rs, $1, $2) {
      // 注意：ECMAScript v3 规定，replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下，
      // 每个匹配都调用该函数，它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来
      // 的参数是与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数。接下来的参数是一个整数，声明了匹配
      // 在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。
        var name = decodeURIComponent($1);
        var val = decodeURIComponent($2);               
        val = String(val);
        obj[name] = val;
        return rs;
    });
    return obj;
}

 方法2：正则

function urlParse(){
    // let url = window.location.search;  // ?id=12345&a=b
    let url = "http://www.baidu.com?name=javascript&keyword=word"  
    let obj = {};
    // [?&]匹配?或者&的一个字符,[^?&]匹配非?或者&的任意一个字符，+表示前面的匹配项（[^?&]）为一个或多个，=匹配=
    let reg = /[?&][^?&]+=[^?&]+/g;  
    let arr = url.match(reg); //[?id=12345,&a=b]
    if(arr){
        arr.forEach((item)=>{
            let tempArr = item.substring(1).split('='); // [id,12345]
            let key = decodeURIComponent(tempArr[0]);
            let val = decodeURIComponent(tempArr[1]);
            obj[key] = val;
        })
    }
    return obj;
}

 方法3：

 function urlParse(url){
    //  split()方法将字符串用指定的字符分割成数组，返回的是被分隔的数组，但数组中不包含该字符
     var arr1 = url.split("?");
     var params = arr1[1].split("&");
     var obj = {};//声明对象
     for(var i=0;i<params.length;i++){
         var param = params[i].split("=");
         obj[param[0]] = param[1];//为对象赋值
    }
    return obj;
 }

 

　　这是我第一次写文章，目的也很简单，就是将自己的平时的学习历程记录下来，同时方便以后的复习，所以很多内容都是网上一搜一大把的，但是自己总结后的体会是不一样的。如果有路过的朋友，希望收藏点赞，最后希望自己在前端这条路越走越远，