JavaScript中的==和===

關系表達式

==和===都是JavaScript中的關系表達式運算符,與對應的還有!=和!==。

==和===運算符主要用于比較兩個值是否相等。當然它們對相等的定義不盡相同。兩個運算符允許任意類型的操作數,如果操作數相等則返回true,否則返回false。

==和===定義

==和===雖然都是關系表達式運算符,但它們的定義是有所不同的:

  • ==:稱作相等運算符(Equality Operator),它用來檢測兩個操作是否相等,這里的相等的定義非常寬松,可以允許類型的轉換

  • ===:稱作嚴格相等運算符(Strict Equality),也被稱之為恒等運算符(Identity Operator)或全等運算符,它用來檢測兩個操作數是否嚴格相等

== 和 ===運算規則

JavaScript中==和===運算符,它們的運算都具有自己的運算規則。

==運算規則

==運算符對于兩個數比較并不嚴格。如果兩個操作數不是同一類型,那么相等運算符會嘗試進行一些類型轉換,然后進行比較。

在轉換不同的數據類型時,其會遵循下列基本原則:

如果兩個操作數的類型相同,則會按照嚴格相等的比較規則一樣,如果嚴格相等,那么比較結果為相等。如果它們不嚴格相等,則比較結果為不相等。

如果兩個操作數的類型不同,==相等操作符也可能會認為它們相等。檢測相等將會遵守下面的規則和類型轉換:

如果一個值是null, 另一個是undefined,則它們是相等:

null == undefined; // => true

如果一個值是數字,另一個是字符串,先將字符串轉換為數值,然后使用轉換后的值進行比較:

1 == '1'; // => true

如果其中一個值是true,則將其轉換為1再進行比較。如果其中一個值是false,則將其轉換為0再進行比較:

true == 0;   // => false
false == 1;  // => false
true == 1;   // => true
false == 0;  // => true
true == '1'; // => true
false == '0';// => true

如果一個值是對象,另一個值是數字或字符串,將會先使用toString()和valueOf()將對象轉換為原始值,然后再進行比較。

兩個操作數在進行比較時則要遵循下列規則:

  • null和undefined是相等的

  • 要比較相等性之前,不能將null和undefined轉換成其他任何值

  • 如果有一個操作是NaN,則相等操作符返回false,而不相等操作符返回true。重要提示: 即使兩個操作數都是NaN,相等操作符也返回false,因為按照規則 ,NaN不等于NaN

  • 如果兩個操作數都是對象,則比較它們是不是同一個對象。如果兩個操作數都指向同一個對象,則相等操作符返回true,否則返回false

來看一下對象的比較:

var a = [1,2,3];
var b = [1,2,3];

var c = { x: 1, y: 2 };
var d = { x: 1, y: 2 };

var e = "text";
var f = "te" + "xt";

a == b       // =>false
c == d       // =>false
e == f       // =>true

對于兩個操作數var1==var2,下圖能表達的很清楚:

Paste_Image.png

圖中綠色的方框表示返回的值為true,其它的表示返回的值為false。同樣可以使用另一張圖來表述:

Paste_Image.png

圖中橙色的方框表示返回的值為true,其它的表示返回的值為false。

===運算規則

嚴格相等運算符===首先要計算其操作數的值,然后比較這兩個值,比較過程沒有任何類型轉換。其運算規則遵循下面的規則:

如果兩個值類型不相同,則它們不相等

true === '1'; // => false

其中操作數true是布爾值,而'1'是字符串值。

如果兩個者都是null或者都是undefined,則它們相等:

null === null; // => true
undefined === undefined; // => true
null === undefined; // =>false

如果兩個值都是布爾值true或false,則它們相等:

true === true;   // =>true
false === false; // =>true
true === 1;      // =>false
true === '1';    // =>false
false === 0;     // =>false
false === '0';   // =>false

如果其中一個值是NaN,或者兩個值都是NaN,則它們不相等。NaN和其他任何值都是不相等的,包括它本身。通過x !== x來判斷x是否為NaN,只有在x為NaN的時候,這個表達式的值才為true。

如果兩個值為數字且數值相等,則它們相等。如果一個值為0,另一個值為-0,則它們同樣的相等。

如果兩個值為字符串,且所含的對應位上的16位數完全相等,則它們相等。如果它們的長度或內容不同,則它們不等。兩個字符串可能含義完全一樣且所顯示出的字符也一樣,但且有不同編碼的16位值。JavaScript并不對Unicode進行標準化的轉換,因此像這樣的字符串通過===和==運算符的比較結果也不相等。在JavaScript中字符串的比較提供了一個String.localeCompare()方法。

如果兩個引用值指向同一個對象,數組或函數,則它們是相等的。如果指向不同的對象,則它們是不等的,盡管兩個對象具有完全一樣的屬性。

var a = [1,2,3];
var b = [1,2,3];
var c = a;

var ab_eq = (a === b); // false (even though a and b are the same type)
var ac_eq = (a === c); // true

var a = { x: 1, y: 2 };
var b = { x: 1, y: 2 };
var c = a;

var ab_eq = (a === b); // false (even though a and b are the same type)
var ac_eq = (a === c); // true

var a = { };
var b = { };
var c = a;

var ab_eq = (a === b); // false (even though a and b are the same type)
var ac_eq = (a === c); // true

同樣對于var1 === var2也可以用圖來表達:

Paste_Image.png

上圖中綠色的方框表示返回的值為true,白色的方框表示返回的值為false。除了上圖之外,下面這張圖也表達的是同樣的意思:

Paste_Image.png

上圖中橙色的方框表示返回的值為true,白色的方框表示返回的值為false。

在JavaScript中比較運算符不僅僅是==和===。還有其它的比較運算符,比如<=、>=。綜合起來,也可以使用一張圖表述:

  • 紅色:===

  • 橙色:==

  • 黃色:<=和>=同時成立,==不成立

  • 藍色:只有>=

  • 綠色:只有<=

Paste_Image.png

!= 和 !==

在JavaScript中還有兩個運算符和==、===類似,它們是!=和!===。在JavaScript中,!=和!==運算符的檢測是==和===運算符的求反。如果兩個值通過==的比較結果為true,那么通過!=的比較結果則為false。如果兩個值通過===的比較結果為true,那么通過!==的比較結果則為false。

總結

這篇文章簡單的總結了JavaScript中的==和===運算符的規則,以前這兩個運算符中不同之處。簡單的只需要記住==表示兩個操作數相同,===表示來格相等(恒等或全等),!=稱為不相等,!==表示不嚴格相等。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,885評論 6 541
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,312評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 177,993評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,667評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,410評論 6 411
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,778評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,775評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,955評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,521評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,266評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,468評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,998評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,696評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,095評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,385評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,193評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,431評論 2 378

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,819評論 18 139
  • 表達式 表達式是由數字、運算符、數字分組符號(如括號)、自由變量和約束變量等以能求得數值的有意義排列方法所得的組合...
    劼哥stone閱讀 583評論 0 4
  • 表達式和運算符 程序中最簡單的表達式就是,程序中的常量 變量名也是一種簡單的表達式 復雜的表達式是由簡單的表達式組...
    zhaolion閱讀 1,644評論 3 12
  • FreeCodeCamp - Basic JavaScript 寫在前面: 我曾經在進谷前刷過這一套題,不過當時只...
    付林恒閱讀 16,475評論 5 28
  • 2015年2月13日,外婆去世。 我是一個懼怕死亡的人,卻在那個寒假,感受著死亡,只感覺到痛,但痛到麻木。 一直很...
    MaimaiWu閱讀 829評論 1 11