【視頻教程】JS空數組比較-冰山工做室-沙翼-web前端

課程視頻-JS空數據比較

前言

先上題，得出心中答案，打開瀏覽器點開F12，複製下面代碼，看看結果。

console.log( [] == ![] )

console.log( {} == !{} )

剖析一下，主要分爲：

1. ！邏輯運算符的優先級，
2. {}與[]複雜數據類型如何轉換；
3. == JS的數據類型的強制轉換比較；

邏輯運算符的優先級

運算符優先級自己是一種規則，該規則在計算表達式時控制運算符執行的順序。具備較高優先級的運算符先於較低優先級的運算符執行。

先看MDN運算符優先級圖表截取：

優先	運算類型	關聯性	運算符
20	圓括號	n/a	(...)
19	new（帶參數列表）	從左到右	new...(...)
	函數調用	從左到右	..(..)
16	邏輯非	從右到左	!...
	一元加法	從右到左	+...
	一元減法	從右到左	-...
10	等號	從左到右	...==...
6	邏輯與	從左到右	...&&...
5	邏輯或	從左到右	...II...

MDN完整地址

在截取的表格中能夠清晰的看到，邏輯非 ! 的優先級明顯高於 == 等號的有優先級，所以第一個問題，在 [] == ![] 中最優先運算的是 ![] ，而後纔是 == 比較。

複雜的數據類型如何轉換

console.log(![]) // false ，這個結果相對好理解
// 注意： !帶有隱式轉換

• undefined（未定義，找不到值時出現）
• null（表明空值）
• false（布爾值的false，字符串"false"布爾值爲true）
• 0（數字0，字符串"0"布爾值爲true）
• NaN（沒法計算結果時出現，表示"非數值"；可是typeof NaN==="number"）
• ""（雙引號）或''（單引號） （空字符串，中間有空格時也是true）

6種值轉化爲布爾值時爲 false 。

當前結論 ![] == false,固然，在使用 == 時永遠不要大意！參見附1；接下來，難題在於， [] 如何轉化進行比較。請先記住一個比較的基本規則：

數組與數值進行比較，會先轉成數值，再進行比較；與字符串進行比較，會先轉成字符串，再進行比較；與布爾值進行比較，兩個運算子都會先轉成數值，而後再進行比較。

附1:

相等運算符（==）隱藏的類型轉換，會帶來一些違反直覺的結果，下面整理一些：

0 == ''             // true
0 == '0'            // true
  
2 == true           // false
2 == false          // false
// 參見圖1第7條
  
false == 'false'    // false
false == '0'        // true
  
false == undefined  // false
false == null       // false
null == undefined   // true
  
' \t\r\n ' == 0     // true
// \t \r \n都是轉義字符，空格就是單純的空格，輸入時能夠輸入空格
// \t 的意思是 橫向跳到下一製表符位置
// \r 的意思是 回車
// \n 的意思是回車換行

遵循上邊的規則(左側x爲數組時)，須要將 [] 與 false 一併轉化爲數字類型後再進行比較。OK，那麼這個規則是誰說的算的呢？
截取一張知乎大佬貼的Es5 規範元知識圖，下述比較參見 7 條。附2(中文版)

附2:

參照第7條:

ToNumber(false) // 0

爲啥呢？上圖

[] 依照圖2，進入第9條，使用 ToPrimitive([]) ，上圖

好吧，要根據類型默認使用 DefaultValue 方法，上圖

[] 屬於字符串hint，那麼執行 toString() ，

console.log([].toString()) // "";

終於，表達式看起來不費勁了，

"" == false ;

每次對比Es5規範很是不方便，因此
結尾總結了一下能夠快速判斷==轉化判斷依據的原則，沒必要每次都參照圖2啦 - 附3
完美

0 == 0 // true

附3

1. x == y同類型原則總結：
2. Number比數值(+0,-0相等);
3. String比長短與字符序列(charCode);
4. Boolean中false == false; // true;
5. 複雜數據類型比較引用地址;
6. x == y不一樣基礎數據類型比較原則總結：
7. x或y出現NaN必定返回false;
8. x或y出現Boolean必定所有轉化數字後在比較;
9. x或y出現Number必定所有轉化數字後比較;
10. x == y 包含複雜數據類型原則:
11. x或y出現複雜數據類型經過valueOf()或toString()轉化爲基本數據類型, 而後參照上述規則比較;

x == y特殊總結：

• Null 與 Undefined除彼此或自身外，一概返回false;
• NaN == NaN; // false

關於咱們

原始高清視頻下載

視頻講解-提取碼：sjgy

QQ答疑交流羣:

600633658

咱們的連接：

知乎 掘金 今日頭條 新浪微博 前端網 思否 簡書 B站