javascript基礎篇:JS中的數據類型檢測專題

Honwhy 發布于2019-08-23 15:44 / 3187人閱讀

摘要：用來檢測數據類型的運算符語法雖然是基本數據類型值，但是它屬于空對象指針，檢測的結果是對象使用有自己的局限性，不能具體細分當前的值是數組還是正則也就是不能細分對象類型的值先算檢測某一個實例是否屬于某各類的實例構造函數使用檢測某個值是否屬于某

typeof

用來檢測數據類型的運算符
語法:typeof[value]

typeof 12 //=>"number"
typeof NaN //=>"number"
typeof ""=>"string"
var flag=true;
typeof flag //"boolen"
tpeof undefined //=>"undefined"
function fn(n,m){
    if(typeof n==="undefined"){

    }
}
typeof null //=>"object" //雖然是基本數據類型值，但是它屬于空對象指針，檢測的結果是對象
typeof {} //=>"object" 
typeof function(){} //=>"function"
typeof [] //=>"object"
typeof /^$/ //=>"object"
//使用typeof有自己的局限性，不能具體細分當前的值是數組還是正則(也就是不能細分對象類型的值)
typeof (1>1?0:2) //=>"number"
typeof 1>1?0:2 //=>先算typeof 1-> "number"=> "number">1?0:2
typeof typeof [] //=>"string"
//=>typeof [] "object" 
//type of "object" =>"string"

instanceof & constructor

instanceof : 檢測某一個實例是否屬于某各類的實例
constructor : 構造函數

使用instanceof 檢測某個值是否屬于某一個數據類型的內置類，從而檢測出它是否是這個類型的值；使用instanceof可以實現typeof實現不了的，對對象類型值詳細的區分檢測;

[] instanceof Array //=>true
[] instanceof RegExp //=>false

使用instanceof檢測也有自己的弊端：
1.基本類型值無法基于它的檢測

var num =12;
num.toFixed(2) =>"12.00" //12是Number類的一個實例,可以調取Number.prototype上的方法，但是它是基本類型值

var num2=new Number(12);
num2.toFixed(2) =>"12.00" 
typeof num //=>"number"
typeof num2//=>"object"
//不管是哪一種方式創建基本類型值，都是自己所屬類的實例（只不過類型不一樣而已）
num instanceof Number //=>false
num2 instanceof Number //=>true

2.instanceof 檢測的原理是基于原型鏈檢測的：只要當前類在實例的原型鏈上，最后返回的結果都是true.

var ary=[];
ary instanceof Array //=>true
ary instanceof Object //=>true

function Fn(){}
Fn.prototype=new Array();//=>原型繼承（Fn 是Array的子類）
var f=new Fn();
f instanceof Array //=>true 但是f其實不是數組，雖然在它的原型上可以找到數組，但是它不具備數組的基礎結構，這也是instanceof的弊端

constructor

獲取當前檢測數據值的constructor,判斷它是否是某一個數據類型內置類來檢測

var ary=[];
ary.constructor===Array //=>true
ary.constructor===RegExp //=>false
ary.constructor===Object //=>false

ary.constructor="AA"
ary.constructor===Array; //false
//=>constructor檢測數據類型非常不可靠，因為這個屬性是經常容易被修改的。

Object.prototype.toString.call

獲取Object.prototype上的toString方法，讓方法中的this變為需要檢測的數據類型值，并且讓方法執行

在Number、String、Boolean、Array、Function、RexExp...這些類的原型上都有一個toString方法：這個方法就是將自身的值轉換為字符串的

(12).toString() //=>"12"
(true).toString() //=>"true"
[12,23].toString() //=>"12,23"
...

在Object這個類的原型上也有一個方法toString，但是這個方法并不是把值轉換為字符串，而是返回當前值的所屬類詳細信息[object 所屬的類]

var obj={name:"tom"}
obj.toString() //=>"[object Object]" 調取的是Object.prototype.toString 

/*
*obj.toString()
*  首先執行Object.prototype.toString 方法
*  這個方法的this就是我們操作的數據值obj
*  =>總結：Object.prototype.toString執行的時候會返回當前方法中的this的所屬類信息
*
*  也就是，我們想知道誰是所屬類信息，我們就把這個toString方法執行，并且讓this變為我們檢測的這個數據值，那么方法返回的結果就是當前檢測這個值的所屬類信息
*  Object.prototype.toString.call([value])
*  ({}).toString.call([value])
*  */

Object.prototype.toString.call(12) //=>"[object Number]"
Object.prototype.toString.call(true) //=>"[object Boolean]"
Object.prototype.toString.call("") //=>"[object String]"
Object.prototype.toString.call({}) //=>"[object Object]"
Object.prototype.toString.call(null) //=>"[object Null]"
Object.prototype.toString.call([]) //=>"[object Array]"
Object.prototype.toString.call(/^$/) //=>"[object RegExp]"
Object.prototype.toString.call(function(){}) //=>"[object Function]"

使用toString檢測數據類型，不管你是什么類型值，都可以正常檢測出需要的結果(這個方法檢測是萬能的)

alert({name:"tom"})  //[object Object] alert()=>轉換為字符串彈出 
//如果彈對象字符串 alert(JSON.stringify({name:"tom"}))

檢測數據類型方法封裝

~function(){
    let obj={
        isNumber:"Number",
        isString:"String",
        isBoolean:"Boolean",
        isNull:"Null",
        isUndefined:"Undefined",
        isPlanObject:"Object",
        isArray:"Array",
        isRegExp:"RegExp",
        isFunction:"Function"
    }
    let check={};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            check[key]=(function(classValue){
                return function(val){
                    return new RegExp("[object "+classValue+"]").test(Object.prototype.toString.call(val))
                }
            })(obj[key])
        }
    }
    window.check=check;
}()

GPU云服務器云服務器 js 檢測數據類型 js中的數據類型 js檢測數據類型 js中的object數據類型

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

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

JavaScript專題系列文章

摘要：專題系列共計篇，主要研究日常開發中一些功能點的實現，比如防抖節流去重類型判斷拷貝最值扁平柯里遞歸亂序排序等，特點是研究專題之函數組合專題系列第十六篇，講解函數組合，并且使用柯里化和函數組合實現模式需求我們需要寫一個函數，輸入，返回。 JavaScript 專題之從零實現 jQuery 的 extend JavaScritp 專題系列第七篇，講解如何從零實現一個 jQuery 的 ext...

Maxiye 2019-08-21 17:57 評論0 收藏0
深入理解js

摘要：詳解十大常用設計模式力薦深度好文深入理解大設計模式收集各種疑難雜癥的問題集錦關于，工作和學習過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內存管理。延遲加載 (Lazyload) 三種實現方式延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細介紹了三種延遲加載的實現方式。詳解 Javascript十大常用設計模式力薦~ ...

caikeal 2019-08-26 11:39 評論0 收藏0
JS專題之數據類型和類型檢測

摘要：運算符可以用來檢測某個構造函數的屬性是否存在于另外一個要檢測對象的原型鏈上。使用方法可以獲取到變量的準確的數據類型就能解決基本包裝類型的檢測錯誤和的檢測不安全。本文共 1750 字，讀完只需 7 分鐘數據類型有哪些？ ECMAScript 的數據類型分為簡單數據類型（也被稱為基本數據類型，原始數據類型）： Undefined Null String Number Boolean ...

since1986 2019-08-23 14:05 評論0 收藏0
JavaScript專題之類型判斷(上)

摘要：專題系列第四篇，講解類型判斷的各種方法，并且跟著寫一個函數。返回值為表示操作數類型的一個字符串。考慮到實際情況下并不會檢測和，所以去掉這兩個類型的檢測。 JavaScript專題系列第四篇，講解類型判斷的各種方法，并且跟著 jQuery 寫一個 type 函數。前言類型判斷在 web 開發中有非常廣泛的應用，簡單的有判斷數字還是字符串，進階一點的有判斷數組還是對象，再進階一點的有判...

lk20150415 2019-08-20 17:34 評論0 收藏0
深入理解JavaScript

摘要：深入之繼承的多種方式和優缺點深入系列第十五篇，講解各種繼承方式和優缺點。對于解釋型語言例如來說，通過詞法分析語法分析語法樹，就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優缺點。寫在前面本文講解JavaScript各種繼承方式和優缺點。但是注意：這篇文章更像是筆記，哎，再讓我...

myeveryheart 2019-08-22 13:46 評論0 收藏0