14.2 location 对象：URL 解析、跳转、刷新

location 对象是 BOM（浏览器对象模型）中最实用的对象之一，它封装了当前窗口所加载文档的 URL 信息，并提供了一系列控制页面跳转和刷新的方法。理解 location，是处理前端路由、参数传递、页面重定向等任务的基础。

14.2.1 URL 的组成部分

在深入 location 的属性和方法之前，先通过一个完整的 URL 来回顾一下标准的构成部分。以这个地址为例：

https://www.example.com:8080/path/page?name=Alice&age=25#section2

它可分为以下几个部分：

协议（protocol）：https:
主机名（hostname）：www.example.com
端口号（port）：8080
主机（host）：www.example.com:8080（主机名 + 端口号）
路径（pathname）：/path/page
查询字符串（search）：?name=Alice&age=25
哈希（hash）：#section2
完整地址（href）：整个字符串

location 对象的一系列属性正好对应了这些组成部分，方便我们直接读取和修改。

14.2.2 location 对象的常用属性

| 属性 | 示例值（以刚才的 URL 为例） | 说明 |
| ------------------- | ---------------------------------- | ------------------------ |
| location.href | https://www.example.com:8080/... | 完整的 URL 字符串 |
| location.protocol | https: | 协议（包含冒号） |
| location.host | www.example.com:8080 | 主机名 + 端口号 |
| location.hostname | www.example.com | 纯主机名，不含端口 |
| location.port | 8080 | 端口号（字符串） |
| location.pathname | /path/page | 路径，以 / 开头 |
| location.search | ?name=Alice&age=25 | 查询字符串（包含 ?） |
| location.hash | #section2 | 哈希部分（包含 #） |
| location.origin | https://www.example.com:8080 | 协议 + 主机 + 端口（只读）|

使用示例：

// 假设当前页面 URL 为 https://myblog.com/articles?id=123#comments
console.log(location.hostname);  // "myblog.com"
console.log(location.pathname); // "/articles"
console.log(location.search);   // "?id=123"
console.log(location.hash);     // "#comments"

// 修改属性值会导致页面跳转（浏览器重定向）
location.pathname = '/new-page'; // 等同于跳转到 /new-page

14.2.3 解析查询字符串的实用技巧

location.search 返回的是原始查询字符串（包含 ?），但它并不是一个对象，不方便直接取用参数。实际开发中通常需要手动封装一个解析函数：

function getQueryParams(url) {
  const searchParams = new URLSearchParams(url ? url : location.search);
  const params = {};
  for (const [key, value] of searchParams) {
    params[key] = value;
  }
  return params;
}

// 当前 URL 为 https://example.com/?page=1&size=10
const query = getQueryParams();
console.log(query.page); // "1"
console.log(query.size); // "10"

URLSearchParams 是浏览器原生提供的 API，可以方便地对查询字符串进行获取、遍历、添加、删除等操作，比手动分割字符串更加稳健。

14.2.4 页面跳转：assign、replace 和直接赋值

location 对象提供了三种主要方式让浏览器跳转到新页面。

1. `location.assign(url)`

location.assign('https://example.com');

打开新的 URL，并在浏览历史中创建一条新记录，用户可以通过浏览器的“后退”按钮返回原页面。
功能上与 location.href = 'xxx' 或 window.location = 'xxx' 完全一致。

2. `location.replace(url)`

location.replace('https://example.com');

用新的 URL 替换当前页面，不会保留当前页面在浏览历史中的记录。
用户点击“后退”按钮时，无法回到被替换前的页面。
适合用于登录后跳转到首页、支付完成后跳转到结果页等场景，避免用户误退回敏感操作页面。

3. 直接修改属性

location.href = 'https://example.com';
location.pathname = '/about';
location.hash = '#top';

原理与 assign() 相同，在浏览历史中增加新记录。
修改 hash 仅会导致页面内滚动或触发 hashchange 事件，不会重新加载页面，是前端路由（特别是 SPA 的 hash 模式）的基础。

14.2.5 页面刷新：reload()

location.reload();    // 从浏览器缓存重新加载
location.reload(true); // 强制从服务器重新加载（忽略缓存）

reload() 方法会重新加载当前页面。
不传参数时，浏览器可能优先使用缓存（具体行为因浏览器而异）。
传入 true（或某些浏览器中传入一个真值）表示强制跳过缓存，从服务器重新请求所有资源。
频繁调用 reload() 会影响用户体验和性能，一般只用于调试或明确的“刷新”按钮。

14.2.6 常见业务场景示例

1. 获取当前 URL 的指定参数

function getParam(name) {
  const params = new URLSearchParams(location.search);
  return params.get(name);
}
const userId = getParam('userId');

2. 跳转到不同子域

location.hostname = 'm.example.com'; // 跳转到移动版

3. 单页应用中的 hash 路由

// 监听 hash 变化实现简单路由
window.addEventListener('hashchange', function() {
  const hash = location.hash.slice(1); // 去掉 #
  // 根据 hash 渲染不同内容
  renderPage(hash);
});
// 初始加载时触发一次
window.dispatchEvent(new Event('hashchange'));

14.2.7 注意事项与最佳实践

修改 location 对象会引起页面跳转：除 hash 外，修改任何属性（或赋值给 location 自身）都会导致浏览器重新请求新的地址，当前页面的 JavaScript 状态会完全丢失。
避免用于敏感信息传递：URL 中的查询参数和 hash 对用户完全可见，不要在其中传递密码、令牌等敏感信息。若必须传递，应使用 URL-safe 的临时令牌，并配合过期机制。
location.origin 很有用：在需要组装绝对路径或进行跨域判断时，origin 属性可读、可靠且不易出错。
SPA 中慎用 reload：它与单页应用的状态管理理念相悖，会清除所有内存中的状态，导致用户操作丢失。在 SPA 中通常通过路由重新渲染组件来解决。
格式统一性：修改 location 时尽量使用完整的协议和域名，避免产生相对于当前路径的解析错误。

掌握了 location 对象，你就能从容处理 Web 应用中几乎全部的 URL 操作需求，也为学习后续的 history 对象和现代前端路由实现打下扎实的基础。