location 是最有用的 BOM 对象之一，提供了当前窗口中加载文档的信息，以及通常的导航功能。主要是对浏览器url地址相关数据的获取和定义。

1. location常用属性

• location.href: 返回当前页面的完整的URL地址；
• location.search: 返回URL后面的参数(类似于"?name=lc&age=20")；
• location.protocol: 返回页面使用的协议(通常是"http:“或"https:”)；
• location.host: 返回页面的域名及端口号；
• location.hostname: 返回页面的域名；
• location.port: 返回页面的端口号；
• location.pathname: 返回页面中的路径或文件名；
• location.origin: 返回URL源地址；
• location.hash: 返回URL 散列值（#后面的内容），如果没有则为空字符串。

以百度搜索后的url地址取一小段为例：

// 以https://www.baidu.com/s?wd=location&rsv_spt=1#11为例
location.href; //'https://www.baidu.com/s?wd=location&rsv_spt=1'
location.protocol; // 'https:'
location.host; // 'www.baidu.com'  如果有端口: 'www.baidu.com:port'
location.hostname; // 'www.baidu.com'
location.port; //''
location.pathname; // '/s'
location.search; // '?wd=location&rsv_spt=1'
location.origin; // 'https://www.baidu.com'
location.hash; // '#11'

其中用的最多的就是location.href 和 location.search了。

从上面我们可以看到location.search获取到的是一串字符串，但是显然并不是我们日常开发中想要的数据格式，如果想要将获取到的参数处理成类似对象那种键值的形式要怎么做呢？下面我来介绍一种自己常用的一种方法。
(这里涉及到数组的相关方法和Map，不熟悉的话可以查看小shy之前的博客，里面有很详细的讲解哦。)

// 1. 获取所有参数
// 2. 去掉? -> 以&为分隔符将字符串分成数组['wd=location', 'rsv_spt=1']
// 3. 再把数组中的每一项以=分隔成[['wd', 'location'], ['rsv_spt', '1']]
// 4. 这种数据格式是不是很熟悉，对，可以放入Map结构中
// 注意：url参数通常是被编码后的格式，所以处理前先将参数解码
let search = decodeURIComponent(location.search); // ?wd=location&rsv_spt=1 以此为例
const searchMap = new Map(search.slice(1).split("&").map(v => v.split("=")));
searchMap.get("wd"); // location

2. 设置location属性

location的属性不仅可以获取，也可以设置相关属性，部分属性设置后会导致重新加载新的URL。

这里以https://www.baidu.com为例：

location.hash = "#123"; // url: https://www.baidu.com/#123 

// 参数修改
location.search = "?wd=123" // url: https://www.baidu.com/?wd=location 会重新加载

// 修改host
location.hash = "www.bilibili.com"; // url:https://www.bilibili.com/ 页面会重新加载，跳转到bilibili

// 修改href
location.href = "https://www.bilibili.com/"; // url: https://www.bilibili.com 是否会跳转可想而知

3. location常用方法

• location.assign(url): 跳转到url，浏览器会记录历史(可以后退)；
• location.replace(url): 跳转到url，浏览器不会记录历史(不可以后退)；
• location.reload(boolean): 重新加载当前显示的页面，不传参数，页面会以最有效的方式重新加载。也就是说，如果页面自上次请求以来没有修改过，浏览器可能会从缓存中加载页面。如果想强制从服务器重新加载，可以给 reload()传个 true。

以当前页面为百度为例，如下：

location.assign("https://www.bilibili.com");

可以后退回百度；

location.replace("https://www.bilibili.com");

无法后退；

// 正常重新加载
location.reload();

// 强制从服务器重新加载
location.reload(true);