LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

别再被坑了! javascript类型检测的最佳实践

freeflydom
2024年8月17日 19:55 本文热度 585

在 JavaScript 中,我们经常需要判断一个变量的类型。这个需求在编程中非常常见,因为不同类型的数据会影响到我们的代码逻辑。

JavaScript 提供了几种方法来检测数据类型,每种方法都有自己的优缺点。

Object.prototype.toString.call()

这是最万能的方法。它可以准确识别所有的 JavaScript 内置类型,包括基本类型和复杂类型。不管你给它传什么数据,它都能给出一个统一格式的字符串,告诉你这个数据到底是什么类型。

它的原理是调用对象内部的 [[Class]] 属性。这个属性是只读的,不能被改写,所以非常可靠。

优点:

  • 识别范围广,基本类型和复杂类型都能识别

  • 不会受到对象自身的 toString() 方法的影响

  • 返回结果格式统一,方便解析

缺点:

  • 写起来比较啰嗦

  • 如果是自定义类型,只能得到 [object Object],不能进一步区分类型

function detectType(data) {

    return Object.prototype.toString.call(data).slice(8, -1).toLowerCase();

}


console.log(detectType(123)); // 'number'

console.log(detectType('abc')); // 'string'

console.log(detectType(true)); // 'boolean'

console.log(detectType(null)); // 'null'

console.log(detectType(undefined)); // 'undefined'

console.log(detectType([])); // 'array'

console.log(detectType({})); // 'object'

console.log(detectType(function () {})); // 'function'

console.log(detectType(new Date())); // 'date'

console.log(detectType(new RegExp())); // 'regexp'

console.log(detectType(new Error())); // 'error'


typeof

这个运算符最常用,写起来简单。它可以识别基本类型和函数,但对复杂类型的识别能力有限。

优点:

  • 使用简单

  • 可以识别基本类型和函数

缺点:

  • 无法区分数组和普通对象

  • typeof null 的结果是 'object'

  • 无法识别内置对象类型,如 DateRegExp 等

console.log(typeof 123); // 'number'

console.log(typeof 'abc'); // 'string'

console.log(typeof true); // 'boolean'

console.log(typeof undefined); // 'undefined'

console.log(typeof null); // 'object' (这是一个历史遗留的 bug)

console.log(typeof []); // 'object'

console.log(typeof {}); // 'object'

console.log(typeof function () {}); // 'function'


instanceof

instanceof 运算符用于测试构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。

优点:

  • 可以检查对象是否属于特定的类或构造函数

缺点:

  • 只能检查对象类型,不能检查基本类型

  • 要识别多种类型,需要多次调用

console.log([] instanceof Array); // true

console.log({} instanceof Object); // true

console.log(function () {} instanceof Function); // true

console.log(new Date() instanceof Date); // true

console.log(new RegExp() instanceof RegExp); // true

console.log(new Error() instanceof Error); // true


console.log(123 instanceof Number); // false

console.log('abc' instanceof String); // false

console.log(true instanceof Boolean); // false


constructor

constructor 是对象的一个属性,指向创建该对象的构造函数。可以用它来判断对象的类型。

优点:

  • 可以识别大多数对象类型,包括自定义类型

缺点:

  • 如果对象的 constructor 属性被修改,会得到错误结果

  • null 和 undefined 没有 constructor 属性

console.log((123).constructor === Number); // true

console.log('abc'.constructor === String); // true

console.log(true.constructor === Boolean); // true

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

console.log({}.constructor === Object); // true

console.log(function () {}.constructor === Function); // true

console.log(new Date().constructor === Date); // true

console.log(new RegExp().constructor === RegExp); // true

console.log(new Error().constructor === Error); // true


总结

如果需要全面准确的类型识别,Object.prototype.toString.call() 是最佳选择。
如果只需要简单区分基本类型,typeof 就足够了。
如果要检查对象是否属于特定类型,可以用 instanceof

转自https://www.cnblogs.com/leadingcode/p/18362986


该文章在 2024/8/19 8:53:41 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved