js学习总结_基于数据类型检测的四种方式(必看)


Posted in Javascript onJuly 04, 2017

1、typeof 用来检测数据类型的运算符 

console.log(typeof 12)//Number

使用typeof检测数据类型,首先返回的都是字符串 ,其次字符串中包含了对应的数据类型

例如:"number"、"string"、"boolean"、"undefined"、"function"、"object"

console.log(typeof typeof function(){}) //string

局限性:

typeof null -> "object"

不能具体的细分是数组还是正则,还是对象中其他的值,因为使用typeof检测数据类型,对于对象数据类型中的值,最后返回的结果都是"object"

2、instanceof 检测某一个实例是否属于某个类

var obj = [12,23];
    console.log(obj instanceof Array);

局限性:

对于基本数据类型来说,字面量方式创建出来的结果和实例方式创建出来的结果是有一定的区别的。从严格意义上讲,只有实例创建出来的结果才是标准的对象数据类型值,也是标准的Number这个类的一个实例;对于字面量方式创建出来的结果是基本的数据类型值,不是严谨的实例,但是由于JS的松散特点,导致了可以使用Number.prototype上的方法

1)、不能用来检测和处理字面量方式创建出来的基本数据类型值

console.log(1 instanceof Number);//false
console.log(new Number(1) instanceof Number)//true

2)、instanceof的特性:只要在当前实例的原型链上,我们用其检测的结果都为true

var ary = [];
    console.log(ary instanceof Array);//true
    console.log(ary instanceof Object);//true

    function fn(){

    }
    console.log(fn instanceof Function);//true
    console.log(fn instanceof Object);//true

3、constructor 构造函数 作用和instanceof非常的相似  constructor可以处理基本数据类型的检测

constructor检测Object和instanceof不一样 一般情况下是检测不了的

var obj = [];
    console.log(obj.constructor === Array)//true

    var num = 1;
    console.log(num.constructor === Number)//true

局限性:我们可以把类的原型进行重写,在重写的过程中很有可能出现把之前的constructor给覆盖掉了,这样检测出来的结果就不准确了。

对于特殊的数据类型null和undefined,他们所属的类是Null和Undefined,但是浏览器把这两个类保护起来了,不允许我们在外面访问使用

4、Object.prototype.toString.call() 最准确最常用的方式 各种类型的都可以检测(基本和引用)

首先获取Object原型上的toString方法,让方法执行,并且改变方法中的this关键字的指向

toString的理解:

表面上看应该是转化成字符串,但是某些toString方法不仅仅是转换为字符串

对于Number、String、Boolean、Array、RegExp、Date、Function原型上的toString方法都是把当前的数据类型转化为字符串的类型(他们的作用仅仅是用来转换为字符串的)

Object.prototype.toString()并不是用来转化为字符串的,他的作用是返回当前方法执行主体(方法中的this)所属类的详细信息。

({name:"李四"}).toString() //[object object]
    Math.toString()//[object Math]
({name:"李四"}).toString() //[object object]
    Math.toString()//[object Math]

    var obj = {name:"张三"};
    console.log(obj.toString())//toString中的this是obj,返回的是obj所属的类的信息。[object Object] 第一个object代表当前实例是对象数据类型的(这个是固定的),第二个Object代表的是obj所属的类是Object

console.log((1).toString()) // "1" Number.prototype.toString转化为字符串

console.log((128).toString(2/8/10)) 把数字转化为2进制、8进制、10进制

所以上面的方法的检测如下 

var ary = [];
    console.log(Object.prototype.toString.call(ary))//[object Array]

以上这篇js学习总结_基于数据类型检测的四种方式(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
javascript实用方法总结
Feb 06 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
vue项目实战总结篇
Feb 11 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
小程序自定义轮播图圆点组件
Jun 25 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 #Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 #Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 #Javascript
JS全角与半角转化实例(分享)
Jul 04 #Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 #Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 #Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 #Javascript
You might like
网友原创的PHP模板类代码
2008/09/07 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
Javascript引用指针使用介绍
2012/11/07 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
简单的三步vuex入门
2018/05/20 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
python 深度学习中的4种激活函数
2020/09/18 Python
德国购买门票网站:ADticket.de
2019/10/31 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
党支部先进事迹材料
2014/12/24 职场文书
丽江古城导游词
2015/02/03 职场文书
电力培训学习心得体会
2016/01/11 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
Nginx 匹配方式
2022/05/15 Servers
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS