JS類型（一）：深入討論“==”與“===”

Wildcard 發布于2019-08-21 16:56 / 909人閱讀

摘要：如果與相同，執行嚴格相等運算。如果是布爾值，返回的結果。，需要兩個操作數同時轉為。四附錄常見的引用對象轉基本類型的例子對象或者非空對象轉基本類型返回數組轉基本類型，返回數組元素合集組成的字符串，每個元素用，連接

一：前言

寫前端代碼的一個避不開的問題：“==” “===”到底是怎么回事？
下面是大眾的理解：

1. "=="指的是數值的相等。即使類型不一致，轉化后的值相等，還是返回true
2. "==="指的是類型和數值都相等，如果類型不一致就直接呵呵了

然而記住了這些并沒有什么用，上面的說法太不具體了，該出錯的時候還是會出錯。

二：正文

1.“==”是怎么回事？

0 == null

上面的表達式返回true還是false？？

在讀懂規格上，下面是算法細節。

ReturnIfAbrupt(x).
ReturnIfAbrupt(y).
If Type(x) is the same as Type(y), then
Return the result of performing Strict Equality Comparison x === y.
If x is null and y is undefined, return true.
If x is undefined and y is null, return true.
If Type(x) is Number and Type(y) is String,
return the result of the comparison x == ToNumber(y).
If Type(x) is String and Type(y) is Number,
return the result of the comparison ToNumber(x) == y.
If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y.
If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).
If Type(x) is either String, Number, or Symbol and Type(y) is Object, then
return the result of the comparison x == ToPrimitive(y).
If Type(x) is Object and Type(y) is either String, Number, or Symbol, then
return the result of the comparison ToPrimitive(x) == y.
Return false.

上面這段算法，一共有12步，翻譯如下。

如果x不是正常值（比如拋出一個錯誤），中斷執行。
如果y不是正常值，中斷執行。
如果Type(x)與Type(y)相同，執行嚴格相等運算x === y。
如果x是null，y是undefined，返回true。
如果x是undefined，y是null，返回true。
如果Type(x)是數值，Type(y)是字符串，返回x == ToNumber(y)的結果。
如果Type(x)是字符串，Type(y)是數值，返回ToNumber(x) == y的結果。
如果Type(x)是布爾值，返回ToNumber(x) == y的結果。
如果Type(y)是布爾值，返回x == ToNumber(y)的結果。
如果Type(x)是字符串或數值或Symbol值，Type(y)是對象，返回x == ToPrimitive(y)的結果。
如果Type(x)是對象，Type(y)是字符串或數值或Symbol值，返回ToPrimitive(x) == y的結果。
返回false。

引用MDN上的一張圖就是：

由于0的類型是數值，null的類型是Null（這是規格4.3.13小節的規定，是內部Type運算的結果，跟typeof運算符無關）。因此上面的前11步都得不到結果，要到第12步才能得到false。

0 == null // false

上面12條規則，對于“==”部分可以用一張圖的總結：

前面說得很亂，根據我們得到的最終的圖3，我們總結一下==運算的規則：

undefined == null，結果是true。且它倆與所有其他值比較的結果都是false。

String == Boolean，需要兩個操作數同時轉為Number。

String/Boolean == Number，需要String/Boolean轉為Number。

Object == Primitive，需要Object轉為Primitive(具體通過valueOf和toString方法)。

對這張圖的詳細介紹可以查看文章：https://segmentfault.com/a/11...
2.“===”又是怎么回事？
這個比較簡單了，"==="是嚴格意義上的相等，必須要了類型和值都相等才返回true,否則返回false。所以在判斷的時候比較容易就能看出來（一模一樣才是true）。

三.擴展延伸

比較是否相等有三種方法：

=== 嚴格的相等

== 寬松的相等

Object.is

一張表格來說明它們之間的區別：

這里主要注意 NaN 、 -0 +0這兩對表現得不一致情況。

四.附錄：常見的引用對象轉基本類型的例子

1.對象({}或者非空對象)轉基本類型返回"[object Object]"

const obj = {};
obj.toString();//"[object Object]"
obj.name="name";
obj.toString();//"[object Object]"

2.數組轉基本類型，返回數組元素合集組成的字符串，每個元素用"，"連接

[].toString();//""
[1,2].toString();//"1,2"
[[1,2],3].tonString();//"1,2,3"

GPU云服務器云服務器 js與jsp怎么傳遞數據類型 mongodb管理與開發實戰詳解深入云計算 mongodb管理與開發實戰詳解-深入云計算數據類型與

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

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

javascript知識點

摘要：模塊化是隨著前端技術的發展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優化目前 Vue.js 的火爆不亞于當初的 React，本人對寫代碼有潔癖，代碼也是藝術。此篇是準備篇，工欲善其事，必先利其器。我們先在代...

Karrdy 2019-08-26 11:34 評論0 收藏0
JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
前端每周清單第 48 期：Slack Webpack 構建優化，CSS 命名規范與用戶追蹤，Vue.

摘要：發布是由團隊開源的，操作接口庫，已成為事實上的瀏覽器操作標準。本周正式發布，為我們帶來了，，支持自定義頭部與腳部，支持增強，兼容原生協議等特性變化。新特性介紹日前發布了大版本更新，引入了一系列的新特性與提升，本文即是對這些變化進行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...

sean 2019-08-22 13:57 評論0 收藏0
【進階1-3期】JavaScript深入之內存空間詳細圖解

摘要：進階期理解中的執行上下文和執行棧進階期深入之執行上下文棧和變量對象但是今天補充一個知識點某些情況下，調用堆棧中函數調用的數量超出了調用堆棧的實際大小，瀏覽器會拋出一個錯誤終止運行。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第3天。本計劃一共28期，每期重點攻...

coordinate35 2019-08-23 13:47 評論0 收藏0