url查询参数的属性 - location对象

location 是提供当前窗口加载文档的信息；
假设浏览器当前加载的URLhttp://foouser:barpassword@www.wrox.com:80/WileyCDA/?
q=javascript#contents
location 对象的内容如下：

• location.hash - “#contents”
• location.host - “www.wrox.com:80”
• location.hostname - “www.wrox.com” 服务器名
• location.href - “http://www.wrox.com:80/WileyCDA/?q=javascript#contents”
• location.pathname - “/WileyCDA/”
• location.port - “80” 请求的端口口，则返回空字
• location.protocol - “http:” 页面使用的是 “http:” 或 location.search “?q=javascript”
• location.username - “foouser” 域名前指定
• ocation.password - “barpassword” 域名前指定
• location.origin - “http://www.wrox.com” URL的源地

虽然location.search 返回了从问号开始直到URL末尾的所有内容，但没有办法逐个访问每个查询参数。下面的函数解析了查询字符串，并返回一个以每个查询参数为属性的对象：

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

使用：

// 假设查询字符串为?q=javascript&num=10
let args = getQueryStringArgs();
alert(args["q"]); // "javascript"
alert(args["num"]); // "10"

现在，查询字符串中的每个参数都是返回对象的一个属性，这样使用起来就方便了。
URLSearchParams 提供了一组标准API方法，通过它们可以检查和修改查询字符串。给
URLSearchParams 构造函数传入一个查询字符串，就可以创建一个实例。这个实例上暴露了
get() 、 set() 和 delete() 等方法，可以对查询字符串执行相应操作。下面来看一个例子：

let qs = "?q=javascript&num=10";
let searchParams = new URLSearchParams(qs);
alert(searchParams.toString()); // " q=javascript&num=10"
searchParams.has("num"); // true
searchParams.get("num"); // 10
searchParams.set("page", "3");
alert(searchParams.toString()); // " q=javascript&num=10&page=3"
searchParams.delete("q");
alert(searchParams.toString()); // " num=10&page=3"

大多数支持 URLSearchParams 的浏览器也支持将 URLSearchParams 的实例用作可迭代对象：

let qs = "?q=javascript&num=10";
let searchParams = new URLSearchParams(qs);
for (let param of searchParams) {
	console.log(param);
}
// ["q", "javascript"] // ["num", "10"]

摘抄与总结于《Javascript高级程序设计》书籍