【window.location.href】在 JavaScript 中，`window.location.href` 是一个非常常用且重要的属性，用于获取或设置当前页面的 URL 地址。它不仅能够帮助开发者获取当前网页的地址信息，还可以用于页面跳转、重定向等操作。
以下是对 `window.location.href` 的详细总结，结合其功能和使用场景，以表格形式进行展示。
一、`window.location.href` 简介
`window.location.href` 是 `window.location` 对象的一个属性，返回当前页面的完整 URL（包括协议、域名、路径和查询参数等）。同时，也可以通过赋值的方式修改当前页面的 URL，实现页面跳转。
二、功能与用途总结
| 功能 | 描述 | 示例 |
| 获取当前 URL | 返回当前页面的完整地址 | `window.location.href` |
| 页面跳转 | 通过赋值改变当前页面的 URL，实现跳转 | `window.location.href = "https://www.example.com";` |
| 重定向 | 在某些逻辑判断后跳转到其他页面 | `if (condition) window.location.href = "/login.html";` |
| 参数传递 | 可以在 URL 后添加查询参数 | `window.location.href = "?id=123";` |
| 刷新页面 | 重新加载当前页面 | `window.location.href = window.location.href;` |
三、注意事项
- 使用 `window.location.href` 进行页面跳转时，浏览器会向服务器发送新的请求，因此可能会导致页面重新加载。
- 如果需要更精细的控制（如不刷新页面），可以考虑使用 `history.pushState()` 或 `history.replaceState()`。
- 不建议频繁使用 `window.location.href` 进行跳转，以免影响用户体验或导致性能问题。
四、对比其他 location 属性
| 属性 | 作用 | 是否可写 |
| `window.location.href` | 获取或设置整个 URL | ✅ |
| `window.location.pathname` | 获取或设置路径部分 | ✅ |
| `window.location.search` | 获取或设置查询字符串 | ✅ |
| `window.location.hash` | 获取或设置锚点部分 | ✅ |
| `window.location.protocol` | 获取或设置协议部分 | ✅ |
| `window.location.host` | 获取或设置主机名和端口 | ✅ |
五、总结
`window.location.href` 是 JavaScript 中处理页面 URL 的核心方法之一，适用于多种场景，如页面跳转、重定向、参数传递等。合理使用该属性可以提升网页的交互性和功能性，但也要注意避免滥用，以保证良好的用户体验和性能表现。
