Location 对象
浏览器中 `location` 对象的 URL 信息读取、跳转、替换和刷新行为说明。
#tech / dev / frontend
#type / concept
#status / growing
#resource / javascript
#platform / browser
[!info] related notes
- 所属 MOC: javascript-in-browser-moc
- 上位主题: javascript-in-browser
- 上位主题: javascript-bom
- 前置概念: window-object, url
- 并列概念: history-object
Location 对象
location 是浏览器里表示“当前页面地址”的对象。它既能读取 URL 各部分信息，也能触发页面跳转、替换和刷新。
一句话定义
location 是当前文档 URL 的对象表示，同时也是最直接的页面导航入口之一。
它解决什么问题
当你需要：
- 读取当前地址
- 拿到查询参数、hash、pathname
- 跳转到另一个页面
- 强制刷新当前页面
通常都会从 location 开始。
常见属性
完整地址
href
console.log(location.href)URL 组成部分
originprotocolhosthostnameportpathnamesearchhash
例如：
console.log(location.origin)
console.log(location.pathname)
console.log(location.search)
console.log(location.hash)常见方法
assign()
跳转到新地址，并保留当前页在历史记录中。
location.assign('/login')效果上通常等价于：
location.href = '/login'replace()
跳转到新地址，但用新页面替换当前历史记录。
location.replace('/dashboard')适合：
- 登录后不希望用户后退回登录页
- 中间跳转页不想留在历史栈里
reload()
刷新当前页面。
location.reload()运行时行为与边界
改 href 会发生什么
location.href = '/profile'这不是简单改一个字符串，而是会触发真实导航，浏览器会尝试加载新页面。
hash 改变的特殊性
location.hash = '#section-2'如果只改 hash：
- 通常不会发生整页重新加载
- 会更新地址栏
- 常用于锚点跳转或前端路由中的 hash 模式
search 和参数解析
location.search 直接给的是原始查询字符串，例如：
console.log(location.search) // ?page=2&sort=desc如果要更方便解析参数，通常会配合 URL 或 URLSearchParams。
最小示例
const currentPath = location.pathname
const isLoginPage = currentPath === '/login'
if (!isLoginPage) {
console.log(location.href)
}和 history 的区别
location更偏“当前地址是什么，以及我要跳去哪”history更偏“会话历史如何前进后退和改写状态”
也就是：
- 你想直接跳转，看
location - 你想控制历史栈，看 history-object
常见误区
- 把修改
location.href当成普通赋值，它其实会触发导航 - 以为
replace()和assign()没差别，实际上历史记录行为不同 - 以为
hash改变一定会整页刷新，通常不会
最短记忆方式
location 既是当前 URL 的拆解入口，也是浏览器最直接的导航入口。