在 JavaScript 中，我们可以使用 window 对象下的 location 子对象来操作当前窗口的 URL。所谓 URL，指的就是页面地址。
JavaScript location 对象的属性
在 JavaScript 中，location 对象为我们提供了非常多用于操作 URL 的属性，常用的如下表所示。假如有一个页面的完整 URL 为：
https://www.lvyenet.com:8080/products/detail?id=1&size=10#overview| 属性 | 说明 |
|---|---|
| href | 当前页面的完整 URL |
| protocol | 当前 URL 的协议部分（包括冒号），比如 "https:" |
| host | 主机名和端口号，比如 "www.lvyenet.com:8080" |
| hostname | 只包含主机名，比如 "www.lvyenet.com" |
| port | 只包含端口号，比如 "8080" |
| pathname | 只包含路径部分，比如 "/products/detail " |
| search | 只包含查询参数（包括问号），比如 "?id=1&size=10" |
| hash | 只包含锚点部分（包括 # 号），比如 "#overview " |
提示: location 对象本质上是 “window 对象” 的属性。因此在使用时，可以省略 “window.” 前缀。
示例 1：location 对象的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
console.log("location.href：", location.href);
console.log("location.protocol：", location.protocol);
console.log("location.host：", location.host);
console.log("location.hostname：", location.hostname);
console.log("location.port：", location.port);
console.log("location.pathname：", location.pathname);
console.log("location.search：", location.search);
console.log("location.hash：", location.hash);
</script>
</body>
</html>运行结果如下。
location.href：https://www.lvyenet.com:8080/products/detail?id=1&size=10#overview
location.protocol：https:
location.host：www.lvyenet.com:8080
location.hostname：www.lvyenet.com
location.port：8080
location.pathname：/products/detail
location.search：?id=1&size=10
location.hash：#overview分析：
需要注意的是，上面代码会因为你当前页面地址的不同，然后输出结果也会不同。
示例 2：提取 search 中的参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 假设当前 URL 有参数 ?id=10&name=jack
const params = new URLSearchParams(location.search);
console.log(params.get("id"));
console.log(params.get("name"));
</script>
</body>
</html>
运行结果如下（假如访问的地址是“http://127.0.0.1:5500/test.html?id=10&name=jack”）。
10
jack分析：
当我们通过 location.search 拿到 “?id=10&name=jack“ 这种字符串时，如果想把 id 的值（10）取出来，以前需要编写十几行正则代码来解析 URL 参数。而现在我们可以使用 URLSearchParams() 函数来提取，非常的方便。
JavaScript location 对象的方法
在 JavaScript 中，location 对象主要提供了 3 种方法来帮助我们控制页面的导航。
| 方法 | 说明 |
|---|---|
| assign() | 加载新页面（有历史记录，可以后退） |
| replace() | 替换当前页面（无历史记录，无法后退） |
| reload() | 刷新当前页面（相当于按下 F5） |
提示: 由于客观存在的技术原因，使用绿叶网的 HTML 在线编译器运行 location 对象方法会有问题。对于本节后面的例子，建议小伙伴们在本地自行测试。
1. location.assign()
在 JavaScript 中，我们可以使用 location 对象的 assign() 方法在当前窗口加载一个新页面。使用 location.assign() 方法，我们可以实现在当前窗口跳转到指定页面的效果。
示例 3：使用 location.assign()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn">跳转</button>
<script>
const oBtn = document.getElementById("btn");
oBtn.addEventListener("click", function() {
location.assign("https://www.baidu.com");
});
</script>
</body>
</html>页面效果如下图所示。
分析：
当我们点击【跳转】按钮之后，会在当前窗口直接跳转到百度首页。对于这个例子来说，下面 2 种方式是等价的。在实际开发中，大多数情况下我们使用的都是方式 2（要重点掌握）。
// 方式 1
location.assign("https://www.baidu.com");
// 方式 2
location.href = "https://www.baidu.com";2. location.replace()
在 JavaScript 中，location.replace() 方法也会加载一个新页面，但与 location.assign() 不同的是：location.replace() 会使用新 URL 替换掉浏览器历史记录中当前页面的 URL。
也就是说，如果使用 location.replace() 来加载新页面。那么用户点击浏览器的 “后退” 按钮时，不会回到原来的页面。
示例 4：使用 location.replace()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn">跳转</button>
<script>
const oBtn = document.getElementById("btn");
oBtn.addEventListener("click", function() {
location.replace("https://www.baidu.com");
});
</script>
</body>
</html>页面效果如下图所示。
分析：
当我们点击【跳转】按钮之后，会在当前窗口直接跳转到百度首页。但是当点击浏览器的后退按钮之后，并不会跳转到原来的页面。
3. location.reload()
在 JavaScript 中，我们可以使用 location.reload() 方法来重新加载当前页面，也就是 “刷新当前页面”。
在实际开发中，location.reload() 方法用得非常多（尤其是重新加载资源时），而 location.assign() 和 location.replace() 方法用得较少。
示例 5：使用 location.reload()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn">刷新</button>
<script>
const oBtn = document.getElementById("btn");
oBtn.addEventListener("click", function() {
location.reload();
});
</script>
</body>
</html>页面效果如下图所示。
分析：
location.reload() 相当于在浏览器中使用 “F5” 快捷键来刷新页面。只不过 “F5” 是手动刷新，而 location.reload() 是使用程序刷新。
