JavaScript 将地址栏参数 Object 对象

Question

window.location 可获取地址栏的一系列信息，并且每个浏览器都支持该属性，非常方便。而获取到的问号后面的参数可以进行加工转变成我们所想要的键值对。

Location 的属性

属性名	例子	说明
hash	#contents	返回URL的hash（#后跟零或多个字符），如果URL中不包含散列，则返回空字符串
host	www.wrox.com:80	返回服务器名称和端口号（如果有）
hostname	www.wrox.com	返回不带端口号的服务器名称
href	http://www.wrox.com	返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值
pathname	WileyCDA	返回URL中的目录或文件名
port	8080	返回URL中指定的端口号。如果URL中不包含端口号则返回空字符串
protocol	http:	返回页面的使用协议。通常是http:或https:
search	?q=javascript	返回URL的查询字符串，这个字符串以问号开头

而修改了其中的任何属性，都会使得页面刷新，当然页面刷新还有其它方式。

Location 的刷新

location.assign(url);            　　// 跳转链接
location.href = url;            　　 // 跳转链接
window.location = url;              // 跳转链接
location.replace(url);              // 链接链接，不保存于历史纪录
location.reload();            　　  // 刷新，从缓存中读取
location.reload(true);             // 刷新，重新从服务器读取

queryString 参数转换为对象

function getQueryStringArgs() {
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
        args = {},
        items = qs.length ? qs.split("&") : [],
        item = null,
        name = null,
        value = null,
        i = 0,
        len = items.length;

    for (i = 0; i < len; i++) {
        item = items[i].split("=");
        
        // decodeURIComponent解码
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        
        if (name.length) {
            args[name] = value;
        }
    }

    return args;
}

通过调用 getQueryStringArgs() 方法就可以返回地址栏中的参数信息，并保存于对象中。

对象转换为 queryString 查询参数

// json to queryString
cleanArray(actual) {
  const newArray = []
  for (let i = 0; i < actual.length; i++) {
    if (actual[i]) {
      newArray.push(actual[i])
    }
  }
  return newArray
},
param(json) {
  if (!json) return ''
  return this.cleanArray(Object.keys(json).map(key => {
    if (json[key] === undefined)
      return ''
    return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
  })).join('&')
},