不要再處處使用 === 了

做者：Seifeldin Mahjoub
譯者：前端小智
來源：domnung

點贊再看，養成習慣

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

咱們知道如今的開發人員都使用 === 來代替 ==，爲何呢？

我在網上看到的大多數教程都認爲，要預測 JavaScript 強制轉換是如何工做這太複雜了，所以建議老是使用===。

這些都致使許多程序員將該語言的一部分排除在外，並將其視爲一種缺陷，而不是去擴大他們的對該過程的理解。

下面經過兩個使用案例，說明使用 == 的好處。

1.測試空值

if (x == null)
vs
if (x === undefined || x === null)

2.讀取用戶的輸入

let userInput = document.getElementById('amount');
let amount = 999;
if (amount == userInput)
vs
if (amout === Number(userInput))

在本文中，咱們將經過對比差別，理解強制性，研究一些流行的用例，並最終找到指導咱們作出決定的準則，來深刻了解該主題。

簡介

在Javascript中，相等由兩個運算符完成。

1. === —嚴格相等比較也稱爲三等運算符。
2. == — 抽象的相等比較

我一直在使用===，由於我被告知它比==更好和更好，並且我根本不須要考慮它，做爲一個懶惰的人，我以爲很方便。

直到我觀看了Kyle或@getfiy的You Do n't Know JS做者在Frontend Masters上的「 Deep JavaScript Foundations」。

做爲一名專業的程序員，我沒有深刻思考我天天工做中使用的操做符，這一事實激勵我去傳播意識，並鼓勵人們更多地理解和關注咱們編寫的代碼。

事實的根源在哪裏

知道真實的緣由在哪裏很重要。 不是在 Mozilla 的 W3school 上，也不在聲稱===優於==的數百篇文章中，並且在這篇文章中也絕對沒有。。

在JavaScript規範中，咱們能夠找到關於JavaScript如何工做的文檔。

打破常識

1. ==只檢查值(鬆散)

若是看一下規範，從定義中能夠很清楚地看出，算法要作的第一件事實際上就是檢查類型。

2. ===檢查值和類型（嚴格）

在這裏，咱們一樣能夠從規範中看到，它檢查類型，若是它們不一樣，則不會再檢查值。

雙等號和三等號之間的真正區別是咱們是否容許強制轉換。

JavaScript 中的強制轉換

強制轉換或類型轉換是任何編程語言的基礎之一。 這對於動態類型化的語言（例如JavaScript）尤其重要，由於若是類型更改，編譯器不會對它大喊大叫，找它麻煩。

理解強制性意味着咱們可以以與JavaScript相同的方式解釋代碼，從而爲咱們提供了更大的可擴展性並最大程度地減小了錯誤。

顯性強制轉換

強制轉換能夠在程序員調用這些方法之一時顯式發生，從而強制改變變量的類型。

Boolean(), Number(), BigInt(), String(), Object()

事例：

let x = 'foo';
typeof x // string
x = Boolean('foo')
typeof x // boolean

隱藏轉換

在JavaScript中，變量的類型很弱，所以這意味着它們能夠自動轉換（隱式強制）。 當咱們使用算術運算符+ / — *，周圍的上下文或使用==時，一般是這種狀況。

2 / '3' // '3' 強制轉爲  3
new Date() + 1 //  強制轉換爲以1結尾的日期字符串
if(x) // x 被強制爲布爾值
1 == true // true 被強制爲 1
1 == 'true' // 'true' 被強制爲  NaN
`this ${variable} will be coreced to string

隱性強制是一把雙刃劍，合理使用能夠增長可讀性，減小冗長。若是使用不當或被誤解，咱們就會有一個讓人失望的公式，人們會咆哮並指責JavaScript。

比較的算法

== 運算符號的算法

1. 若是X和Y是相同的類型，則執行===。
2. 若是X爲null且Y未定義或反之，則爲true。
3. 若是一個是數字，則將另外一個強制爲數字。
4. 若是一個是對象，則強制轉換爲原始對象。
5. 其它，返回 false。

=== 比較的算法

1. 若是類型不匹配 false。
2. 若是類型匹配-比較值，爲 NaN 時返回false。
3. -0 — true.

流行的用例

1. 同類型(多數狀況)

若是類型相同，則===與==徹底相同。所以，應該使用語義性更強的那個。

1 == 1 // true                ......        1 === 1 // true
'foo' == 'foo' // true        ......       'foo' === 'foo' //true

類型不一樣，我更喜歡用 ===。

2. 不一樣類型（原始類型）

首先，我想提醒您注意，不一樣類型並不意味着未知類型。不知道類型代表代碼中的問題比僅使用 === vs == 更大。瞭解類型代表對代碼有更深刻的理解，這會減小更多的錯誤。

假設咱們有一個數字或字符串的可能性。請記住，算法更偏向數字類型，所以它將嘗試使用toNumber()

let foo = 2;
let bar = 32; // number 仍是 string
foo == bar // 若是 bar 是字符串，它會轉換成 number
foo === Number(bar) // doing basically the same
foo === bar // 哪裏 bar 爲 string 則該結果爲 false

3. null和undefined

使用==時，null和undefined彼此相等。

let foo = null
let bar = undefined; 
foo == bar // true
foo === bar // false

4.非原始類型[對象，數組]

不該該使用==或===來比較對象和數組等非原始類型的數據。

決策準則

1. 在全部可使用的狀況下，最好使用==。
2. ==具備已知類型，能夠選擇強制類型轉換。
3. 知道類型總比不知道好。
4. 若是不知道類型，就不要使用==。
5. 當類型不匹配時，=== 是沒有意義的。
6. 當類型匹配時，===是沒必要要的。

避免使用 == 狀況

在某些狀況下，若是不真正瞭解JavaScript中的虛值，則不該使用==。

== with 0 or "" or "   "
== with non primtives
== true  or  == false

總結

根據個人經驗，到目前爲止，我一直都知道我要處理的變量的類型，若是我不知道，我就使用typeof來只容許我所指望的變量。

須要注意的四點

1. 若是你不知道變量類型，那麼使用===是唯一合理的選擇
2. 不知道類型可能意味着你不理解代碼，請嘗試重構你的代碼
3. 知道類型能夠編寫更好的代碼。
4. 若是類型已知，則最好使用==。

---

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

原文：https://domnung.com/article/6...

---

交流

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