JavaScript中的location對象用于獲取和操作當前頁面的url信息，并控制頁面跳轉。一、獲取當前頁面的url信息：可通過location.href、protocol、host、hostname、port、pathname、search及hash等屬性分別獲取完整的url、協議、主機+端口、主機名、端口號、路徑、查詢參數及錨點部分，例如訪問https://example.com:8080/path/to/page.html?id=123#section1時可分別提取各組成部分；二、進行頁面跳轉：通過location.href賦值實現帶歷史記錄的跳轉，location.replace()實現無歷史記錄的重定向，以及location.reload()刷新頁面（支持強制從服務器加載）；三、做簡單狀態管理：利用location.hash監聽變化實現前端路由切換，解析location.search參數判斷來源或用戶行為，在輕量級項目中作為狀態保存方式。
在JavaScript中，location對象是一個非常實用的全局對象，它屬于window對象的一部分，用來獲取當前頁面的URL信息，并可以控制頁面跳轉。簡單來說，它能讓你讀取甚至修改瀏覽器地址欄中的內容。
一、獲取當前頁面的URL信息
通過location對象，你可以輕松拿到當前頁面地址的各種組成部分。比如：
- location.href：整個URL字符串
- location.protocol：協議部分（如http:或https:）
- location.host：主機名+端口號（如example.com:8080）
- location.hostname：主機名（如example.com）
- location.port：端口號（如8080）
- location.pathname：路徑部分（如/path/to/page.html）
- location.search：查詢參數部分（如?id=123）
- location.hash：錨點部分（如#section1）
舉個例子，如果你訪問的是這個地址：
https://example.com:8080/path/to/page.html?id=123#section1
那你可以用下面的方式分別獲取各部分：
console.log(location.protocol); // https: console.log(location.host); // example.com:8080 console.log(location.pathname); // /path/to/page.html console.log(location.search); // ?id=123 console.log(location.hash); // #section1
這些屬性在調試或者做路由處理時特別有用，尤其是在單頁應用（SPA）中解析URL參數時。
二、使用location進行頁面跳轉
除了讀取信息，location還能用來讓頁面跳轉到新的地址。常見的操作包括：
-
直接賦值給location.href
location.href = "https://newpage.com";
這種方式會像用戶點擊了一個鏈接一樣加載新頁面，并留下瀏覽歷史記錄。
-
使用location.replace()
location.replace("https://newpage.com");和上面不同的是，這種方式不會在歷史記錄中留下原頁面，適合重定向場景，比如登錄成功后跳轉首頁。
-
刷新當前頁面
location.reload(); // 刷新頁面
加上參數true可以強制從服務器重新加載（忽略緩存）：
location.reload(true);
這些方法在實際開發中常用于導航、權限控制、頁面重載等邏輯。
三、利用hash和search做簡單的狀態管理
在一些不需要復雜路由的項目里，比如小型工具頁面或靜態站點，可以通過location.hash或location.search來保存頁面狀態。
例如：
-
使用hash實現前端路由切換：
window.addEventListener('hashchange', function() { console.log('當前錨點是：', location.hash); // 根據 hash 值加載不同內容 }); -
解析search參數來判斷來源或用戶行為：
const params = new URLSearchParams(location.search); const id = params.get('id'); // 獲取 ?id=123 中的 123
雖然現在有更強大的history API，但在兼容性要求不高或功能較簡單的場景下，location的相關屬性依然是一個輕量級的選擇。
基本上就這些了。location對象看起來簡單，但用好了可以在很多場景中派上大用場，不管是頁面導航、參數解析還是狀態管理，都挺實用。
