location对象提供URL信息和导航功能，其属性包括href、protocol、host、hostname、port、pathname、search和hash，分别对应URL各部分；通过assign()跳转页面并保留历史记录，replace()替换当前页面不留记录，reload()重新加载页面，可强制刷新；直接设置location.href实现跳转更常用；还可结合URLSearchParams解析查询参数，或修改hash实现锚点定位，掌握这些方法可有效控制页面导航与URL状态。
在JavaScript中，location对象提供了当前页面的URL信息，并允许你进行导航和重载操作。它属于浏览器的window对象，通常通过window.location访问，但在实际使用中可以直接写location。
location对象的核心属性
理解location的方法前，先熟悉它的主要属性，这些属性对应URL的不同部分：
- href：完整的URL字符串，可读可写
- protocol：协议（如http:或https:）
- host：主机名+端口（如example.com:8080）
- hostname：主机名（如example.com）
- port：端口号（如果有的话）
- pathname：路径部分（如/blog/index.html）
- search：查询参数，以?开头（如?name=Tom&age=25）
- hash：锚点，以#开头（如#section2）
例如，当前URL是：
https://www.example.com:443/blog/post?id=123#comments
那么对应的属性值为：
- protocol: "https:"
- host: "www.example.com:443"
- hostname: "www.example.com"
- port: "443"
- pathname: "/blog/post"
- search: "?id=123"
- hash: "#comments"
- href: 完整URL
location对象的常用方法
除了属性，location还提供几个关键方法来控制页面跳转和刷新。
1. location.assign(url)
加载一个新的文档。相当于设置location.href = url。
示例：
location.assign("https://www.google.com");
这会跳转到
Google首页。用户可以点击“返回”按钮回到原页面。
2. location.replace(url)
用新页面替换当前页面，不会在浏览器历史中留下记录。
示例：
location.replace("/login");
常用于登录失败跳转，防止用户点“返回”又回到需要登录的页面。
3. location.reload()
重新加载当前页面。
可以传入布尔值参数：
- location.reload()：可能从缓存加载
- location.reload(true)：强制从服务器重新请求（忽略缓存）
适合在数据更新后刷新页面确保内容最新。
直接修改href实现跳转
最常用的跳转方式其实是直接赋值：
location.href = "https://example.com";效果等同于assign()，但更简洁，开发者用得最多。
实用小技巧
你可以利用location属性解析当前URL的参数：
// 获取查询参数中的id
const params = new URLSearchParams(location.search);
const id = params.get("id"); // 得到"123"
也可以动态改变hash实现锚点跳转：
location.hash = "section3";
页面会自动滚动到id为section3的元素位置。
基本上就这些。掌握location的属性和方法，能让你灵活控制页面导航和URL状态，是前端开发中的基础技能。注意区分assign和replace的使用场景，避免用户导航体验出问题。
