JS數據類型判斷的幾種方法

来源:https://www.cnblogs.com/laozhenHome/archive/2020/07/04/13237301.html
-Advertisement-
Play Games

JS數據類型判斷 JavaScript 中常見數據類型有Number、String、Boolean、Object、Array、Json、Function、Date、RegExp、Error、undefined、Null等十幾種。ES6還有新增的數據類型有Symbol、Set、Map等。在實際應用中, ...


JS數據類型判斷

JavaScript 中常見數據類型有Number、String、Boolean、Object、Array、Json、Function、Date、RegExp、Error、undefined、Null等十幾種。ES6還有新增的數據類型有Symbol、Set、Map等。在實際應用中,我們經常需要判斷數據類型,現在我歸納幾種方法,希望對大家有所幫助。

typeof 判斷(最常用)

typeof 是 JS 提供的一個運算符,專門用來檢測一個變數的類型 。 typeof 有2種使用方式:typeof(表達式)和typeof 變數名,第一種是對錶達式做運算,第二種是對變數做運算。

function doSomething() {
    console.log('Hello World!');
}
console.log(typeof 1); // number
console.log(typeof 'Hello'); // string
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof doSomething); // function
console.log(typeof true); // boolean
console.log(typeof new Date()); // object
console.log(typeof new RegExp()); // object
console.log(typeof JSON.stringify({
    name: 'zhencanhua'
})); // string
console.log(typeof null); // object
console.log(typeof undefined); // undefined
console.log(typeof (new Error('error!'))); // object

console.log(typeof a); // undefined
console.log(typeof Symbol()); // symbol
console.log(typeof new Set()); // object
console.log(typeof new Map()); // object

從上面列印結果可以看出,typeof 不能區分引用型數據的類型和 null。另我們可以使用 Array.isArray(arr) 將數組類型的數據從中篩選出來。

instanceof 判斷(瞭解)

instanceof 用來檢測構造函數的 prototype 屬性是否出現在某個實例對象的原型鏈上。 語法:object(實例對象) instanceof constructor(構造函數)。是的話返回 true,否則返回 false。所以, instanceof 運算符只能用作對象的判斷。 針對 typeof 不能判斷的引用型數據,我們可以使用 instanceof 運算符。

let arr1 = [1, 2, 3];
let obj1 = {
    name: '小明'
};
function Persion() { }
let persion1 = new Persion();
console.log(arr1 instanceof Array); // true
console.log(arr1 instanceof Object); // true,Array 是Object的子類
console.log(obj1 instanceof Object); // true
console.log(obj1 instanceof Array); // false
console.log(Persion instanceof Function, Persion instanceof Object); // true true
console.log(null instanceof Object); // false
console.log(persion1 instanceof Persion, persion1 instanceof Function, persion1 instanceof Object); // true false true
// String對象和Date對象都屬於Object類型
let str1 = 'Hello';
let str2 = new String();
let str3 = new String('你好');
let myDate = new Date();
console.log(str1 instanceof String, str1 instanceof Object); // false, false
console.log(str2 instanceof String, str2 instanceof Object); // true, true
console.log(str3 instanceof String, str3 instanceof Object); // true, true
console.log(myDate instanceof Date, myDate instanceof Object); // true, true

從上面的判斷可以看出,instanceof 的使用限制很多,而且還不能很清晰方便的判斷出一個實例是數組還是對象或方法。

針對上面方法的弊端,我們可以使用 Object.prototype上的原生toString()方法來檢測數據的類型。

Object.prototype.toString.call() 判斷(最靠譜)

Object 是 JS 提供的原生對象, Object.prototype.toString對任何變數都會返回這樣一個字元串"[object class]",class 就是 JS 內置對象的構造函數的名字。 call是用來改變調用函數作用域的。

Object.prototype.toString() 在toString方法被調用時執行下麵的操作步驟:

  1. 獲取this對象的[[Class]]屬性的值。(所以使用call來改變this的指向)

  2. 將字元串"[object ",第一步獲取的值, 以及 "]"拼接成新的字元串並返回。

[[Class]]是一個內部屬性,所有的對象(原生對象和宿主對象)都擁有該屬性。在規範中,[[Class]]是這麼定義的: 內部屬性的描述, [[Class]] 是一個字元串值,表明瞭該對象的類型。

讀了上面的說明,用 call 的關鍵地方就在第1步,獲取的是 this 對象,不加 call 改變作用域時 this 指向的是Object.prototype。

function doSomething() {
    console.log('Hello World!');
}
// 使用Object.prototype.toString.call來判斷
console.log(Object.prototype.toString.call(1)); // [object Number]
console.log(Object.prototype.toString.call('Hello')); // [object String]
console.log(Object.prototype.toString.call(false)); // [object Boolean]
console.log(Object.prototype.toString.call({})); // [object Object]
console.log(Object.prototype.toString.call([1, 2, 3])); // [object Array]
console.log(Object.prototype.toString.call(new Error('error!'))); // [object Error]
console.log(Object.prototype.toString.call(new Date())); // [object Date]
console.log(Object.prototype.toString.call(new RegExp())); // [object RegExp]
console.log(Object.prototype.toString.call(doSomething)); // [object Function]
console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(JSON.stringify({
    name: 'zhencanhau'
}))); // [object String]
console.log(Object.prototype.toString.call(Math)); // [object Math]
console.log(Object.prototype.toString.call(Symbol('abc'))); // [object Symbol]
console.log(Object.prototype.toString.call(new Set())); // [object Set]
console.log(Object.prototype.toString.call(new Map())); // [object Map]

但在實際應用時我們只想獲取返回的結果中數組的第二項,比如"[object Number]",我們只想要Number這段字元,那麼我們可以寫個函數進行過濾:

// 通過定義一個公共函數獲取數據類型
function getTypeName(val) {
    let str = Object.prototype.toString.call(val);
    return /^\[object (.*)\]$/.exec(str)[1];
}
console.log(getTypeName(false)); // Boolean
console.log(getTypeName()); // Undefined
console.log(getTypeName(null)); // Null

上面的問題完美解決。

constructor 判斷(比較常用)

每一個對象實例都可以通過 constrcutor 對象來訪問它的構造函數 。JS 中內置了一些構造函數:Object、Array、Function、Date、RegExp、String等。我們可以通過數據的 constrcutor 是否與其構造函數相等來判斷數據的類型。

var arr = [];
var obj = {};
var date = new Date();
var num = 110;
var str = 'Hello';
var getName = function(){};
var sym = Symbol();
var set = new Set();
var map = new Map();

arr.constructor === Array; // true
obj.constructor === Object; // true
date.constructor === Date; // true
str.constructor === String; // true
getName.constructor === Function; // true
sym.constructor === Symbol; // true
set.constructor === Set; // true
map.constructor === Map // true

但是這種方式仍然有個弊端,就是 constructor 所指向的的構造函數是可以被修改的。

function Name(name) {
    this.name = name;
}

function Stuent(age) {
    this.age = age;
}
// 將構造函數Name的實例賦給Student的原型,Student的原型的構造函數會發生改變,將不再指向自身。
Stuent.prototype = new Name('張三');
Stuent.prototype.constructor === Name; // true
Stuent.prototype.constructor === Stuent; // false

以上就是我在項目中用到過的數據類型的判斷方法,具體使用哪一種,還需要根據自己的實際需求來判斷選擇。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 由於一些原因,我重新安裝了系統並把之前的鏡像與虛擬機刪除了,現在又全新安裝一次CenOS6.7,順便查缺補漏,帶領各位讀者一起安裝。 (本文適合小白/新人,大佬們請忽略),帶有可選步驟的可以忽略,1-20是VMware軟體的設置,系統的安裝從21-45條開始,剩餘部分是後續配置建議。如發現問題或有疑 ...
  • ver: 1.0 博客:https://www.cnblogs.com/Rohn 本文介紹了Shell常用的結構化語句。 數組 數組(Array)是若幹數據的集合,其中的每一份數據都稱為元素(Element)。 Bash只支持一維數組(不支持多維數組),初始化時不需要定義數組大小,理論上可以存放無限 ...
  • hbase2.1.9 centos7 完全分散式 搭建隨記 這裡是當初在三個ECS節點上搭建hadoop+zookeeper+hbase+solr的主要步驟,文章內容未經過潤色,請參考的同學搭配其他博客一同使用,並記得根據實際情況調整相關參數 1. 指定位置解壓 2. vi /etc/profile ...
  • zookeeper3.5.5 centos7 完全分散式 搭建隨記 這裡是當初在三個ECS節點上搭建hadoop+zookeeper+hbase+solr的主要步驟,文章內容未經過潤色,請參考的同學搭配其他博客一同使用,並記得根據實際情況調整相關參數 0.prepare 準備奇數台已經配置好jdk的 ...
  • Hadoop2.7.7 centos7 完全分散式 配置與問題隨記 這裡是當初在三個ECS節點上搭建hadoop+zookeeper+hbase+solr的主要步驟,文章內容未經過潤色,請參考的同學搭配其他博客一同使用,並記得根據實際情況調整相關參數。 0.prepare jdk,推薦1.8 關閉防 ...
  • 我們需要接受失望,因為它是有限的;我們不會失去希望,因為它是無窮的。 一、概述 隨著時間和業務的發展,資料庫中表的數據量會越來越大,相應地,數據操作,增刪改查的開銷也會越來越大。因此,把其中一些大表進行拆分到多個資料庫中的多張表中。 本篇文章是基於非事務消息的非同步確保的方式來完成分庫分表中的事務問題 ...
  • MySQL索引 索引分類 最左首碼原則 覆蓋索引 索引下推 聯合索引順序 What's Index ? 索引就是幫助RDBMS高效獲取數據的數據結構。 索引可以讓我們避免一行一行進行全表掃描。它的價值就是可以幫助你對數據進行快速定位。 索引分類 按照功能邏輯來分 普通索引 INDEX(col_nam ...
  • Flutter第一個應用--踩坑之路 安裝 參照官網教程(這裡)下載解壓,以及設置環境變數即可。 如果你是中國用戶(當然了,我們都是),參考這篇文章Using Flutter in China,設置一下中國的鏡像。 比如我用的是zsh,那我的設置如下: export PUB_HOSTED_URL=h ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式(靜態工廠模式)1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點:2. 總結:3 ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說,下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫,因此mysql數據發生改變時,Elasticsearch也必須跟著改變,這個就是Elasticsearch與my ...
  • 引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據,今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫,旨在最大程度地減少單元測試中的“安排(Arrange)”階段,以提高 ...
  • 經過前面幾個部分學習,相信學過的同學已經能夠掌握 .NET Emit 這種中間語言,並能使得它來編寫一些應用,以提高程式的性能。隨著 IL 指令篇的結束,本系列也已經接近尾聲,在這接近結束的最後,會提供幾個可供直接使用的示例,以供大伙分析或使用在項目中。 ...
  • 當從不同來源導入Excel數據時,可能存在重覆的記錄。為了確保數據的準確性,通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間,而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟: 1. 首先安裝免費.NET ...
  • C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式,使程式更加健壯和可靠。 異常處理的基本概念: 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • 優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解,包括JDK和第三方庫。 我花了很多時間來學習API,尤其是在閱讀了Effective Java 3rd Edition之後 ,Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發,而不是為常見的東西編 ...
  • 框架 · 使用laravel框架,原因:tp的框架路由和orm沒有laravel好用 · 使用強制路由,方便介面多時,分多版本,分文件夾等操作 介面 · 介面開發註意欄位類型,欄位是int,查詢成功失敗都要返回int(對接java等強類型語言方便) · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵,火星子都快出來了。司機跟那同事更熟一些,連我在內一共就三個人,同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了,馬上聽出來了,為那個無辜的企業經辦人辯護,實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責, ...