javascript基础篇:JS中的数据类型检测专题

Honwhy 发布于2019-08-23 15:44 / 3168人阅读

摘要：用来检测数据类型的运算符语法虽然是基本数据类型值，但是它属于空对象指针，检测的结果是对象使用有自己的局限性，不能具体细分当前的值是数组还是正则也就是不能细分对象类型的值先算检测某一个实例是否属于某各类的实例构造函数使用检测某个值是否属于某

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数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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