我正在参与掘金新人创作活动，一起开启写作之路。
今天来看一看BOM里面的location对象。
BOM即Browser Object Model，浏览器对象模型，它提供了与网页无关的浏览器功能对象，而location对象就是其中之一。
location对象主要提供当前窗口中加载文档的信息以及导航功能。需要注意的是window.location和document.location都指向同一个对象，也就是说location对象是window和document的共有属性。
打开控制台验证一下，输入 window.location === document.location 得到结果true.
接下来看看location对象主要用来做些什么。
保存着URL信息
这里以下面这一个URL作为例子，来看看它的各部分如何通过location的属性获取。
https://www.juejin.cn/frontend?sort=newest
常用的有一下这些属性：
| 属性 | 值(字符串) | 说明 |
|---|---|---|
| location.protocal | https: | 页面使用的协议 |
| location.hostname | www.juejin.cn | 服务器名 |
| location.pathname | /frontend | URL路径与文件名 |
| location.search | ?sort=newest | URL查询字符串，是以?开头的字符串 |
当然还有其他一些属性，如：
location.hash获取哈希地址如 '#content'
location.href获取当前加载页面完整URL
location.port获取当前端口号
获取查询字符串
通过 location.search获得的是URL以问号开始直到末尾的所有内容,但没有办法逐个访问每个参数。
因此，URLSearchParams提供了一组标准API方法，看名字也知道它的作用了。
首先需要给URLSearchParams传入一个查询字符串，构建一个新的实例。
let qs = location.search // '?sort=newest&num=10'
let queryParams = new URLSearchParams(qs)
这个实例上暴露了几个方法： get() / set() / delete ，还可以使用 has() / toString() 方法。
get()
queryParams.get('sort') //'newest'
要注意的是，查询时传入的参数应该是一个字符串，否则会报错，当然你可以传入一个定义过的变量。
queryParams.get(sort) //Uncaught ReferenceError: sort is not defined
set()
queryParams.set('num' , 5) //和queryParams.set('num' , '5')结果一样
queryParams.toString() //'sort=newest&num=5'
has()
queryParams.has('sort') //true
还可以进行遍历
for(let item of queryParams){
console.log(item)
}
//打印出两个数组
//['sort' , 'newest']
//['num' , '5']
自己动手写一个解析查询字符串的函数
首先通过location.search()获取查询字符串并使用 substring() 去掉问号。
let qs = location.search.substring(1) //'sort=newest&num=10'
以 ’&‘ 分割字符串得到一个数组
qs.split('&') //['sort=newest' , 'num=10']
遍历数组建立映射
let arr = qs.split('&').map(x=>x.split('=')) //[['sort' , 'newest'] , ['num' , '10']]
由于参数名和值都可能经过编码，所以先使用decodeURIComponent()进行解码，然后新建一个对象保存它们。
let arg = {}
for(let item of arr){
let name = decodeURIComponent(item[0])
let value = decodeURIComponent(item[1])
if(name.length){
arg.name = value
}
}
最后再把arg返回就行啦。
完整代码
function getQueryParams(){
let qs = location.search.length > 0 ? location.search.substring(1): ''//'sort=newest&num=10'
let arg = {}
let arr = qs.split('&').map(x=>x.split('=')) //[['sort' , 'newest'] , ['num' , '10']]
for(let item of arr){
let name = decodeURIComponent(item[0])
let value = decodeURIComponent(item[1])
if(name.length){
arg.name = value
}
}
return arg
}
操作浏览器地址
location.assign()
调用 location.assign()方法并传入一个URL会跳转到新的URL，并增加一条浏览器历史记录，即可以回退到跳转前的页面。
location.assign('http://juejin.cn')
下面这两种方式与上面等价
location.href = 'http://juejin.cn'
window.location = 'http://juejin.cn'
修改location的属性
修改location的属性也会修改当前加载的页面。
location.hash = '#frontend'
location.search = '?sort=newest'
location.pathname = 'backend'
除了hash以外，只要修改了location的一个属性，那么就会导致页面重新加载URL
location.replace()
前面操作地址的方式都会增加浏览器历史记录，而使用replace()方法则不会产生记录，该方法接收一个URL。
location.replace('http://juejin.cn')
如果此前没有记录，那么上面语句执行跳转后，回退按钮将不可用，也就是说没有产生新的历史记录。
location.reload()
这个方法用于重新加载当前页面，它接收一个可选的参数，该参数是一个布尔值。传参与不传参区别如下：
location.reload() //重新加载当前页面，但可能从缓存加载(页面自上次请求以来没修改过时)
location.reload(true) //重新加载当前页面，从服务器加载
需要注意的是脚本中位于 reload() 之后的代码可能执行也可能不执行，因此最好将 reload()作为最后一行代码。
