關于javascript中類型判斷的那些疑惑

李增田發布于2019-08-23 12:19 / 652人閱讀

摘要：對于復雜類型它的每個實例都有屬性。當檢測實例時優于因為能檢測這段代碼是從的。補充以下結果，發現第三種方法也能正確判斷出。我們知道結果是那如何判斷兩個變量呢比較兩個變量，使用的即可。

Javascript中數據類型分為兩種：

簡單數據類型：Undefined, NULL, Boolean, Number, String

復雜數據類型：Object

接下來我們就來看看怎么做數據類型判別吧？

首先來看看 typeof

Type	Result
Undefined	"undefined"
Null	"object" (see below)
Boolean	"boolean"
Number	"number"
String	"string"
Symbol (new in ECMAScript 2015)	"symbol"
Host object (provided by the JS environment)	Implementation-dependent
Function object (implements [[Call]] in ECMA-262 terms)	"function"
Any other object	"object"

來點code demo吧

let a = undefined;
typeof a
"undefined"

let b = false;
typeof b
"boolean"

let c = 12;
typeof c
"number"

let d = "12";
typeof d
"string"

let f = function () {};
typeof f
"function"

接下來我們就來看看那些奇怪的現象吧

let str = new String("abc");
typeof str
"object"

let num = new Number(12);
typeof num
"object"

var func = new Function();
typeof func; 
"function"

typeof null
"object"

使用構造函數創建的變量，使用typeof判斷會返回“object”結果，但是Function函數例外，由它創建的變量typeof返回的是“function”

接著就來說說typeof null == "object"。這個相信前端開發的小伙伴都知道是這個結果了，But why? 這其實是javascript第一個版本就存在的一個bug,歷史原因可以看看這篇文章The history of typeof null

關于如何判斷數組

let arr = [1, 2, 3];
typeof arr
"object"

上面這個結果大家應該不陌生，那該如何正確判斷數組類型呢

instanceof

arr instanceof Array  //true

isArray

Array.isArray(arr) // true

constructor.name

arr.constructor.name  // "Array"

第三種用法用的人應該比較少，不少前端的的小伙伴都沒用過。對于復雜類型Object,它的每個實例都有constructor屬性。

instanceof vs isArray

當檢測Array實例時, Array.isArray 優于 instanceof,因為Array.isArray能檢測iframes.

var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]

// Correctly checking for Array
Array.isArray(arr);  // true
// Considered harmful, because doesn"t work though iframes
arr instanceof Array; // false

這段代碼是從MDN copy的。補充以下結果，發現第三種方法constructor.name也能正確判斷出。

arr.constructor.name //"Array"

關于NaN

使用isNaN判斷NaN。

isNaN(1/"a") // true

我們知道NaN == NaN結果是false,那如何判斷兩個NaN變量呢？

比較兩個NaN變量，使用es6的Object.is()即可。

let nan1 = NaN
let nan2 = NaN
Object.is(nan1, nan2)
true

GPU云服務器云服務器 js中判斷數據類型關于javascript的問題 js判斷時間類型的數據類型 js如何判斷類型的數據類型

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

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

JavaScript專題系列20篇正式完結！

摘要：寫在前面專題系列是我寫的第二個系列，第一個系列是深入系列。專題系列自月日發布第一篇文章，到月日發布最后一篇，感謝各位朋友的收藏點贊，鼓勵指正。寫在前面 JavaScript 專題系列是我寫的第二個系列，第一個系列是 JavaScript 深入系列。 JavaScript 專題系列共計 20 篇，主要研究日常開發中一些功能點的實現，比如防抖、節流、去重、類型判斷、拷貝、最值、扁平、柯里...

sixleaves 2019-08-21 17:15 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
那些年，前端學習之路的疑難雜癥（三）：數組和Date的一些梳理

摘要：將指定的數字索引值轉換成字符串索引值變成，然后將其作為屬性名來用。返回一個由刪除元素組成的數組。該方法返回的數組元素是調用的數組的一個子集。使用的函數有四個參數初始值積累值數組元素元素索引數組本身。前言很多人在學習原生JS的過程中會遇到一些疑惑，比如在學習array時，就很容易搞不清哪些方法會改變原來數組，哪些方法不會改變原來數組？再比如很多人會使用new Date()獲取時間，卻...

xeblog 2019-08-21 11:33 評論0 收藏0
JS編譯之 LHS RHS（你不知道的JavaScript 小記一）

摘要：關于兩個專業術語的討論起自對你不知道的一書的閱讀學習。遇到，編譯器會詢問作用域是否已經有一個該名稱的變量存在于同一個作用域的集合中。摘錄來自你不知道的。 JS 編譯之 LHS RHS 一、前言最近和朋友聊技術的時候，聊到 LHS RHS，我竟然沒聽說過沒聽說過。。。于是成功引起了我的好奇心。關于兩個專業術語的討論起自對《你不知道的JavaScript》一書的閱讀學習。二、編譯...

Cristic 2019-08-22 18:41 評論0 收藏0
JavasScript重難點知識

摘要：忍者級別的函數操作對于什么是匿名函數，這里就不做過多介紹了。我們需要知道的是，對于而言，匿名函數是一個很重要且具有邏輯性的特性。通常，匿名函數的使用情況是創建一個供以后使用的函數。 JS 中的遞歸遞歸, 遞歸基礎, 斐波那契數列, 使用遞歸方式深拷貝, 自定義事件添加這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果...

forsigner 2019-08-21 18:36 評論0 收藏0