JavaScript中数据类型的检测方法及其特点

JS中数据类型的检测方法及其特点

检测数据类型的方法:typeof、instanceof、constructor、Objec.prototype.toString,下面我们分别来讲讲这些方法的异同以及什么情况下使用什么方法。

1.typeof

介绍:用来检测数据类型,但是只能准确检测基本数据类型。

返回的结果:number、boolean、string、object(Array等引用类型)undefined、function。 在检测null的时候也会返回object,这是由于JavaScript最初设计的时候出现的一个bug。

在JavaScript最初的实现中,JavaScript中的值是由一个表示类型的标签和实际数据值表示的。对象类型标签是0。由于null代表的是空指针(大多数平台下值为0x00),因此,null的类型标签也成了0,typeof null就错误的返回了"object"

js 复制代码
(以下例子的结果都为true)
// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写
typeof Number(1) === 'number'; // 但不要使用这种形式!

// Strings
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof总是返回一个字符串
typeof String("abc") === 'string'; // 但不要使用这种形式!

// Booleans
typeof true === 'boolean';
typeof false === 'boolean';
typeof Boolean(true) === 'boolean'; // 但不要使用这种形式!

// Symbols
typeof Symbol() === 'symbol';
typeof Symbol('foo') === 'symbol';
typeof Symbol.iterator === 'symbol';

// Undefined
typeof undefined === 'undefined';

// Objects
typeof {a:1} === 'object';

// 使用Array.isArray 或者 Object.prototype.toString.call
// 区分数组,普通对象
typeof [1, 2, 4] === 'object';

typeof new Date() === 'object';

// 下面的容易令人迷惑,不建议使用
typeof new Boolean(true) === 'object';
typeof new Number(1) === 'object';
typeof new String("abc") === 'object';

// 函数
typeof function(){} === 'function';
typeof class C{} === 'function'
typeof new Function() === 'function';

2.instanceof

介绍:用于测试构造函数的prototype属性出现在对象的原型链中的任何位置。可以用于检测某个对象是否为另一个对象的实例,但是无法检测基本数据类型的值。

js 复制代码
let num = 123;
num instanceof Number // false

let str = "test"
str instanceof String // false

str = new String
str instanceof String // true

3.constructor

介绍:用来查看对象的数据类型。

构造函数.constructor.prototype = 数据类型

js 复制代码
let number = 123
number.constructor === Number // true
let str = "123"
str.constructor === String // true

注意:

1.undefined和null是不能够判断出类型的,并且会报错。因为null和undefined是无效的对象 2.使用constructor是不保险的,因为constructor属性是可以被修改的,会导致检测出的结果不正确

js 复制代码
let nul = null;
nul.constructor == Object //报错
let und = undefined;
und.constructor == Object //报错
function test() {}
test.constructor === Function // true
test.constructor === String // false
test.constructor = String 
test.constructor === Function // false
test.constructor === String // true

4.Object.prototype.toString.call(实例)

介绍:找到Object原型上的toString方法,让方法执行,并且让方法中的this变指向实例(实例就是我们要检测数据类型的值)

Object.prototype.toString判断对象值属于哪种内置属性,他返回一个JSON字符串--"Object 数据类型"(可以判断所有的数据类型)

js 复制代码
示例:
let nul = null;
Object.prototype.toString.call(nul) //[object Null]
let und = undefined;
Object.prototype.toString.call(und) //[object Undefined]
let error = new Error();
Object.prototype.toString.call(error) //[object Error]

总结

从上面的学习之中我们可以知道,一般js在检测数据类型时可以使用typeof和instanceof的组合或单独使用Object.prototype.toString.call,由于constructor的不确定性,所以不建议使用。

typeof instanceof constructor Object.prototype.toString.call
能准确检测基础类型 能够准确检测引用类型 能准确检测大部分类型(null和undefined无法检测) 能检测所有类型
使用简单 使用简单 使用较复杂,有伪造风险 使用较复杂
无法准确检测引用类型和null 无法准确检测基础类型 constructor易被修改 IE6下,undefined和null均为Object
相关推荐
云水一下6 小时前
Vue.js从零到精通系列(一):初识Vue——背景、环境与第一个应用
前端·javascript·vue.js
大大杰哥6 小时前
Vue2学习(1)--了解基本方法与概念
javascript·学习·vue
云水一下7 小时前
Vue.js从零到精通系列(二):响应式核心——ref、reactive、computed与watch
前端·javascript·vue.js
卡布鲁7 小时前
Webpack 核心原理与自定义 Loader/Plugin 实战
前端·javascript
小林ixn7 小时前
从拼多多手机号验证到模板引擎:深入正则表达式与 JS 字符串处理
开发语言·javascript·正则表达式
智码看视界7 小时前
Web Storage 的无障碍实践与工程化应用
前端·javascript·web
半个烧饼不加肉8 小时前
JS 底层探究-- 普通函数和构造函数
开发语言·javascript·原型模式
meilindehuzi_a8 小时前
透视 V8 底部:从物理内存到函数式哲学,重新解构 JavaScript 数组
开发语言·javascript·ecmascript
粉末的沉淀8 小时前
vue:Vite项目中高效管理纯色SVG图标的方案
前端·javascript·vue.js
FlyWIHTSKY8 小时前
JavaScript 和 TypeScript 分别是什么,可以相互写吗
javascript·ubuntu·typescript