javascript中!=、!==、==、===操作符總結

weiqinl發表於2018-05-17
JavaScript

JavaScript 有兩種比較方式：嚴格比較運算子和轉換型別比較運算子。 在相等運算子中對應 === 、!==和 ==、!=。

先舉個栗子

var str = '1'
var num0 = 0
var num1 = 1
var blT = true
var blF = false
var nul = null
var und = undefined
console.log(str == num1) // true
console.log(str == blT) // true
console.log(blT == num1) // true
console.log(blF == num0) // true
console.log(nul == und) // true

console.log(str === num1) // false
console.log(str === blT) // false
console.log(blT === num1) // false
console.log(blF === num0) // false
console.log(nul === und) // false

複製程式碼

相等操作符(==)會為兩個不同型別的運算元進行型別轉換，然後進行嚴格比較。 嚴格相等操作符(===),一般也叫做全等操作符。會先判斷型別，再比較值是否相等。

型別轉換

型別轉換的途徑:

型別(x) 型別(y) 結果
undefined null true
字串 數字 toNumber(x) == y
布林值 數字 toNumber(x) == y
物件 字串/數字 toPrimary(x) == y

對於兩個型別不同的運算元比較。

  • 字串、布林值都會先轉換成數字型別，再做比較。toNumber(x)
  • 對於複雜資料型別，會先將其轉換為原始值，之後，再根據上一個規則比較。 x = toPrimary(obj) ==> toNumber(x) 而，如何轉成原始型別值呢，一般都會自動通過自帶的valueOf()方法或者toString()方法實現。如果轉換之後非原始值，比較操作會報型別錯誤。
具體過程：
先執行`valueOf`方法，如果該方法返回一個原始值，則將這個原始值轉換為數字，並返回這個數字，轉換過程結束。如果返回非原始值，繼續下一步。
否則，執行`toString`方法，如果該方法返回一個原始值，則將這個原始值轉換為數字，並返回這個數字，轉換過程結束。如果返回非原始值 ，繼續下一步。
以上都沒有成功轉換為原始值，則丟擲一個型別轉換錯誤的異常。
tips： 每個方法只執行一次。不會將方法返回的非原始型別值繼續轉換。
複製程式碼

舉個例子說明下，參考於知乎:

javascript中!=、!==、==、===操作符總結

原始資料型別(string,number,boolean,null, undefined,symbol)。 複雜資料型別(Object, Function, Array, Date, ...) 基礎資料型別的比較，是值的比較，Object物件的比較，則是引用的比較

相等操作符(==)，經過型別轉換之後，才比較他們的值或者物件值。 對於全等操作符(===)，等號兩邊的值和型別，必須完全相等。

為什麼建議使用 ===

1. review程式碼時候，增加理解時間

在使用了 ==的表示式中，我們需要先理解作者的意圖。

  • 想當然的以為都可以。
  • 確實需要通過型別轉換來判斷。
  • 不應該型別轉換，但是寫錯了。

2. 會判斷錯誤

let num = 2
let obj = {
  valueOf: function() {
    return 2
  }
}
console.log(obj == 2)
複製程式碼

輸出true， 我們本意是這兩者!=，而這裡得到的結果是==，這不是我們想要的結果。

3. 會產生異常

let num = 2
let obj = {
  valueOf: function() {
    return {}
 },
 toString: function() {
  return {}
 }
}
console.log(obj === 2)
console.log(obj == 2)
複製程式碼

第一行輸出：false 第二行輸出錯誤提示：Uncaught TypeError: Cannot convert object to primitive value

通過前面型別轉換，可以得知，一般情況下，物件會先轉換為原始值。 而其過程是通過自帶的valueOf()/toString()先轉換為primitive value，再和其他值做比較。 而在這裡，我們手動將obj物件的valueOf()/toString()覆蓋了，導致無法實現轉換為原始值。

一般情況下，建議使用=== ，除非你瞭解，確實需要型別轉換，才使用 ==

條件表示式語句（if、三目運算等）

if (condition) {
    statement1 
} else {
    statement2
}
複製程式碼

以上是if語句的基礎用法。通過判斷condition的布林值，來決定執行statement1程式碼塊1，還是執行statement2程式碼塊2。 先看下面的例子：

var s = 'str'
var blT = true
var blF = false
if (s) {
    console.log('正確')
} else {
    console.log('錯誤')
}
console.log(s == blT)
複製程式碼

以上語句，得到的結果是

正確
false
複製程式碼

為什麼if語句，會執行第一個程式碼塊。而s == blT 卻是false呢？ 其實，這個就涉及到型別轉換的問題了。 輸出“正確”：

  • if語句的條件表示式，會自動呼叫Boolean()轉換函式，將這個表示式的結果轉換為一個布林值。
  • Boolean('str') = true

輸出false：

  • 根據在上面型別轉換那部分所講，會先呼叫Number()轉換函式轉換為數值，之後再比較。
  • Number('str') = NaN
  • Number(true) = 1

圖表舉例列出常見物件相等情況

普通相等 完全相等

【完】 首發於：weiqinl.com/

相關文章