這份 window.location 備忘單，讓你更有條理解決地址路徑問題！

做者：Samantha Ming 譯者：前端小智 來源：medium

點贊再看，養成習慣

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

若是你想獲取站點的URL信息，那麼window.location對象什麼很適合你！ 使用其屬性獲取有關當前頁面地址的信息，或使用其方法進行某些頁面重定向或刷新💫

segmentfault.com/search?q=前端…

window.location.origin    → '"https://segmentfault.com'
               .protocol  → 'https:'
               .host      → 'segmentfault.com'
               .hostname  → 'segmentfault.com'
               .port      → ''
               .pathname  → '/search'
               .search    → '?q=前端小智'
               .hash      → '#2'
               .href      → 'https://segmentfault.com/search?q=前端小智#2'
複製代碼

window.location.assign('url')
               .replace('url')
               .reload()
               .toString()
複製代碼

window.location 屬性

window.location	返回值
.origin	站點主地址(協議 + 主機名 + 端口)
.protocol	協議架構 (http: 或者 htts:)
.host	域名 + 端口
.port	端口
.pathname	最前頁的 '/' 後面跟的路徑
.search	? 後跟的查詢字符串
.hash	從 # 號開始的部分
.href	完整網址

host 和 hostname 的區別

在上面的示例中，你可能注意到host和hostname返回相同的值。 那麼爲何要這些屬性。 好吧，這與端口號有關，讓咱們來看看。

沒有端口的 URL

segmentfault.com/search

window.location.host; // 'segmentfault.com'
window.location.hostname; // 'segmentfault.com'

window.location.port; // ''
複製代碼

帶端口的 URL

segmentfault.com/search"8080

window.location.host; // 'segmentfault.com:8080'
window.location.hostname; // 'segmentfault.com'

window.location.port; // '8080'
複製代碼

所以，host將包括端口號，而hostname將僅返回主機名。

如何更改 URL 屬性

咱們不只能夠調用location` 屬性來檢索URL信息，還能夠使用它來設置新屬性並更改URL。

// 開始 'https://segmentfault.com/'

window.location.pathname = '/tidbits'; // 設置 pathname

// 結果 'https://segmentfault.com/tidbits'
複製代碼

下面是你能夠更改的屬性的完整列表

// 事例
window.location.protocol = 'https'
               .host     = 'localhost:8080'
               .hostname = 'localhost'
               .port     = '8080'
               .pathname = 'path'
               .search   = 'query string' // (這裏不用寫 `?`)
               .hash     = 'hash' // (這裏不用寫 `#`)
               .href     = 'url'
複製代碼

惟一不能設置的屬性是window.location.origin，此屬性是隻讀的。

Location 對象

window.location返回一個Location對象。 它爲咱們提供有關頁面當前地址的信息。 可是咱們還能夠經過幾種方式訪問​​Location對象。

window.location          → Location
window.document.location → Location
document.location        → Location
location                 → Location
複製代碼

咱們這樣作的緣由是這些是咱們瀏覽器中的全局變量。

window.location vs location

上面四個屬性都指向同一個Location對象。 我我的更喜歡window.location而且實際上會避免使用location。 主要是由於location看起來像一個普通變量，而且咱們有時可能會不當心將其命名爲變量，這將覆蓋全局變量。 舉個例子：

// https://www.samanthaming.com

location.protocol; // 'https'

function localFile() {
  const location = '/sam';

  return location.protocol;
  // ❌ undefined
  //    b/c local "location" has override the global variable
}
複製代碼

我想大多數開發人員都知道window是一個全局變量。這樣就不太可能引發混淆。老實說，直到我寫了這篇文章，我才知道location 是一個全局變量。建議你們多使用 window.location 來代替其它寫法。

window.location 方法

方法	做用
.assign()	加載一個新的文檔
.replace()	用新的文檔替換當前文檔
.reload()	從新加載當前頁面
.reload()	返回的URL

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

window.location.toString

根據 MDN :

此方法返回 URL 的 USVString，它是 Location.href 的只讀版本。

換句話說，咱們能夠這樣獲得 href 的值：

// https://www.samanthaming.com

window.location.href; // https://www.samanthaming.com
window.location.toString(); // https://www.samanthaming.com
複製代碼

assign vs replace

這兩種方法都是重定向或導航到另外一個URL。 區別在於assign 是將當前頁面保存在歷史記錄中，所以用戶能夠使用「後退」按鈕導航到該頁面。 而使用replace方法時，不會保存它。 讓咱們來看一個例子。

Assign

1. 打開一個新的空白頁
2. 輸入 www.samanthaming.com (當前頁)

3. 使用 `window.location.assign('https://www.w3schools.com')` 載入新頁面
4. 按 "返回上一頁"
5. 返回到了 👉 www.samanthaming.com
複製代碼

Replace

1. 打開一個新的空白頁
2. 輸入 www.samanthaming.com (當前頁)

3. 使用 `window.location.assign('https://www.w3schools.com')` 載入新頁面
4. 按 "返回上一頁"
5. 返回到一個空白頁
複製代碼

如何讓頁面重定向

如何重定向到另外一個頁面，有3種方法。

window.location.href = 'https://www.samanthaming.com';

window.location.assign('https://www.samanthaming.com');

window.location.replace('https://www.samanthaming.com');
複製代碼

replace vs assign vs href

這三個均可以重定向，區別在於瀏覽器的歷史記錄。 href和assign 會把當前頁面保存在歷史記錄中，而replace則不會。 所以，若是你想建立一種導航沒法回到原始頁面的體驗，請使用replace👍

如今的問題是href與assign。 我更喜歡assign，由於它是一種方法，所以感受好像我正在執行一些操做。 還有一個額外的好處是它更易於測試。 我已經編寫了許多Jest測試，所以經過使用一種方法，它使其更易於模擬。

window.location.assign = jest.fn();

myUrlUpdateFunction();

expect(window.location.assign).toBeCalledWith('http://my.url');
複製代碼

最終但願備忘單，但願能對你有所幫助，在須要的時候，能快速給你帶來答案。謝謝你們的觀看。

---

原文：morioh.com/p/b444d291b…

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub github.com/qq449245884… 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。