原生JS-----论数据类型检测

常见的数据类型检测的方法:

一、最为基础的typeof

二、不可不知的instanceof

三、比instanceof更好的constructor

四、检测值或者表达式的结果是否为NaN

五、易用的jQuery函数isArray,isFunction

六、高大上的原型方法Object.prototype.toString



typeof基本数据类型的检测:

语法:typeof  被检测的内容  或者 typeof(要检测的内容)

范例:

<script>
    var num=2;
    console.log(typeof num);//string
</script>

基本解析:

  typeof是一个运算符,针对一个操作数(操作数可以是变量也可以是常量)进行运算,其返回值是一个字符串,返回值包括"number","string","boolean","undefined","object","function".

<script>
    var user;
var obj={
        user:‘‘HTML5学堂"
    }
    var h5course=function(){
         console.log("码农");
    };
     console.log(tyopeof 234);
     console.log(tyopeof "html5");
     console.log(tyopeof true);
     console.log(tyopeof user);
     console.log(tyopeof obj);
     console.log(tyopeof h5course);
</script>

typeof的局限性:

  typeof的问题在于:针对对象类型数据,无法进行具体细化的检测。对于数组、正则、对象{}、null等数据,虽然均属于对象类型,但却各不相同,使用typeof进行检测时,均返回object

<script>
     console.log(tyopeof null);
     console.log(tyopeof {user:"html5"});
     console.log(tyopeoft [4,5]);
     console.log(tyopeof /\d{3}/);
</script>

不可不知的instanceof:

面对typeof的类型检测缺陷,可以使用instanceof来弥补

语法:要检测的内容 instanceof 类型

范例:

<script>
     console.log([4,5] instanceof Array);//true
     console.log(/\d{3}/  instanceof RegExp);//true
</script>

基本解析:

  instanceof能够用于数据类型的检测,但是仅限于引用数据类型,无法检测基本数据类型的值;检测的返回值内容是布尔值。此外,会受到原型链的影响,只要是在原型链上,返回值都是true

instanceof的局限性:

  局限一:不能够检测以“字面量”方式出现的基本数据类型

<script>
    var str=‘‘HTML5学堂";
    var str2=new String("码农");
     console.log(str instanceof String);//false
     console.log(str2 instanceof String);//true
</script>

  代码解析:str是使用字面量的方式创建的字符串,而str2是使用String对象实例化的字符串,检测str时返回值是false,而检测str2时返回值是true;

  局限性二:会检测该类所归属的原型链,只要在原型链当中能够找到,检测结果均为true,检测结果有可能会出现问题

<script>
    //范例一
    var str=new String("码农");
     console.log(str instanceof String);//true
     console.log(str instanceof Object);//true
    //范例二:
    var box=document.getElementsByTagName("body");
    console.log(box[0] instanceof HTMLBodyElement);
    console.log(box[0] instanceof Node);
    console.log(box[0] instanceof Object);
    //范例三
    var arr=[‘htnl5‘,‘码农‘];
    console.log(arr  instanceof Array);
    console.log(arr instanceof Object);
</script>

  代码解析:

    在此处如果不是很了解原型链可以换个角度来理解,例如:数组隶属于对象,对于这种归属,检测也是成功的

    范例一中的字符串,的确属于string类型,但是他是通过String构造函数实例化得到的,String本身是一个字符串对象,所以str也符合Object这个条件

    范例二中的body标签本身是一个对象,细化一些说是一个节点对象,在细化说一个body元素,所以三种检测均为true,范例三中的数组同理(数组属于对象的一个分类)

比instanceof更好的constructor:

  语法:要检测的内容.constructor===类型

  范例:

<script>
    console.log([4,5].constructor=== Array);
    console.log(/\d{3}/.constructor===RegExp);
    console.log(‘html5‘.constructor===String);
    var num=234;
    console.log(num.constructor===Number);
</script>

  基本解析;

    constructor是对象的一个属性,不是运算符,constructor属性指向对象的构造函数。

    constuctor的作用与instanceof基本类似,但是对instanceof的两个缺陷均进行了弥补,也就是说:既能够检测基本数据类型,又不受原型链的影响。

<script>
    //范例一
    var box=document.getElementsByTagName("body");
    console.log(box[0].constructor=== HTMLBodyElement);//true
    console.log(box[0].constructor=== Node);//false
    console.log(box[0].constructor=== Object);//false
    //范例二
    var arr=[‘htnl5‘,‘码农‘];
    console.log(arr.constructor=== Array);//true
    console.log(arr.constructor===Object);//false
</script>

  constructor的局限性:

    对于自己创建的构造函数,constructor的局限性会比较大,当然这里不是我主要想说的东西,constructor属性是异变的,可以进行定义,所以并不能够保证他指向相应的构造函数。但是,对于系统的各类构造函数来说,还是可以正常使用的,毕竟我们平日里并不会去修改系统默认对象的constructor的指向

<script>
    function Me(){}
    var demo=new Me();
    console.log(demo.constructor);
    //此处检测的结果是:constructor指向构造函数Me,但是我们却可以人工修改指向,比如修改为Peo;
    function Peo(){}
    demo.constructor=Peo;
    console.log(demo.constructor);
    //此处检测的结果就变成了Peo
</script>

  相关说明:

    如果希望了解instanceof和constructor的基本原理,需要掌握原型,了解构造函数的内在机制。

检测值或者表达式的结果是否为NaN:

  isNaN函数:

    isNaN用于检测值或者表达式“转化为数字”时,是否为NaN,是NaN,结果为false,不是NaN结果为true。可以用于辅助parseFloat()和parseInt()进行进一步的结果检测

<script>
    console.log(isNaN(NaN));//false
    console.log(isNaN(234));//false
    console.log(isNaN("89"));//true
</script>

易用的jQuery函数---isArray、isFunction等:

  jQuery中提供了大量的数据类型的检测方法,可以检测数据属于那种具体的对象类型,此处就不做解释了,在JQ的API文档中都可以查得到

Object.prototype.toString.call():

  语法与范例

<script>
    console.log(Object.prototype.toString.call(236));//[object Number]
   console.log(Object.prototype.toString.call(null));//[object Null]
   console.log(Object.prototype.toString.call(true));//[object Boolean]
   console.log(Object.prototype.toString.call("码农"));//[object String]
   console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
   console.log(Object.prototype.toString.call([4,5]));//[object Array]
</script>

  基本解析:

    Object.prototype.toString比较常用于判断对象值属于那种内置属性,返回值类型为字符串,返回的字符串格式为:“[object 数据类型]”.由于许多引用类型都重写了Object继承来的toString方法,所以通常使用call/apply方法,借用Object.prototype.toString函数来判断数据类型

    每一种数据类型所属的类的原型上都有toString方法,例如:Number.prototype,String.prototype,Array.prototype等等。除了Object上的toString之外,其他原型上的toString都用于将数值转化为字符串

  Plus:

    可以借助字符串截取的方法,获取Object.prototype.toString的结果,并进行处理,从而得到"Number","null"等数据类型字符串,从而更方便进行数据类型比较/检测。

<script>
       var demo="测试用的数据";
       var type=Object.prototype.toString.call(demo).slice(8,-|);
      //slice(8,-|)表示从第八个字符开始截取,到倒数第一个字符之间的部分,不包括倒数第一个字符
   console.log(type);//String
</script>
时间: 2024-11-02 12:47:45

原生JS-----论数据类型检测的相关文章

蓝鸥原生JS:js的引入方式及js的基本数据类型

蓝鸥原生JS:js的引入方式及js的基本数据类型 蓝鸥零基础学习HTML5-html+css基础 http://11824614.blog.51cto.com/11814614/1852769 js的引入方式 在一对 script 标签中引入js代码 通过这种方式引入,可以把js代码和html代码写在同一个文件中,但是注意:最好把js代码写在body之后,文档的加载顺序是从上到下加载的,先把页面内容渲染出来,再加入用户交互,这样用户体验会大大加强. 示例代码: <html lang="en

JS中数据类型及原生对象简介

js是一种专门设计用来给网页增加交互性的编程语言,它的技术体系包含了一下几个方面: 1.JavaScript核心语言定义:包括数据类型,变量,常量,运算符,语句等. 2.原生对象和内置对象 3.浏览器对象BOM 4.文档对象类型DOM 5.事件处理模型 将js添加到文档中的方法有三种: 1.内嵌式 2.将js源文件通过<script>元素的src属性连接到XHTML文档中 3.脚本包含在XHTML事件处理属性中,例如onclick js的数据类型分为原始数据类型和引用数据类型: 一.原始数据类

js 数据类型检测

提起数据类型检测  大多数人首先想起的应该是  typeof 'xxx' == '数据类型' 坦然这种方法对于基本数据类型的检测还是非常方便的,但是当遇到引用数据类型 Object时却爱莫能助,下面就来讲讲这些数据类型的检测方法吧 1.使用typeof方法 首先我们来看看下面的示例将会在控制台打印出什么 //检测方法 //输出类型 typeof function(){} ====> ‘function’ typeof "" ====> 'string' typeof 545

JS基础(JavaScript三大特点、基本数据类型检测、逻辑运算符的短路运算、几大循环结构的特点)

JavaScript的三大特点 1.js是单线程语言,浏览器只分配给js一个主线程,用来执行任务(函数) 2.JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. 3.数据类型可以被忽略的语言.一个变量可以赋不同数据类型的值. JavaScript基本数据类型检测 关键字  typeof(变量名或者数据) 用来检测数据类型 typeof对于的值只有六个,分别是: string.number.boolean.object.undefined.functio

【第2章第300回】原生JS与jQuery对AJAX的实现

一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).AJAX 不是新的编程语言,而是一种使用现有标准的新方法.AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 就是利用JS来无刷新与后端交互,通过get和post方式把数据发送到后端,或者请求后端的数据,然后根据请求的数据进行改变DOM节点等操作,从而取消掉用form的submit方式一提交就会跳转页面的情况

JavaScript数据类型检测

一.JavaScript 数据类型 1.基本数据类型(6种) Undefined Null Boolean Number String Symbol (ES6新增) 2.引用数据类型: Object 二.数据类型检测 1. typeof 可以检测除null 外的基本类型.null 和所有对象的typeof都是"object", 不能用于检测用户自定义类型. 比如Date, RegExp, Array, DOM Element的类型都是"object". var s

常用原生JS兼容写法

在我们前端开发中,经常会遇到兼容性的问题,因为要考虑用户会使用不同的浏览器来访问你的页面,你要保证你做的网页在任何一个浏览器中都能正常的运行,下面我就举几个常用原生JS的兼容写法: 1:添加事件方法 addHandler:function(element,type,handler){  if(element.addEventListener){//检测是否为DOM2级方法   element.addEventListener(type, handler, false);  }else if (e

原生JS编写图片切换效果和点击按钮的样式变化

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.

JS的数据类型

JS的数据类型大致分为两大块: 1.基本类型 2.引用类型 基本类型分为:number bolean string undefined null 引用类型分为:原生对象 内置对象 宿主对象