文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript 如何完美地检查数据类型

2024-12-01 17:25

关注

本篇将介绍使用Object.prototype.toString如何完美解决此问题。首先我们来看看typeof 和 instanceof的缺点。

typeof操作符

typeof操作符可能是首先想到的。 它适用于number, string, undefined, boolean, symbol, function,但在使用typeof时有一些陷阱需要注意:

1、typeof null === 'object' 是一个已知的错误。 null不应该是object类型。

2、它除了function,无法区分普通对象和其他内置对象,如下示例。

typeof []; // 'object'typeof {}; // 'object'typeof new Date(); // 'object'typeof /foo/; // 'object'

instanceof操作符

instanceof操作符通过检查对象的构造函数,来确定它是什么类型的,如下示例。

let Car = function () {};let benz = new Car();benz instanceof Car; // true

因此,instaceof虽然可以正确地确定对象的类型,但不能确定基本类型,如下示例。

[] instanceof Array // ✅ true(() => {}) instanceof Function; // ✅ truenew Map() instanceof Map; // ✅ true1 instanceof Number; // ❌ false'foo' instanceof String; // ❌ false

另外,由于instanceof是通过检查对象的构造函数判断类型的,如果你在运行时修改了对象的原型,instanceof检查的结果可能会改变:

const array = [];array instanceof Array; // ✅ trueObject.setPrototypeOf(array, null);array instanceof Array; // ❌ false

正如您所看到的,typeof和instanceof都不是完美的,大多数时候人们必须同时结合这两种方法来进行类型检查。

Object.prototype.toString方法

事实证明,在JavaScript中还有第三种更好的检查数据类型的方法——Object.prototype.toString。

它是Object.prototype上的一个方法,结果返回一个用于描述对象的字符串值,如下示例:

Object.prototype.toString.call({}); // "[object Object]"Object.prototype.toString.call(1); // "[object Number]"Object.prototype.toString.call('1'); // "[object String]"Object.prototype.toString.call(true); // "[object Boolean]"Object.prototype.toString.call(new String('string')); // "[object String]"Object.prototype.toString.call(function () {}); // "[object Function]"Object.prototype.toString.call(null); //"[object Null]"Object.prototype.toString.call(undefined); //"[object Undefined]"Object.prototype.toString.call(/123/g); //"[object RegExp]"Object.prototype.toString.call(new Date()); //"[object Date]"Object.prototype.toString.call([]); //"[object Array]"Object.prototype.toString.call(document); //"[object HTMLDocument]"Object.prototype.toString.call(window); //"[object Window]

可以使用regexp对其返回的字符串进行一些处理,封装一个通用的方法,适用于所有类型:

function getType(obj) {  const lowerCaseTheFirstLetter = (str) => str[0].toLowerCase() + str.slice(1);  // 如果是基本数据类型,直接使用typeOf操作符  const type = typeof obj;  if (type !== 'object') {  return type;  }  // 对对象类型使用 Object.prototype.toString 方法  return lowerCaseTheFirstLetter(  Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1')  );}getType([]); // "array"getType('123'); // "string"getType(null); // "null"getType(undefined); // "undefined"getType(); // "undefined"getType(function () {}); // "function"getType(/123/g); // "regExp"getType(new Date()); // "date"getType(new Map()); // "map"getType(new Set()); // "set"

通过 Object.prototype.toString 就能够适用于所有数据类型的检查。这也是大部分框架、库中常用的方法。


来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯