溫故js系列（9）-相等==&嚴格相等===&代碼里的那些判斷

libin19890520 發布于2019-08-20 10:22 / 3039人閱讀

摘要：業務越復雜，邏輯就越復雜，判斷就越多比較判斷比較判斷是比較兩個值，返回一個布爾值，表示是否滿足比較條件。對于非布爾值的數據，取反運算符會自動將其轉為布爾值。

前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總

歡迎提issues斧正：==========

JavaScript-判斷

代碼中，多多少少會有判斷語句。業務越復雜，邏輯就越復雜，判斷就越多

比較判斷

比較判斷是比較兩個值，返回一個布爾值，表示是否滿足比較條件。JavaScript一共提供了8個比較運算符，參考我另一篇文章：JavaScript-運算符淺析。

這里主要說一下嚴格相等運算符和相等運算符的區別：

==相等運算符比較兩個值的時候會判斷兩個值的類型，如果不是同一類型，會強制轉換為同一類型進行比較（類型轉換參考溫故js系列第一篇文章：類型轉換）。

而===比較兩個值的時候先判斷兩個值的類型，如果不是同一類型，直接返回false，值類型相同再進行值的比較。

所以，從性能上來說，==會比===多走一條類型轉換的路，稍遜一點。從結果上來說，有時候類型轉換會給你帶來你不想要的比較結果。這也就是為什么都推崇使用===的原因。當然，==在合適的業務場景下使用也是必要的。

嚴格相等運算符===

        判斷                        返回
兩個值類型不同                       false
兩個值都是null/undefined/true/false  true      
兩個值其中之一為NaN                  false
兩個值都為數值且值相等                true
兩個值都為字符串且值相等              true
兩個值都指向同一個引用類型            true

1 === "1" // false
true === true // true
undefined === undefined // true
null === null // true
1 === 1 // true
NaN === NaN  // false
+0 === -0 // true
({} === {}) // false
[] === [] // false
(function (){} === function (){}) // false
var v1 = {};
var v2 = v1;  //兩個值引用同一個對象
v1 === v2 // true

嚴格相等運算符有一個對應的嚴格不相等運算符（!==），兩者的運算結果正好相反

相等運算符==

規則： 

if 相等運算符比較相同類型的數據時，同嚴格相等運算符
else if 相等運算符比較不同類型的數據時：
原始類型的數據會轉換成數值類型，把字符串和布爾值都轉為數值，再進行比較
null == undefined  返回true
一個是對象，另一個是數字或者字符串，把對象轉成基本類型值再比較
else false

123 == 123; //true
"123" == 123; //true，"123"會轉成成數值123
false == 0; //true，false 轉成數值就是0
"a" == "A"; //false，轉換后的編碼不一樣
123 == {}; //false，執行toString()或valueOf()會改變
123 == NaN; //false，只要有NaN，都是false
{} == {}; //false，比較的是他們的地址，每個新創建對象的引用地址都不同

null == undefined //true
"NaN" == NaN //false
123 == NaN //false
NaN == NaN //false
false == 0 //true
true == 1 //true
true == 2 //false
undefined == 0 //false
null == 0 //false
"123" == 123 //true
"123" === 123 //false

相等運算符有一個對應的不相等運算符（!=），兩者的運算結果正好相反

!!判斷

!!相當于Boolean，寫代碼時用!!轉化為Boolean類型做判斷非常好用

!!"xzavier";   // true
!!"";          // false
!!"0";         // true
!!"1";         // true
!!"-1"         // true
!!0            // false
!!undefined    // false
!!null         // false
!!NaN          // false
!!{};          // true
!!{name:"xz"}  // true
!![];          // true
!![1,2,3];     // true
!!true;        // true

!判斷

取反運算符 ! 用于將布爾值變為相反值，即true變成false，false變成true。對于非布爾值的數據，取反運算符會自動將其轉為布爾值。規則是，以下六個值取反后為true，其他值取反后都為false

undefined  null  false  0(包括+0和-0)  NaN  空字符串("")

!undefined    // true
!null         // true
!false        // true
!0            // true
!NaN          // true
!""           // true    
!54           // false
!"hello"      // false
![]           // false
![1,2,3]      // false
!{}           // false
!{name:"xz"}  // false

[]和{}判斷

對于[]和{}，我們在業務代碼中肯定會對其做判斷，如上

!!{};          // true
!!{name:"xz"}  // true
!![];          // true
!![1,2,3];     // true

不能用!!和!做判斷，對于數組，我們用它的length屬性做判斷

[].length       // 0 false
[1,2,3].length  // 3 true

對象的話，可以采用jQuery的方法$.isEmptyObject(obj)，也可以js封裝一個方法，就模仿jQuery 寫一個

function isEmptyObject(obj) {
    var name;
    for ( name in obj ) {
        return false;
    }
    return true;
}
isEmptyObject({});  //true
isEmptyObject({name: "xzavier"});  false

推薦一個工具庫underscore，它也有個方法isEmpty(object)

const _ = require("underscore");
_.isEmpty({});  // true

&&判斷

用在條件表達式中，規則是：

num1 && num2
true    true    true
true    false   false
false   true    false
false   false   false

用在語句中，規則是：

result = expression1 && expression2

如果expression1的計算結果為false，則result為expression1。否則result為expression2

(1 - 1) && ( x += 1)  // 0
(2 > 1) && ( 5 + 5)   // 10
(2 + 1) && ( 5 + 5)   // 10

||判斷

用在條件表達式中，規則是：

num1 || num2
true    true     true
true    false    true
false   true     true
false   false    false

用在語句中，規則是：

如果第一個運算子的布爾值為true，則返回第一個運算子的值，且不再對第二個運算子求值
如果第一個運算子的布爾值為false，則返回第二個運算子的值

||運算符一般在業務代碼中做條件表達式判斷和容錯處理，我們在取數據時取不到的情況下，又不能影響后面的業務代碼，就需要進行容錯。||就是一個非常好的容錯寫法，相當于提供一個備用數據。

var data = undefined || backup_data;  //請求出錯，數據為undefined時，就去備用數據backup_data

三目判斷

規則：

condition ? expression1 : expression2;

function absN(xzavier) {
    return xzavier > 0 ? xzavier : -xzavier;
}
absN(-123);  //123
absN(123);  //123

如果第一個表達式的布爾值為true，則返回第二個表達式的值，否則返回第三個表達式的值。

判斷暫時寫到這兒，判斷是我們代碼生涯中時時刻刻接觸的，更多的attention在接觸研究過會更新于此...

休息一刻，約好要去打籃球了。。。

GPU云服務器云服務器 js判斷數據相等相等判斷問題 jquery判斷相等 jquery判斷值相等

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80111.html

溫故js系列（18）-對象&amp;對象使用

摘要：對象創建字面量方式構造函數方式也可以這樣不過這樣的話，為何不選擇字面量方式字面量方式和方式的寫法是等價的，返回的結果是同種類的對象。構造函數產生實例時，實例通過其對應原型對象的訪問對應的構造函數對象。前端學習：教程&模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試資源匯總歡迎提issues斧正：對象&對象使用 Object對象在 JavaScript 中，對...

keke 2019-08-22 10:49 評論0 收藏0
解析JavaScript判斷兩個值相等的方法

　　本篇文章主要是講述在JavaScript中判斷兩個值相等，不要認為很簡單，要注意的是在JavaScript中存在4種不同的相等邏輯。　　ECMAScript 是 JavaScript 的語言規范，在ECMAScript 規范中存在四種相等算法，如下圖所示：　　上圖中每個依次寫下來，很多前端應該熟悉嚴格相等和非嚴格相等，但對于同值零和同值卻不熟悉，現在就依次下面四種方法。　　同值　　同值零　　非...

3403771864 2022-11-19 17:08 評論0 收藏0
溫故js系列（1）-基本數據類型和引用數據類型判斷&amp;存儲訪問&amp;類型轉換

摘要：引用數據類型引用數據類型值指保存在堆內存中的對象。訪問方式是按引用訪問。數據類型檢測操作符是檢測基本類型的最佳工具。未定義布爾值字符串數值對象或函數用于檢測引用類型，可以檢測到它是什么類型的實例。前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總歡迎提issues斧正：數據類型回味，無窮！數據類型定義數據類型分類基本數據...

jone5679 2019-08-19 18:41 評論0 收藏0
JavaScript中讓x==1&&x==2&&x==3等式成立演示

　　要是別人問您：如何讓 x 等于 1 且讓 x 等于 2 且讓 x 等于 3 的等式成立？　　咋地，知道如何實現？想罵人有不　　現在我們一起來分解思路：　　我們先來講講寬松相等== 和嚴格相等 ===，這兩個都能用來判斷兩個值是否相等，但們明確上文提到的等于指的是哪一種，二者的區別看下：　　(1) 這兩個基礎直接的區別：　　(1.1) 不同類型間比較，== 比較轉化成同一類型后的值看值是否相等，...

3403771864 2022-10-16 17:23 評論0 收藏0
魔幻語言 JavaScript 系列之 a == true &amp;&amp; a == fals

摘要：稍后我們再詳細剖析，接下來先看一個問題。還內建了一些在之前沒有暴露給開發者的，它們代表了內部語言行為。使用，可能有不少朋友一開始就想到這種方式，簡單貼一下閱讀更多在 JavaScript 環境下，可以讓表達式 a == true && a == false 為 true 嗎？就像下面這樣，可以在控制臺打印出 ’yeah: // code here if (a == true && ...

BDEEFE 2019-08-22 16:00 評論0 收藏0