脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS数据类型检查校验

javaScript中一些常见的数据类型检查校验

 更新时间：2022年05月06日 11:22:02   作者：程序猿布欧  
最近在面试的时候又被问到JS中检查校验数据类型的方法,所以这篇文章主要给大家介绍了关于javaScript中一些常见的数据类型检查校验的相关资料,需要的朋友可以参考下

前言

在JavaScript中，数据类型分为两大类，一种是基础数据类型，另一种则是复杂数据类型，又叫引用数据类型

  • 基础数据类型：数字Number 字符串String 布尔Boolean Null Undefined Symbols BigInt
  • 引用数据类型：日期Dete，对象Object，数组Array,方法Function, 正则regex,带键的集合：Maps, Sets, WeakMaps, WeakSets

基础数据类型和引用数据类型的区别，在之前深拷贝的文章中提到过，这里不做详细赘述。

传送门：javaScript中深拷贝和浅拷贝简单梳理

常见的几种数据校验方式

接下来会针对下面几种数据类型，进行校验

// 基本数据类型
let str = "abc";
let num = 123;
let boo = true;
let undef = undefined;
let testNull = null;
let symb = Symbol("user");
let bigInt = BigInt(9007199254740999);

// 复杂-引用数据类型
let arr = [1, 2, 3, 4];
let func = function () {};
let obj = {};
let date1 = new Date();
let setObj1 = new Set();
let setObj2 = new Set([1, 2, 3]);
let mapObj = new Map();

typeof操作符

typeof操作符，会返回一个字符串，表示未经计算的操作数的类型

/**
 * typeof 操作符
 *
 * 返回一个字符串，表示未经计算的操作数的类型。
 *
 * */
console.log(typeof str); //  string
console.log(typeof num); //  number
console.log(typeof boo); //  boolean
console.log(typeof undef); //  undefined
console.log(typeof testNull); //  object
console.log(typeof symb); //  symbol
console.log(typeof bigInt); //  bigint
console.log(typeof Object(bigInt)); // object
console.log(typeof arr); //  object
console.log(typeof func); //  function
console.log(typeof obj); //  object
console.log(typeof date1); //  object
console.log(typeof setObj1); //  object
console.log(typeof setObj2); //  object
console.log(typeof mapObj); //  object

小结

使用typeof操作符的时候，我们可以看到一些较为特殊的情况：

  • null，数组array，set,map 返回的是对象object

instanceof

instanceof用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

/**
 *
 * instanceof
 *
 * 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
 *
 * */
console.log(str instanceof String); // false
console.log(new String("abc") instanceof String); // true
console.log(num instanceof Number); // false
console.log(new Number(123) instanceof Number); // true
console.log(boo instanceof Boolean); // false
console.log(new Boolean(true) instanceof Boolean); // false
console.log(undef instanceof undefined);
// Uncaught TypeError: Right-hand side of 'instanceof' is not an object
console.log(testNull instanceof null);
// Uncaught TypeError: Right-hand side of 'instanceof' is not an object
console.log(symb instanceof Symbol); // false 
// Symbol不是构造函数，没有new操作符
console.log(bigInt instanceof BigInt); // false
console.log(Object(BigInt("22")) instanceof Object); // true
console.log(Object(BigInt("22")) instanceof BigInt); // true
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true
console.log(func instanceof Function); // true
console.log(func instanceof Object); // true
console.log(obj instanceof Object); // true
console.log(obj instanceof Function); // false
console.log(null instanceof Object); // false
console.log(date1 instanceof Object); // true
console.log(setObj1 instanceof Object); //  true
console.log(setObj2 instanceof Object); //  true
console.log(mapObj instanceof Object); //  true
console.log(setObj1 instanceof Array); //  false
console.log(setObj2 instanceof Array); //  false
console.log(mapObj instanceof Array); //  false

constructor

/**
 * constructor
 *
 * 返回创建实例对象的 构造函数的引用。
 *
 * 注意，此属性的值是对函数本身的引用，而不是一个包含函数名称的字符串
 *
 * 构造函数.prototype.constructor()
 *
 * */
 
// 基本数据类型
let str = "abc";
let num = 123;
let boo = true;
let undef = undefined;
let testNull = null;
let symb = Symbol("user");
let bigInt = BigInt(9007199254740999);
// 复杂-引用数据类型
let arr = [1, 2, 3, 4];
let func = function () {};
let obj = {};
let date1 = new Date();
function constructorFn() {
  this.name = "11";
}
let con1 = new constructorFn();
let setObj1 = new Set();
let setObj2 = new Set([1, 2, 3]);
let mapObj = new Map(); 
console.log(str.constructor); // String
console.log(num.constructor); // Number
console.log(boo.constructor); // Boolean
// console.log(testUndefined.constructor); // Cannot read property 'constructor' of undefined
// console.log(testNull.constructor); // Cannot read property 'constructor' of null
console.log(symb.constructor); // Symbol
console.log(bigInt.constructor); // BigInt
console.log(arr.constructor); // Array
console.log(func.constructor); // Function
console.log(obj.constructor); // Object
console.log(date1.constructor); // Date
console.log(constructorFn.constructor); // Function
console.log(con1.constructor); // constructorFn
console.log(setObj1.constructor); // Set
console.log(setObj2.constructor); // Set
console.log(mapObj.constructor); // Map
/**
 *
 * 构造函数校验
 *
 * */
console.log(Function.constructor); // Function
console.log(Object.constructor); // Function
console.log(Array.constructor); // Function
console.log(Date.constructor); // Function

Object.prototype.toString.call && Object.prototype.toString.apply
Object.prototype.toString()

在使用Object.prototype.toString.call或者Object.prototype.toString.apply检查数据类型之前，我们先了解一下Object.prototype.toString和JavaScript中的构造函数Function的原型方法apply和call：

/**
 * 返回一个表示该对象的字符串
 *
 * Object.prototype.toString()
 *
 * 每个对象都有一个 toString() 方法，当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。
 * 默认情况下，toString() 方法被每个 Object 对象继承。
 *
 * 如果此方法在自定义对象中未被覆盖，toString() 返回 "[object type]"，其中 type 是对象的类型。以下代码说明了这一点：
 *
 * */

let isObj = { name: "zhangsan" };
let isBoolean = true;
let isNumber = new Number(123);
let isString = "abc";
let isFun = new Function();
console.log(isObj.toString()); // [object Object]
console.log(isBoolean.toString()); // true
console.log(isNumber.toString()); // 123
console.log(isString.toString()); // abc
console.log(new Date().toString()); // Thu Apr 28 2022 16:37:19 GMT+0800 (中国标准时间)
console.log(isFun.toString()); // function anonymous() {}

call && apply

/**
 *
 * call() 使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数，function.call(thisArg, arg1, arg2, ...)
 *
 * apply() 使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数，unc.apply(thisArg, [argsArray])
 *
 * */
// call基本使用;
function a() {
	console.log(this);
}
function b() {
	console.log(this);
}
a.call(b); //		function b() {}
b.call(a); //		function a() {}

call和apply最简单的例子表明了，改变了当前方法的this指向

同时这两个方法的区别在于传参的方式

Object.prototype.toString结合Function.prototype.call && apply

/**
 *
 * 使用 toString() 检测对象类型可以通过 toString() 来获取每个对象的类型。
 * 为了每个对象都能通过 Object.prototype.toString() 来检测，
 * 需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用，传递要检查的对象作为第一个参数，称为 thisArg。
 *
 * 那么 Object.prototype.toString 相当于 原生构造函数的实例化对象isNumber，传参数给Object.prototype.toString执行
 * 实际上相当于 toString.call(new ***);
 *
 * */
 
let str = "abc";
let num = 123;
let boo = true;
let undef = undefined;
let testNull = null;
let symb = Symbol("user");
let bigInt = BigInt(9007199254740999);
// 复杂-引用数据类型
let arr = [1, 2, 3, 4];
let func = function () {};
let obj = {};
let date1 = new Date();
function testFun() {}
let newTest = new testFun();
let newFun = new Function();
let setObj1 = new Set();
let setObj2 = new Set([1, 2, 3]);
let mapObj = new Map();
console.log(Object.prototype.toString.apply(new String("sss"))); // [object String]
console.log(Object.prototype.toString.apply(str)); // [object String]
console.log(Object.prototype.toString.call(num)); // [object Number]
console.log(Object.prototype.toString.call(boo)); // [object Boolean]
console.log(Object.prototype.toString.call(undef)); // [object Undefined]
console.log(Object.prototype.toString.call(testNull)); // [object Null]
console.log(Object.prototype.toString.call(symb)); // [object Symbol]
console.log(Object.prototype.toString.call(Object(bigInt))); // [object BigInt]
console.log(Object.prototype.toString.call(bigInt)); // [object BigInt]
console.log(Object.prototype.toString.apply(arr)); // [object Array]
console.log(Object.prototype.toString.call(func)); // [object Function]
console.log(Object.prototype.toString.call(obj)); // [object Object]
console.log(Object.prototype.toString.call(date1)); // [object Date]
console.log(Object.prototype.toString.call(testFun)); // [object Function]
console.log(Object.prototype.toString.call(newTest)); // [object Object]
console.log(Object.prototype.toString.call(newFun)); // [object Function]
console.log(Object.prototype.toString.call(setObj1)); // [object Set]
console.log(Object.prototype.toString.call(setObj2)); // [object Set]
console.log(Object.prototype.toString.call(mapObj)); // [object Map]

其他校验数据类型的方法：

判断是否是数组：

console.log(Array.isArray([1, 2])); // true

判断一个对象是否是空对象

// 判断空对象
function isEmptyObj(obj) {
  for (name in obj) {
    console.log(name);
    return false; // 不是空对象
  }
  return true;
}
console.log(isEmptyObj({}));  // true

总结

  • 不管是typeof操作符，还是其他的操作方法，都有各自的缺陷
  • 在日常的开发过程中，我们需要知道当前操作的是对象，还是构造函数生成的对象或者方法，才能针对当前需要判断的数据类型，采用最适合的方法
  • Object.prototype.toString.call或者Object.prototype.toString.apply应该是最完善的方法，在我们不确定是否是引用类型或者基本数据类型的时候，建议作为首选
  • 在了解这些判断数据类型的方式之前或者说存有疑问：为什么array数组在使用instanceof和typeof 校验Object的时候都成立，这时候需要去了解一下引用数据类型的具体内容
  • 以上判断数据类型的方法，可以在项目开发过程中，可以写入到utils公共方法当中，作为开发中进行使用。

更多用法等待补充。

到此这篇关于javaScript中一些常见的数据类型检查校验的文章就介绍到这了,更多相关JS数据类型检查校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

源码地址

码云 https://gitee.com/lewyon/vue-note
githup https://github.com/akari16/vue-note

您可能感兴趣的文章:

相关文章

  • JavaScript时间对象之常用方法的设置实例

    JavaScript时间对象之常用方法的设置实例

    这篇文章主要为大家介绍了JavaScript时间对象常用方法的设置实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • 原生js实现addClass,removeClass,hasClass方法

    原生js实现addClass,removeClass,hasClass方法

    这篇文章主要介绍了原生js实现addClass,removeClass,hasClass方法和使用原生JS实现jQuery的addClass, removeClass, hasClass函数功能,需要的朋友可以参考下
    2016-04-04
  • JavaScript设计模式之观察者模式与发布订阅模式详解

    JavaScript设计模式之观察者模式与发布订阅模式详解

    这篇文章主要介绍了JavaScript设计模式之观察者模式与发布订阅模式,结合实例形式详细分析了JavaScript观察者模式与发布订阅模式相关概念、原理
    2020-05-05
  • 利用JS将图标字体渲染为图片的方法详解

    利用JS将图标字体渲染为图片的方法详解

    在软件开发中肯定要用到图标，比如下图的 Groove 音乐中就用到了许多图标。一种获取这些图标的方法是把 Groove 音乐截个图，然后熟练地开启 Photoshop，开始抠图。这种方式很逊，效率也很低。本文将利用JS将图标字体渲染为图片，需要的可以参考一下
    2022-05-05
  • js实现随机点名器精简版

    js实现随机点名器精简版

    这篇文章主要为大家详细介绍了js实现随机点名器的精简版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • js判断手机和pc端选择不同执行事件的方法

    js判断手机和pc端选择不同执行事件的方法

    这篇文章主要介绍了js判断手机和pc端选择不同执行事件的方法,可实现判断手机端还是PC端再选择对应的执行事件的功能,是非常实用的技巧,需要的朋友可以参考下
    2015-01-01
  • 原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

    原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

    脚本之家小编之前整理不少checkbox全选全不选这方便的文章，但看了这篇以后发现实现方法更好
    2016-10-10
  • js控住DOM实现发布微博效果

    js控住DOM实现发布微博效果

    这篇文章主要为大家详细介绍了js控住DOM实现发布微博效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • webpack打包时如何修改文件名的实现示例

    webpack打包时如何修改文件名的实现示例

    本文主要介绍了webpack打包时如何修改文件名的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • JavaScript实现酷炫的鼠标拖尾特效

    JavaScript实现酷炫的鼠标拖尾特效

    这篇文章主要为大家介绍了通过JavaScript实现的一个超级好看的鼠标拖尾特效，文中的示例代码讲解详细，对我们学习JavaScript有一定的帮助，感兴趣的可以学习一下
    2021-12-12

最新评论