1. 程式人生 > >javascript中!=、!==、==、===操作符總結

javascript中!=、!==、==、===操作符總結

JavaScript 有兩種比較方式:嚴格比較運算子和轉換型別比較運算子。
在相等運算子中對應 ===!====!=

先舉個栗子

var str = '1'
var num0 = 0
var num1 = 1
var blT = true
var blF = false
var nul = null
var und = undefined
console.log(str == num1) // true
console.log(str == blT) // true
console.log(blT == num1) // true
console.log(blF == num0) // true
console.log(nul == und) // true

console.log(str === num1) // false
console.log(str === blT) // false
console.log(blT === num1) // false
console.log(blF === num0) // false
console.log(nul === und) // false

相等操作符(==)會為兩個不同型別的運算元進行型別轉換,然後進行嚴格比較。
嚴格相等操作符(===),一般也叫做全等操作符。會先判斷型別,再比較值是否相等。

型別轉換

型別轉換的途徑:

型別(x) 型別(y) 結果
undefined null true
字串 數字 toNumber(x) == y
布林值 數字 toNumber(x) == y
物件 字串/數字 toPrimary(x) == y

對於兩個型別不同的運算元比較。

  • 字串、布林值都會先轉換成數字型別,再做比較。toNumber(x)
  • 對於複雜資料型別,會先將其轉換為原始值,之後,再根據上一個規則比較。
    x = toPrimary(obj) ==> toNumber(x)

    而,如何轉成原始型別值呢,一般都會自動通過自帶的valueOf()方法或者toString()方法實現。如果轉換之後非原始值,比較操作會報型別錯誤。

具體過程:
先執行valueOf方法,如果該方法返回一個原始值,則將這個原始值轉換為數字,並返回這個數字,轉換過程結束。如果返回非原始值,繼續下一步。
否則,執行toString方法,如果該方法返回一個原始值,則將這個原始值轉換為數字,並返回這個數字,轉換過程結束。如果返回非原始值 ,繼續下一步。
以上都沒有成功轉換為原始值,則丟擲一個型別轉換錯誤的異常。
tips: 每個方法只執行一次。不會將方法返回的非原始型別值繼續轉換。

舉個例子說明下,參考於

知乎:

原始資料型別(string,number,boolean,null, undefined,symbol)。
複雜資料型別(Object, Function, Array, Date, ...)
基礎資料型別的比較,是值的比較,Object物件的比較,則是引用的比較

相等操作符(==),經過型別轉換之後,才比較他們的值或者物件值。
對於全等操作符(===),等號兩邊的值和型別,必須完全相等。

為什麼建議使用 ===

1. review程式碼時候,增加理解時間

在使用了 ==的表示式中,我們需要先理解作者的意圖。

  • 想當然的以為都可以。
  • 確實需要通過型別轉換來判斷。
  • 不應該型別轉換,但是寫錯了。

2. 會判斷錯誤

let num = 2
let obj = {
  valueOf: function() {
    return 2
  }
}
console.log(obj == 2)

輸出true
我們本意是這兩者!=,而這裡得到的結果是==,這不是我們想要的結果。

3. 會產生異常

let num = 2
let obj = {
  valueOf: function() {
    return {}
 },
 toString: function() {
  return {}
 }
}
console.log(obj === 2)
console.log(obj == 2)

第一行輸出:false
第二行輸出錯誤提示:Uncaught TypeError: Cannot convert object to primitive value

通過前面型別轉換,可以得知,一般情況下,物件會先轉換為原始值。
而其過程是通過自帶的valueOf()/toString()先轉換為primitive value,再和其他值做比較。
而在這裡,我們手動將obj物件的valueOf()/toString()覆蓋了,導致無法實現轉換為原始值。

一般情況下,建議使用=== ,除非你瞭解,確實需要型別轉換,才使用 ==

條件表示式語句(if、三目運算等)

if (condition) {
    statement1 
} else {
    statement2
}

以上是if語句的基礎用法。通過判斷condition的布林值,來決定執行statement1程式碼塊1,還是執行statement2程式碼塊2。
先看下面的例子:

var s = 'str'
var blT = true
var blF = false
if (s) {
    console.log('正確')
} else {
    console.log('錯誤')
}
console.log(s == blT)

以上語句,得到的結果是

正確
false

為什麼if語句,會執行第一個程式碼塊。而s == blT 卻是false呢?
其實,這個就涉及到型別轉換的問題了。
輸出“正確”

  • if語句的條件表示式,會自動呼叫Boolean()轉換函式,將這個表示式的結果轉換為一個布林值。
  • Boolean('str') = true

輸出false

  • 根據在上面型別轉換那部分所講,會先呼叫Number()轉換函式轉換為數值,之後再比較。
  • Number('str') = NaN
  • Number(true) = 1

圖表舉例列出常見物件相等情況

普通相等
完全相等

【完】

相關推薦

javaScript的物件BOMDOM知識點總結

一、  什麼是javaScript物件?         物件是javaScript中最重要的API。         javaScript包含多種物件有:內建物件、外部物件(window物件、dom

學習javascript的requireimport和export的一點總結

1, AMD和CMD是基於require 來實現的。2, AMD和CMD兩者的不同在於對依賴模組的執行時機處理不同。AMD依賴前置,js可以方便知道依賴模組是誰,立即載入;CMD就近依賴,按需載入,需要使用把模組變為字串解析一遍才知道依賴了那些模組。3, AMD和CMD兩者都

JavaScript的callapplybind是怎麽回事?

ava 利用 參數 lock 們的 app scrip lac target 在JS中,這三者都是用來改變函數的this對象的指向的,他們有什麽樣的區別呢。在說區別之前還是先總結一下三者的相似之處:1、都是用來改變函數的this對象的指向的。2、第一個參數都是this要

JavaScript變量作用域和內存問題(JavaScript高級程序設計第4章)

外部 對象的引用 pan object 揮手 fun 可用內存 限制 argument 一、變量 (1)ECMAScript變量肯能包含兩種不同的數據類型的值:基本類型值和引用類型值。基本類型值指的是簡單的數據段,引用類型值指那些可能由多個值構成的對象。 (2)基本數據類型

javascript的requireimport和export

為什麼有模組概念 理想情況下,開發者只需要實現核心的業務邏輯,其他都可以載入別人已經寫好的模組。 但是,Javascript不是一種模組化程式語言,在es6以前,它是不支援”類”(class),所以也就沒有”模組”(module)了。 require時代 Javas

JavaScript的callapplybind用法

這三種都是用來明確指定 this 關鍵字所指物件到底是誰。 Function.prototype.call() call() 方法呼叫一個函式, 其具有一個指定的this值和分別地提供的引數(引數的列表)。 語法 fun.call(thisArg, arg1, arg2, ...

JavaScript的thisapply()call()bind()

this this是函式執行時基於函式的執行環境繫結的,指向最後呼叫它的那個物件。 例1: function a(){ var name= "Carol"; console.log(this.user); //undefined console.log(t

javascript的let const 和 var 的區別

在JavaScript中有三種宣告變數的方式:var、let、const。下文給大家介紹js中三種定義變數的方式const, var, let的區別 1.let和const中不存在變數提升,var中存在變數提升 console.log("a----" + a); var

javascript for in for forEach for of Object.keys().

一 、for ..in 迴圈   使用for..in迴圈時,返回的是所有能夠通過物件訪問的、可列舉的屬性,既包括存在於例項中的屬性,也包括存在於原型中的例項。這裡需要注意的是使用for-in返回的屬性因各個瀏覽器廠商遵循的標準不一致導致物件屬性遍歷的順序有可能不是當初構建時的順序。(例項+原型中的可列舉屬性

this(他喵的)到底是什麼 — 理解 JavaScript 的 thiscallapply 和 bind

javaScript 中最容易被誤解的一點就是 this 關鍵字。在這篇文章中,你將會了解四種規則,弄清楚 this 關鍵字指的是什麼。隱式繫結、顯式繫結、new 繫結和 window 繫結。在介紹這些技術時,你還將學習一些 JavaScript 其他令人困惑

深入理解 JavaScript的變數傳參

1. demo 如果你對下面的程式碼沒有任何疑問就能自信的回答出輸出的內容,那麼本篇文章就不值得你浪費時間了。 var var1 = 1 var var2 = true var var3 = [1,2,3] var var4 = var3 function test (var1, var3) {

JavaScript的callapplybind方法

在JavaScript中,call、apply和bind是Function物件自帶的三個方法,這三個方法的主要作用是改變函式中的this指向。 call、apply、bind方法的共同點和區別: apply 、 call 、bind 三者都是用來改變函式的this物件的指向的; apply 、 ca

JavaScript一個等號二個等號 三個等號 的區別

一個等號是賦值操作,==先轉換型別再比較,===先判斷型別,如果不是同一型別直接為false。=== 判斷規則如果型別不同,就[不相等] 如果兩個都是數值,並且是同一個值,那麼[相等];(!例外)的是,如果其中至少一個是NaN,那麼[不相等]。(判斷一個值是否是NaN,只能用

Javascript的onkeydownonkeypressonkeyup的區別

測試介面如下: 測試程式碼如下: html程式碼: <input type="text" onkeydown="downEvent()" onkeypress="pressEvent()

javascript靜態方法例項方法內部方法和原型的一點見解

1、靜態方法的定義 Js程式碼   var BaseClass = function() {}; // var BaseClass=new Function(); BaseClass.f1 = function(){//定義靜態方法      alert('

javascript的_proto_constructor和prototype詳解

首先,在JavaScript中,任何物件都有一個proto屬性;任何方法都有prototype屬性,指向一個物件,稱為原型物件,這個物件有一個proto屬性,另外還有一個constructor屬性。 <script> function

JavaScript本地物件內建物件和宿主物件

首先解釋下宿主環境:一般宿主環境由外殼程式建立與維護,只要能提供js引擎執行的環境都可稱之為外殼程式。如:web瀏覽器,一些桌面應用系統等。即由web瀏覽器或是這些桌面應用系統早就的環境即宿主環境。 本地物件 ECMA-262 把本地物件(native object)

Javascript 函式宣告函式表示式匿名函式的寫法

javascript和其他程式語言相比比較隨意,所以javascript程式碼中充滿各種奇葩的寫法,有時霧裡看花,當然,能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。 ( function(){…} )()和( function (){…}

JavaScript資料型別資料型別的劃分與區別

JavaScript中資料型別包括:         Number String Boolean Object Funtion Null undefined JavaScript資料型別分為引用型別和基本型別         基本型別:Number String Boo

轉:徹底搞清楚javascript的requireimport和export

開發 括號 async tel accept bound tab and 自然 為什麽有模塊概念 理想情況下,開發者只需要實現核心的業務邏輯,其他都可以加載別人已經寫好的模塊。 但是,Javascript不是一種模塊化編程語言,在es6以前,它是不支持”類&