BOM之location对象

一作用

提供了当前窗口中加载文档的信息，以及通常的导航功能
既是window的属性，也是document的属性
保存着当前加载文档的信息
保存把URL解析为离散片段后能够通过属性访问的信息

二属性

三方法

查询字符串

方法：location.search
返回：返回了从问号开始直到URL末尾的所有内容

程序实现：解析查询字符串

实现一：

1、解析后的参数将被保存到args对象，这个对象以字面量形式创建

2、把查询字符串按照&分割成数组，每个元素的形式为name=value

3、for循环将每一个元素按照=分割成数组，数组第一项是参数名，第二项是参数值

4、参数名和参数值通过decodeURIComponent()解码后保存到name和value变量中

扫描二维码关注公众号，回复： 13489607 查看本文章

5、name作为属性 value作为该属性的值被添加到args对象

let getQueryStringArgs = function() {
    // 取得没有开头问号的查询字符串
    let qs = (location.search.length > 0 ? location.search.substring(1): "");
    // 保存数据的对象
    let args = {};
    // 把每个参数添加到args对象
    for(let item of qs.split("&").map(kv => kv.split('='))) {
        let name = decodeURIComponent(item[0]);
        let value = decodeURIComponent(item[1]);
        if(name.length){
            args[name] = value;
        }
    }
    return args;
}

实现二：使用URLSearchParams构造函数

参数：一个查询字符串

可作为可迭代对象

实例方法： get() set() delete()

let  qs = '?q=javascript&num=10';
let  searchParams = new URLSearchParams(qs);
console.log(searchParams);//searchParams:  URLSearchParams { 'q' => 'javascript', 'num' => '10' }
console.log(searchParams.toString());//q=javascript&num=10
//查询是否有某个参数
searchParams.has('num');//true
searchParams.get('num');//10

//添加某个参数
searchParams.set("page", "3");
console.log(searchParams.toString());//q=javascript&num=10&page=3

//删除某个参数
searchParams.delete("page");
console.log(searchParams.toString());//q=javascript&num=10

for(let param of searchParams){
    console.log('param: ', param);
    // param:  [ 'q', 'javascript' ]
    // param:  [ 'num', '10' ]
}

操作地址

方法一：location.assign(URL)

方法二：window.location = URL

方法三：location.href = URL

方法四：location.replace()

方法五：location.reload()

除了hash之后，修改location的其他属性的其中一个，就会导致页面重新加载新URL

一 作用

二 属性

三 方法

猜你喜欢

一作用

二属性

三方法