location对象

我正在参与掘金新人创作活动，一起开启写作之路。

今天来看一看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.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()作为最后一行代码。