判斷兩個變量是否相等在任何編程語言中都是非常重要的功能。

JavaScript 提供了 == 和 === 兩種判斷兩個變量是否相等的運(yùn)算符，但我們開始學(xué)習(xí)的時候 JavaScript 的時候，就被一遍又一遍的告知：

=== 要求變量的類型和值均相等，才能返回true。

使用 === 來避免因JavaScript 類型轉(zhuǎn)換帶來的問題。

這樣增加了 JavaScript 語法的靈活性但是也帶來很多頭疼的問題：

使用 ==/!=是 ===/!== 來判斷兩個變量是否相等？

為什么，JS 編碼推薦使用 ===/!= 而不是 ==/!=，大部分的編程語言不都是使用==/!=么？

為了要回答這個問題，讓我們看一下 JavaScript 所遵守的標(biāo)準(zhǔn) ECMAScript 對于==和 === 是怎么描述的吧！

=== 詳解

Identity Equal或 Strict Equal, 在 ECMAScript -- Java Script 所遵守的標(biāo)準(zhǔn)中，算法的定義為： The Strict Equality Comparison Algorithm ， 規(guī)則如下：

如果?參數(shù) x 的數(shù)據(jù)類型和 參數(shù) y 的數(shù)據(jù)類型不一致，這返回 false

如果 參數(shù) x 的數(shù)據(jù)類型為 undenfined, 則返回 true

如果 參數(shù) x 的數(shù)據(jù)類型為 null, 則返回 true

如果 參數(shù) x 的數(shù)據(jù)類型為 Number, 則：

如果 x?是? NaN 返回 false

如果?y?是? NaN 返回 false

如果 x 是 +0 并且 y 為 -0， 返回 true

如果 x 是 -0 并且 y 為 +0， 返回 true

如果 x 和 y 有著相同的數(shù)值，返回 true

返回 false

如果 x 的類型為 String, 且 x 與 y 有著相同的順序排列的字符串， 返回 true

如果 x 的類型為 boolean, 且 x 與 y 擁有相同的布爾值，返回 true

如果 x 的類型為 Object, 且 x 與 y 指向相同的對象，返回 true

偽代碼：

1 functionstrictEqual(x, y) {2 //If Type(x) is different from Type(y), return false.

3 if (!valueEqual(typeof (x), typeof(y))) {4 return false;5 }6

7 //If Type(x) is Undefined, return true.

8 //If Type(x) is Null, return true.

9 if (valueEqual(typeof (x), "undefined") || valueEqual(x, null)) {10 return true;11 }12

13

14 if (valueEqual(typeof (x), "number")) {15 //If x is NaN, return false.

16 if(isNaN(x)) {17 return false;18 }19

20 //If y is NaN, return false.

21 if(isNaN(y)) {22 return false;23 }24

25 //If x is +0 and y is ?0, return true.

26 if (valueEqual(x, +0) && valueEqual(y, -0)) {27 return true;28 }29

30 //If x is ?0 and y is +0, return true.

31 if (valueEqual(y, +0) && valueEqual(x, -0)) {32 return true;33 }34

35 //If x is the same Number value as y, return true.

36 if(valueEqual(x, y)) {37 return true;38 }39

40 return false;41 }42

43 if (valueEqual(typeof (x), "string")) {44 //If Type(x) is String, then return true if x and y are exactly

45 //the same sequence of characters

46 //(same length and same characters in corresponding positions); otherwise, return false.

47 returnhasSameChar(x, y);48 }49

50 if (valueEqual(typeof (x), "boolean")) {51 returnvalueEqual(x, y);52 }53

54 if (valueEqual(typeof (x), "object")) {55 //Return true if x and y refer to the same object. Otherwise, return false.

56 returnhasSameReference(x, y);57 }58

59 return false;60 }

View Code

邏輯圖：

== 詳解

Equal, 在兩個對比變量數(shù)據(jù)類型相同時， 和=== 有著一樣的行為算法實(shí)現(xiàn)，但是當(dāng)兩個對比的變量數(shù)據(jù)類型不同時，ECMAScript/JavaScript 有著自定義的轉(zhuǎn)換和比較邏輯：參考 The Abstract Equality Comparison Algorithm

如果 x 為 null, 且 y 為 undefined, 返回 true

如果 x 為 undefined, 且 y 為 null, 返回 true

如果 x 的數(shù)據(jù)類型為 Number, 且 y 的數(shù)據(jù)類型為 string, 則將 y 轉(zhuǎn)換為 Number,然后進(jìn)行比較

如果 x 的數(shù)據(jù)類型為 String, 且 y 的數(shù)據(jù)類型為 Number, 則將?x 轉(zhuǎn)換為 Number,然后進(jìn)行比較

如果 x 的數(shù)據(jù)類型為 Boolean,?將x 轉(zhuǎn)換為數(shù)字類型,當(dāng) x 為 true 時轉(zhuǎn)換為 1， 否則轉(zhuǎn)換為 0 進(jìn)行比較

如果?y 的數(shù)據(jù)類型為 Boolean,?將 y?轉(zhuǎn)換為數(shù)字類型，當(dāng) y 為 true 時轉(zhuǎn)換為 1， 否則轉(zhuǎn)換為 0 進(jìn)行比較

如果 x 的數(shù)據(jù)類型為 String 或者 Number, 且 y 為 Object, 則使用 valueOf 函數(shù)，將 y 轉(zhuǎn)換為簡單類型進(jìn)行比較

如果?y 的數(shù)據(jù)類型為 String 或者 Number, 且?x 為 Object, 則使用 valueOf 函數(shù)，將?x 轉(zhuǎn)換為簡單類型進(jìn)行比較

返回 false

從上述定義不難總結(jié)出以下幾點(diǎn)：

該算法為遞歸算法，轉(zhuǎn)換后，繼續(xù)調(diào)用其自身直到能比較且返回為止

該算法依賴于 Strict Equal 的實(shí)現(xiàn)

進(jìn)行轉(zhuǎn)換時，具體轉(zhuǎn)換依賴于數(shù)據(jù)類型的定義的方法，如Number() 函數(shù)

偽代碼：

1 functionabstractEqual(x, y) {2

3 //if x and y has same type

4 if (valueEqual(typeof (x), typeof(y))) {5 returnstrictEqual(x, y);6 }7

8 //If x is null and y is undefined, return true.

9 if (valueEqual(x, null) &&valueEqual(y, undefined)) {10 return true;11 }12

13 //If x is undefined and y is null, return true.

14 if (valueEqual(x, undefined) && valueEqual(y, null)) {15 return true;16 }17

18 //Type(x) is Number and Type(y) is String,

19 if (valueEqual(typeof (x), "number") && valueEqual(typeof (y), "string")) {20

21 var convertedY =Number(y);22

23 //return the result of the comparison x == ToNumber(y)

24 returnabstractEqual(x, convertedY);25 }26

27 //Type(x) is Number and Type(y) is String,

28 if (valueEqual(typeof (x), "string") && valueEqual(typeof (y), "number")) {29

30 var convertedX =Number(x);31

32 //return the result of the comparison x == ToNumber(y)

33 returnabstractEqual(convertedX, y);34 }35

36 //Type(x) is Boolean, return the result of the comparison ToNumber(x) == y.

37 if (valueEqual(typeof (x), "boolean")) {38 var convertedToIntX =Number(x);39

40 returnabstractEqual(convertedToIntX, y);41 }42

43 //Type(x) is Boolean

44 if (valueEqual(typeof (y), "boolean")) {45 var convertedToIntY =Number(y);46

47 //return the result of the comparison ToNumber(x) == y.

48 returnabstractEqual(x, convertedToIntY);49 }50

51 //If Type(x) is either String or Number and Type(y) is Object,

52 if ((valueEqual(typeof (x), "string") || valueEqual(typeof (x), "number")) && valueEqual(typeof (y), "object")) {53 var toPrimitiveY =y.valueOf();54

55 //return the result of the comparison x == ToPrimitive(y).

56 returnabstractEqual(x, toPrimitiveY);57 }58

59

60 //If Type(x) is either String or Number and Type(y) is Object,

61 if ((valueEqual(typeof (y), "string") || valueEqual(typeof (y), "number")) && valueEqual(typeof (x), "object")) {62 var toPrimitiveX =x.valueOf();63

64 //return the result of the comparison x == ToPrimitive(y).

65 returnabstractEqual(toPrimitiveX, y);66 }67

68 return false;69 }

View Code

邏輯圖：

附加上本例使用的判斷相等的函數(shù)的代碼，直接使用了 JavaScript 的 == 來實(shí)現(xiàn)，為了 demo 么！呵呵，這是一個很號的接口，實(shí)際上，我也實(shí)現(xiàn)不出來 :).

1 functionvalueEqual(x, y) {2 return x ===y;3 }4

5 functionhasSameChar(x, y) {6 return x ===y;7 }8

9 functionhasSameReference(x, y) {10 return x ===y;11 }

View Code

總結(jié)

現(xiàn)在，我們已經(jīng)知道 == 和 === 在判斷兩個變量是否相等時所使用的算法的基本實(shí)現(xiàn)。幫助我們理解一些 JavaScript 中判斷相等時一些"詭異“ 的行為。

把我們寫的 Script 放在一個 HTML 文件里，用 Chrome 代開，按 F12, 開始我們的調(diào)試吧：

測試 JS 代碼

運(yùn)行結(jié)果

JS 代碼

運(yùn)行結(jié)果

備注

var x = 1, y = "1";console.log(strictEqual(x,y)); console.log(abstractEqual(x,y))

false, true

var x = 1, y = "1";console.log(x === y); console.log(x == y)

false,true

== 時，y 先轉(zhuǎn)換為數(shù)字類型1

var x = 1, y = "not a number";console.log(strictEqual(x,y)); console.log(abstractEqual(x,y))

false, falase

var x = 1, y = "not a number";console.log(x === y); console.log(x == y)

false, false

y 轉(zhuǎn)換為數(shù)字類型失敗，返回 NaN,NaN 不與任何值相等，包括 NaN 自身

var x = undefined, y = null;console.log(strictEqual(x,y)); console.log(abstractEqual(x,y))

false，true

var x = undefined, y = null;console.log(x===y); console.log(x == y)

false,true

=== 時， null != undefined

== 時，規(guī)定了 null 與 undefined 的相等

var x = true, y = 2;console.log(strictEqual(x,y)); console.log(abstractEqual(x,y))

false,false

var x = true, y = 2;console.log(x === y); console.log(x == y)

false,false

true 轉(zhuǎn)換為數(shù)字 1

var x = false, y = 0;console.log(strictEqual(x,y)); console.log(abstractEqual(x,y))

false,true

var x = false, y = 0;console.log(x === y); console.log(x == y)

false，true

false 轉(zhuǎn)換為數(shù)字 0

var x = {name:'test',valueOf:function(){return 1;}},y = 1; console.log(strictEqual(x,y));console.log(abstractEqual(x,y));

false,true

var x = {name:'test',valueOf:function(){return 1;}},y = 1; console.log(x === y);console.log(x == y);

false,true

x.valueOf()? 返回?cái)?shù)字 1，與 y 相等

總結(jié)

以上是生活随笔為你收集整理的java script中==和===_Java Script 中 ==（Equal) 和 === (Identity Equal) 的区别和比较算法逻辑...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。