JavaScript中==和===的區別

林恒發表於2024-07-19
JavaScript

🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

前言

JavaScript 中的相等運算子無疑是新手開發者最容易混淆的知識點之一。

==和===這兩個運算子的細微差別往往會在程式碼中造成一些令人困惑的行為

在本文中,我們將深入探討這兩個相等運算子的工作原理,比較它們的特點和侷限性

讓我們開始吧!

區別

  1. 型別轉換:

    • == 運算子在比較時會進行隱式型別轉換,將運算元轉換為相同的型別後再進行比較。
    • === 運算子不會進行隱式型別轉換,它會先檢查運算元的型別,如果型別不同就直接返回 false。

  2. 比較結果:

    • == 運算子在進行比較時,會盡量將運算元轉換為相同的型別,然後再比較值。
    • === 運算子嚴格比較,不僅要求值相同,還要求型別相同。

== 示例

在進行==操作有以下的規則：

  1. 如果兩個運算元的型別相同,則直接比較它們的值。
  2. 如果運算元中有布林值,則先將布林值轉換為數字,再進行比較。
  3. 如果其中一個運算元是字串,另一個是數字,則將字串轉換為數字,再進行比較。
  4. 如果其中一個運算元是物件,另一個不是,則呼叫物件的 valueOf() 方法獲取原始值,再進行比較。如果無法獲取原始值,則呼叫 toString() 方法獲取字串,再進行比較。

接下來對他們進行比較

  1. Number vs Number:
console.log(5 == 5); // true
console.log(0 == -0); // true
console.log(NaN == NaN); // false

數字之間的比較會直接比較它們的值。需要注意的是,NaN 與任何值(包括自己)都不相等。

  1. String vs String:
console.log("hello" == "hello"); // true
console.log("42" == "42"); // true
console.log("" == ""); // true

字串之間的比較會逐個字元進行比較。

  1. Boolean vs Boolean:
console.log(true == true); // true
console.log(false == false); // true

布林值之間的比較會直接比較它們的值。

  1. Null vs Undefined:
console.log(null == undefined); // true
console.log(null == null); // true
console.log(undefined == undefined); // true

null 和 undefined 在比較時被視為相等。

  1. Number vs String:
console.log(5 == "5"); // true
console.log(0 == ""); // true
console.log(0 == "0"); // true
console.log(42 == "hello"); // false 當無法轉換為數字轉換為0

當一個運算元是數字,另一個是字串時,字串會被轉換為數字進行比較。

  1. Boolean vs Number:
console.log(true == 1); // true
console.log(false == 0); // true
console.log(true == 2); // false

布林值在比較時會先轉換為數字,true 轉換為 1，false 轉換為 0。

  1. Object vs Primitive:
console.log([10] == 10); // true
console.log({} == "[object Object]"); // true

當一個運算元是物件,另一個是原始值時,物件會先呼叫 ToPrimitive 抽象操作進行轉換。

=== 示例

如果型別不同，=== 直接返回false

  1. Number vs Number:
console.log(5 === 5); // true
console.log(0 === -0); // true
console.log(NaN === NaN); // false

數字之間的嚴格比較會直接比較它們的值。需要注意的是,NaN 與任何值(包括自己)都不相等。

  1. String vs String:
console.log("hello" === "hello"); // true
console.log("42" === "42"); // true
console.log("" === ""); // true

字串之間的嚴格比較會逐個字元進行比較。

  1. Boolean vs Boolean:
console.log(true === true); // true
console.log(false === false); // true

布林值之間的嚴格比較會直接比較它們的值。

  1. Null vs Undefined:
console.log(null === undefined); // false
console.log(null === null); // true
console.log(undefined === undefined); // true

null 和 undefined 在嚴格比較時是不相等的。

  1. Number vs String:
console.log(5 === "5"); // false
console.log(0 === ""); // false
console.log(0 === "0"); // false
console.log(42 === "hello"); // false

當一個運算元是數字,另一個是字串時,它們不會進行任何型別轉換,直接返回 false。

  1. Boolean vs Number:
console.log(true === 1); // false
console.log(false === 0); // false
console.log(true === 2); // false

布林值和數字在嚴格比較時也不會進行任何型別轉換,直接返回 false。

  1. Object vs Primitive:
console.log([10] === 10); // false
console.log({} === "[object Object]"); // false

當一個運算元是物件,另一個是原始值時,它們的型別不同,所以直接返回 false。

總結

本文講解了==和===的資料對比之間的區別，透過程式碼示例深入分析

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。

JavaScript中==和===的區別

相關文章