JavaScript 判斷變數的類型

来源:https://www.cnblogs.com/yuzhihui/archive/2023/01/16/17055887.html
-Advertisement-
Play Games

JavaScript 中有多種方法來判斷變數的類型,如 typeof、instanceof、Object.prototype.toString.call()、constructor屬性、Symbol.toStringTag屬性以及 lodash 等第三方庫 ...


JavaScript 中有多種方法來判斷一個變數的類型。

  • 1、typeof 操作符,它可以返回一個字元串來描述變數的類型,如:
console.log(typeof "hello");  // string
console.log(typeof 123);  // number
console.log(typeof true);  // boolean
console.log(typeof {});  // object
console.log(typeof []);  // object
console.log(typeof undefined);  // undefined
console.log(typeof null);  // object
  • 2、instanceof 操作符,可以用來判斷一個變數是否是某個類的實例,如:
console.log("hello" instanceof String);  // false
console.log(new String("hello") instanceof String);  // true
console.log([1, 2, 3] instanceof Array);  // true
console.log({} instanceof Object);  // false
  • 3、Object.prototype.toString.call() 方法,可以返回變數的類型,如:
console.log(Object.prototype.toString.call("hello"));  // [object String]
console.log(Object.prototype.toString.call(123));  // [object Number]
console.log(Object.prototype.toString.call(true));  // [object Boolean]
console.log(Object.prototype.toString.call({}));  // [object Object]
console.log(Object.prototype.toString.call([]));  // [object Array]
console.log(Object.prototype.toString.call(undefined));  // [object Undefined]
console.log(Object.prototype.toString.call(null));  // [object Null]

值得註意的是,在判斷null時,typeof 和 Object.prototype.toString.call() 都會返回 'object',而 instanceof 會返回false,此時可以使用 x === null 來判斷是否是null。

  • 4、使用 JavaScript 原生的 constructor 屬性。每個對象都有一個 constructor 屬性,該屬性指向創建該對象的函數。可以使用該屬性來判斷變數的類型。
console.log("hello".constructor === String);   // true
console.log((123).constructor === Number);     // true
console.log([].constructor === Array);         // true
console.log({}.constructor === Object);        // true
console.log(true.constructor === Boolean);     // true
console.log(undefined.constructor === undefined);   // true
console.log(null.constructor === null);        // Uncaught TypeError: Cannot read property 'constructor' of null

但是這種方法有一個缺陷,當變數是 nullundefined 時,訪問該變數的 constructor 屬性會拋出錯誤。

需要註意的是,以上所有方法在判斷函數時都會返回 'function',如果需要精確的函數類型,可以使用 Object.prototype.toString.call() 來獲取類型 "[object Function]" 或者使用 Function.name 來獲取函數名稱。

  • 5、使用ES6新增的Symbol.toStringTag屬性,它可以返回一個字元串來描述變數的類型,這個方法與使用 Object.prototype.toString.call() 類似
console.log("hello"[Symbol.toStringTag]);  // "String"
console.log(123[Symbol.toStringTag]);  // "Number"
console.log(true[Symbol.toStringTag]);  // "Boolean"
console.log({}[Symbol.toStringTag]);  // "Object"
console.log([] [Symbol.toStringTag]);  // "Array"
console.log(undefined[Symbol.toStringTag]);  // "Undefined"
console.log(null[Symbol.toStringTag]);  // "Null"
console.log(()=>{}[Symbol.toStringTag]);  // "Function"

註意,在使用該方法時需要確保目標瀏覽器支持ES6的 Symbol 類型,或者使用 babel 等工具進行轉換。

  • 6、使用第三方庫,如 lodashisXXX 系列函數,可以用來判斷變數的類型。這些函數的使用方式非常簡單,直接調用對應的函數即可,如:
console.log(_.isString("hello"));  // true
console.log(_.isNumber(123));  // true
console.log(_.isBoolean(true));  // true
console.log(_.isObject({}));  // true
console.log(_.isArray([]));  // true
console.log(_.isUndefined(undefined));  // true
console.log(_.isNull(null));  // true
console.log(_.isFunction(() => {}));  // true

使用這些函數可以避免在不同環境中類型判斷出現問題,更加嚴謹。

 

綜上,JavaScript 中有多種方法來判斷變數的類型,如 typeofinstanceofObject.prototype.toString.call()constructor屬性、Symbol.toStringTag屬性以及 lodash 等第三方庫,在使用時需要根據實際需求來選擇使用。

作者:yuzhihui
出處:http://www.cnblogs.com/yuzhihui/ 聲明:歡迎任何形式的轉載,但請務必註明出處!!!
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ● 什麼是廠商和軟體商: 廠商:一般是指Centos、紅帽、ubantu、suse等等,各linux發行版操作系統的發行廠家,廠家會維護系統的軟體,做相應的測試、補丁發佈、安全更新等 軟體商:一般指各軟體發行商,例如openssh、docker、nginx、tomcat等等,他們是將自己的軟體產品進 ...
  • Elasticsearch(簡稱:ES)功能強大,其背後有很多預設值,或者預設操作。這些操作優劣並存,優勢在於我們可以迅速上手使用 ES,劣勢在於,其實這些預設值的背後涉及到很多底層原理,怎麼做更合適,只有數據使用者知道。用 ES 的話來說,你比 ES 更懂你的數據,但一些配置信息、限制信息,還是需... ...
  • SummingMergeTree引擎繼承自MergeTree。區別在於,當合併SummingMergeTree表的數據片段時,ClickHouse會把所有具有相同主鍵的行合併為一行,該行包含了被合併的行中具有數值數據類型的列的彙總值。如果主鍵的組合方式使得單個鍵值對應於大量的行,則可以顯著的減少存儲 ...
  • 用正則表達式進行搜索 正則表達式介紹 正則表達式是用來匹配文本的特殊的串(字元集合)。 使用MySQL正則表達式 MySQL用WHERE子句對正則表達式提供了初步的支持,允許你指定正則表達式,過濾SELECT檢索出的數據。MySQL僅支持多數正則表達式實現的一個很小的子集。 基本字元匹配 SELEC ...
  • 1. MySQL8安裝 安裝環境 操作系統:CentOS7 MySQL版本:8.0.28 安裝方式:二進位Generic 軟體路徑:/app/database 數據路徑:/data/3306 日誌路徑:/binlog/3306 MySQL Community Server 社區版官網下載鏈接 MyS ...
  • 摘要:華為日曆月活高達數千萬,這使其對支撐業務的資料庫提出了巨大挑戰:高併發場景下,資料庫如何實現快速擴容?海量數據運行,如何確保業務穩定性? 本文分享自華為雲社區《穩定支撐千萬級月活,華為日曆背後的英雄》,作者: GaussDB 資料庫。 隨著科技進步,手機日曆早已融入我們的生活,不僅可以記錄時間 ...
  • 列表中自動播放視頻,常規方案是在每個 xml 中寫入視頻佈局,然後在滑動時獲取當前的下標,播放此下標的視頻 弊端:播放容易出錯,需要精準控制好停止播放操作,並且適配器中容易觸發多次刷新,導致執行多次同樣的操作,不易控制離開停止等操作,增加了佈局的負擔,影響滑動流暢度,無法復用... 使用過的都比較清 ...
  • 前言 最近在做博客園的界面美化,用的是博客園[guangzan]的開源項目,配置超級簡單,只需要複製粘貼代碼就好啦。 但在粘貼 CSS 代碼時遇到一個問題,那就是所有代碼都擠在了一行,沒有一點排板的樣子(如下圖),對我來說是不能忍受的,便決定解決這一問題。 經過一番網上衝浪後,我找到瞭解決方法,並且 ...
一周排行
    -Advertisement-
    Play Games
  • 一:背景 1. 講故事 年前遇到了好幾例托管堆被損壞的案例,有些運氣好一些,從被破壞的托管堆記憶體現場能觀測出大概是什麼問題,但更多的情況下是無法做出準確判斷的,原因就在於生成的dump是第二現場,借用之前文章的一張圖,大家可以理解一下。 為了幫助更多受此問題困擾的朋友,這篇來整理一下如何 快狠準 的 ...
  • 前言 .NET6 開始,.NET Croe API 項目取消了 Startup.cs 文件,在 Program.cs 文件的 Main 函數中完成服務的註冊和中間件管道的管理。但當我們項目引入更多包的時候,Program.cs 文件也會看起來很臃腫。 而且,我們不只會有一個後端項目,為了方便快速創建 ...
  • 目錄 背景 get 與 post 的區別 所有介面都用 post 請求? 背景 最近在逛知乎的時候發現一個有趣的問題:公司規定所有介面都用 post 請求,這是為什麼? 看到這個問題的時候其實我也挺有感觸的,因為我也曾經這樣問過我自己。在上上一家公司的時候接到一個項目是從零開始搭建一個微服務,當時就 ...
  • *以下內容為本人的學習筆記,如需要轉載,請聲明原文鏈接 微信公眾號「englyf」https://mp.weixin.qq.com/s/2GFLTstDC7w6u3fTJxflNA 本文大概 1685 個字,閱讀需花 6 分鐘內容不多, 但也花了一些精力如要交流, 歡迎關註我然後評論區留言 謝謝你的 ...
  • 在新版本的pandas中,上述代碼會引起警告,建議改成SQLAlchemy connectable(engine/connection),後續代碼將引入這種升級的連接方式。 ...
  • 幾乎所有的高級編程語言都有自己的垃圾回收機制,開發者不需要關註記憶體的申請與釋放,Python 也不例外。Python 官方團隊的文章 https://devguide.python.org/internals/garbage-collector 詳細介紹了 Python 中的垃圾回收演算法,本文是這篇 ...
  • 如果您想查找高於或低於平均值的數字,可以不必計算該平均值,就能查看更高或更低的值。通過Java應用程式,可以自動突出顯示這些數字。除了快速突出顯示高於或低於平均值的值外,您還可以查看高於或低於的值的個數。現在讓我們看看如何在 Java應用程式中實現此操作。 引入jar包 導入方法1: 手動引入。將  ...
  • 第一種方式:使用{} firstDict = {"name": "wang yuan wai ", "age" : 25} 說明:{}為創建一個空的字典對象 第二種方式:使用fromkeys()方法 second_dict = dict.fromkeys(("name", "age")) #valu ...
  • 在golang中可以使用a := b這種方式將b賦值給a,只有當b能進行深拷貝時a與b才不會互相影響,否則就需要進行更為複雜的深拷貝。 下麵就是Go賦值操作的一個說明: Go語言中所有賦值操作都是值傳遞,如果結構中不含指針,則直接賦值就是深度拷貝;如果結構中含有指針(包括自定義指針,以及切片,map ...
  • 本文結合京東監控埋點場景,對解決樣板代碼的技術選型方案進行分析,給出最終解決方案後,結合理論和實踐進一步展開。通過關註文中的技術分析過程和技術場景,讀者可收穫一種樣板代碼思想過程和解決思路,並對Java編譯器底層有初步瞭解。 ...