javascript四種類型識別的方法

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/08/06/5744363.html
-Advertisement-
Play Games

[1]typeof [2]instanceof [3]constructor [4]Object.prototype.toString ...


×
目錄
[1]typeof [2]instanceof [3]constructor[4]toString

前面的話

  javascript有複雜的類型系統,類型識別則是基本的功能。javascript總共提供了四種類型識別的方法,本文將對這四種方法進行詳細說明

 

typeof運算符

  typeof是一元運算符,放在單個操作數的前面,返回值為表示操作數類型的首字母小寫的字元串

  [註意]typeof運算符後面帶不帶圓括弧都可以

console.log(typeof 'a');//'string'
console.log(typeof ('a'));//'string'

識別

  【1】可以識別標準類型(將Null識別為'object') 

  【2】不能識別具體的對象類型(Function除外)

console.log(typeof "jerry");//"string"
console.log(typeof 12);//"number"
console.log(typeof true);//"boolean"
console.log(typeof undefined);//"undefined"
console.log(typeof null);//"object"
console.log(typeof {name: "jerry"});//"object"

console.log(typeof function(){});//"function"
console.log(typeof []);//"object"
console.log(typeof new Date);//"object"
console.log(typeof /\d/);//"object"
function Person(){};
console.log(typeof new Person);//"object"

  [註意]判斷一個值是否為null類型的最佳方法是直接和null進行恆等比較

console.log(typeof null);//'object'
console.log(null === null);//true
console.log(undefined === null);//false
console.log('null' === null);//false

 

instanceof運算符

  instanceof是一個二元運算符,左操作數是一個對象,右操作數是一個構造函數。如果左側的對象是右側構造函數的實例對象,則表達式返回true;否則返回false

  如果左操作數不是對象,返回false,如果右操作數不是函數,則拋出一個類型錯誤異常TypeError

console.log(123 instanceof function(){});//false
//Uncaught TypeError: Right-hand side of 'instanceof' is not an object
console.log({} instanceof 123);

  [註意]所有的對象都是Object的實例

識別

  【1】可以識別內置對象類型、自定義類型及其父類型

  【2】不能識別標準類型,會返回false

  【3】不能識別undefined、null,會報錯

console.log("jerry" instanceof String);//false
console.log(12 instanceof Number);//false
console.log(true instanceof Boolean);//false
console.log(undefined instanceof Undefined);//報錯
console.log(null instanceof Null);//報錯
console.log({name: "jerry"} instanceof Object);//true

console.log(function(){} instanceof Function);//true
console.log([] instanceof Array);//true
console.log(new Date instanceof Date);//true
console.log(/\d/ instanceof RegExp);//true
function Person(){};
console.log(new Person instanceof Person);//true
console.log(new Person instanceof Object);//true

 

constructor屬性

  實例對象的constructor屬性指向其構造函數。如果是內置類型,則輸出function 數據類型(){[native code]};如果是自定義類型,則輸出function 數據類型(){}

識別

  【1】可以識別標準類型、內置對象類型及自定義類型

  【2】不能識別undefined、null,會報錯,因為它倆沒有構造函數

console.log(("jerry").constructor);//function String(){[native code]}
console.log((12).constructor);//function Number(){[native code]}
console.log((true).constructor);//function Boolean(){[native code]}
console.log((undefined).constructor);//報錯
console.log((null).constructor);//報錯
console.log(({name: "jerry"}).constructor);//function Object(){[native code]}

console.log((function(){}).constructor);//function Function(){[native code]}
console.log(([]).constructor);//function Array(){[native code]}
console.log((new Date).constructor);//function Date(){[native code]}
console.log((/\d/).constructor);//function RegExp(){[native code]}
function Person(){};
console.log((new Person).constructor);//function Person(){}

  可以將constructor屬性封裝成一個類型識別方法

function type(obj){
    var temp = obj.constructor.toString();
    return temp.replace(/^function (\w+)\(\).+$/,'$1');
}
function type(obj){
    var temp = obj.constructor.toString().toLowerCase();
    return temp.replace(/^function (\w+)\(\).+$/,'$1');
}
console.log(type("jerry"));//"string"
console.log(type(12));//"number"
console.log(type(true));//"boolean"
console.log(type(undefined));//錯誤
console.log(type(null));//錯誤
console.log(type({name: "jerry"}));//"object"

console.log(type(function(){}));//"function"
console.log(type([]));//"array"
console.log(type(new Date));//"date"
console.log(type(/\d/));//"regexp"
function Person(){};
console.log(type(new Person));//"person"

 

Object.prototype.toString()方法

  對象的類屬性是一個字元串,用以表示對象的類型信息。javascript沒有提供設置這個屬性的方法,但有一種間接方法可以查詢它。Object.prototype.toString()方法返回瞭如下格式的字元串:[object 數據類型]

識別

  【1】可以識別標準類型及內置對象類型

  【2】不能識別自定義類型

console.log(Object.prototype.toString.call("jerry"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]

console.log(Object.prototype.toString.call(function(){}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
function Person(){};
console.log(Object.prototype.toString.call(new Person));//[object Object]

  可以將Object.prototype.toString()方法封裝成一個類型識別方法

function type(obj){
    return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}
console.log(type("jerry"));//"string"
console.log(type(12));//"number"
console.log(type(true));//"boolean"
console.log(type(undefined));//"undefined"
console.log(type(null));//"null"
console.log(type({name: "jerry"}));//"object"

console.log(type(function(){}));//"function"
console.log(type([]));//"array"
console.log(type(new Date));//"date"
console.log(type(/\d/));//"regexp"
function Person(){};
console.log(type(new Person));//"object"

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

-Advertisement-
Play Games
更多相關文章
  • 1. 三個關於浮動的概念 不浮動float:none; 清除周圍的浮動元素 float:both 這是清除浮動的本意 清除子元素浮動對父元素的影響 clearfix 很多人都理解成這個叫清除浮動。。 2. 什麼是清除浮動 清除浮動不是把當前標簽的浮動給清除了,如果這樣,還加浮動做什麼 其實清除浮動指 ...
  • 1.font合寫 font: font-style font-variant font-weight font-size/line-height font-family font: 風格 變形 加粗 字型大小/行高 字體系列 風格 變形 加粗 可以按照任意順序書寫 如果是normal可以不寫 變形 fo ...
  • kbd :即Keyboard Input Element(鍵盤輸入元素)。表示鍵盤按鍵的語義元素,常用於網頁上對快捷鍵、按鍵說明的場景。 ...
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } height: 100%; } body{ posit ...
  • 一. 不動,區域內的變化(本質生產一張圖片) /*漸變 1 長方形之漸變先定義長方形的寬高大小(好觀察最好加邊框) /*方向 顏色 位置*/ 利用 background-image: -webkit-linear-gradient(right top,red 50% ,blue 50%); 2 大圓 ...
  • 這個系列的第一部分介紹了Javascript模塊的基本寫法,今天介紹如何規範地使用模塊。 (接上文) 七、模塊的規範 先想一想,為什麼模塊很重要? 因為有了模塊,我們就可以更方便地使用別人的代碼,想要什麼功能,就載入什麼模塊。 但是,這樣做有一個前提,那就是大家必須以同樣的方式編寫模塊,否則你有你的 ...
  • 隨著網站逐漸變成"互聯網應用程式",嵌入網頁的Javascript代碼越來越龐大,越來越複雜。 網頁越來越像桌面程式,需要一個團隊分工協作、進度管理、單元測試等等......開發者不得不使用軟體工程的方法,管理網頁的業務邏輯。 Javascript模塊化編程,已經成為一個迫切的需求。理想情況下,開發 ...
  • 1. 說明 Angular2的模板用來顯示組件外觀,作為視圖所用,用法和html語法基本一致,最簡單的Angular2的模板就是一段html代碼。Angular模板語法主要包括以下幾個部分: l 直接綁定 l 插值表達 l 屬性綁定 l 事件綁定 l 雙向綁定 l 樣式綁定 l 模板和 * l 局部 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...