JavaScript数据类型检测实现方法详解

目录
  • 一、typeof
  • 二、instanceof
  • 三、Object.prototype.toString.call()
  • 面试问题

一、typeof

  • 优点:能快速判断基本数据类型,除了 Null
  • 缺点:不能判别 ObjectArrayNull ,都返回 object;判别引用类型除函数显示 function外,其他显示为 object
console.log(typeof 55);              // number
console.log(typeof true);            // boolean
console.log(typeof 'aa');            // string
console.log(typeof undefined);       // undefined
console.log(typeof function(){});    // function
console.log(typeof Symbol("foo"));   // symbol
console.log(typeof 553119869n);      // bigint
// 不能判别
console.log(typeof []);   // object
console.log(typeof {});   // object
console.log(typeof null); // object

二、instanceof

MDN:

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

理解:判断在其原型链中能否找到该类型的原型。

语法:

object instanceof constructor

function D(){}
var o = new D();
o instanceof D;  // true
o instanceof Object; // true
  • 优点:能区分ArrayObjectFunction,适用于判断自定义的类实例对象
  • 缺点:不能判断 NumberBooleanString 基本数据类型
console.log(55 instanceof Number);                // false
console.log(true instanceof Boolean);             // false
console.log('aa' instanceof String);              // false
console.log([] instanceof Array);                 // true
console.log(function(){} instanceof Function);    // true
console.log({} instanceof Object);                // true

String 对象和 Date 对象都属于 Object 类型 和 一些特殊情况:

var simpleStr = "a simple string";
var objStr = new String();
var newStr = new String("String created with constructor");
var aDate = new Date();
var myNonObj = Object.create(null);
simpleStr instanceof String; // false,非对象实例,因此返回 false
objStr instanceof String;    // true
newStr instanceof String;    // true
objStr instanceof Object;    // true
myNonObj instanceof Object; // false,一种创建非 Object 实例的对象的方法
aDate instanceof Date;      // true
aDate instanceof Object;    // true

三、Object.prototype.toString.call()

  • 优点:精准判断数据类型,所有原始数据类型都是能判断;
  • 缺点:写法繁琐,最好进行封装后使用
var toString = Object.prototype.toString;
console.log(toString.call(55));           // [object Number]
console.log(toString.call(true));         // [object Boolean]
console.log(toString.call('aa'));         // [object String]
console.log(toString.call([]));           // [object Array]
console.log(toString.call(function(){})); // [object Function]
console.log(toString.call({}));           // [object Object]
console.log(toString.call(undefined));    // [object Undefined]
console.log(toString.call(null));         // [object Null]
console.log(toString.call(Math));         // [object Math]
console.log(toString.call(Set));          // [object Function] Set 构造函数
console.log(toString.call(Array));        // [object Function] Array 构造函数
console.log(toString.call(Map));          // [object Function]
console.log(toString.call(Date));         // [object Function]
console.log(toString.call(new Set()));    // [object Set]
console.log(toString.call(new Array()));  // [object Array]
console.log(toString.call(new Map()));    // [object Map]
console.log(toString.call(new Date()));   // [object Date]
function D(){}
console.log(toString.call(D));            // [object Function]
console.log(toString.call(new D()));      // [object Object]

面试问题

如何判断变量是否为数组?

let arr = []
console.log(Array.isArray(arr));    // true
arr.__proto__ === Array.prototype;  // true
arr instanceof Array;               // true
Object.prototype.toString.call(arr);// [object Array]

判断是否是 Promise 对象

function isPromise(val) {
  return (
    typeof val.then === 'function' &&
    typeof val.catch === 'function'
  )
}
let p = new Promise((resolve, reject) => {});
console.log(isPromise(p)); // true

到此这篇关于JavaScript数据类型检测实现方法详解的文章就介绍到这了,更多相关JS数据类型检测内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-11-01

javascript中的数据类型检测方法详解

本文实例讲述了javascript中的数据类型检测方法.分享给大家供大家参考,具体如下: 在javascript中数据类型 值类型: 布尔(Boolean),数值(Number),字符(String),空(Null),未定义(Undefined) 引用类型: 对象(Object),函数(Function),数组(Array),日期(Date),正则(RegExp)等等. 检测方式之 typeof console.log(typeof undefined)//'undefined' console

js数据类型检测总结

在js中,有四种用于检测数据类型的方式,分别是: typeof 用来检测数据类型的运算符 instanceof 检测一个实例是否属于某个类 constructor 构造函数 Object.prototype.toString.call() 原型链上的Object对象的toString方法 下面我们就来分别介绍一下上面四种方法的适用场景和局限性. typeof 用来检测数据类型的运算符 使用typeof检测数据类型,返回值是字符串格式.能够返回的数据类型 是:"number","

关于JS数据类型检测的多种方式总结

目录 背景 判断数据类型的手段有哪些? 1. 用typeof判断基础数据类型: 2. 用instanceof判断对象数据类型 3. 用contructor属性 4. toString方法 5. 用Array.isArray判断数组 6.区分ArrayLike与Array 7.判断一个对象是否是纯对象(or普通对象) 8. NaN如何检测,Number.isNaN与isNaN有啥区别 9. 鸭式类型检测法 总结 背景 总所周知,js是一门动态的弱类型脚本语言,其采用动态的类型系统以及基于原型的继承

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

1.typeof 用来检测数据类型的运算符 console.log(typeof 12)//Number 使用typeof检测数据类型,首先返回的都是字符串 ,其次字符串中包含了对应的数据类型 例如:"number"."string"."boolean"."undefined"."function"."object" console.log(typeof typeof function(

浅谈javascript的数据类型检测

一.javascript的数据 javascript的数据分为两种:简单数据和复杂数据.简单数据包含number,string,boolean,undefined和null这五种:复杂数据只有一种即object.[此处友情鸣谢李战老师,<<悟透JavaScript>>写得太传神,印象太深刻了] 二.javascript的数据类型检测 1.万能的typeof 我们先测试一下通过typeof来获取简单数据类型.什么也别说了,上代码是王道: 复制代码 代码如下: // 获取变量obj的数

JavaScript数据类型检测代码分享

复制代码 代码如下: /**   * param:o表示检测的值   * return:返回字符串"undefined"."number"."boolean"."string"."function"."regexp"."array"."date"."error"."object"或"null&quo

JavaScript数据类型学习笔记分享

本文实例为大家讲解JavaScript数据类型的相关资料,供大家参考,具体内容如下 1.引用类型 引用类型的值是引用类型的一个实例,引用类型是一种数据结构,用于将数据和功能组织在一起,也常被叫做类. 对象时某个特定引用类型的实例,新对象是使用new操作符后跟一个构造函数来创建的,构造函数本身就是函数,是出于创建新对象的目的而定义的. var person = new Object(); 2.Object类型 (1)Object类型对于应用程序中存储和传输数据来说,是非常理想的选择. (2)Obj

面向对象Javascript核心支持代码分享

JQury框架绝对是页面开发的首选,代码短小强悍,缺点就是面向对象特性不足,所幸有不少插件!至于Ext就是一个庞然大物了,高度面向对象,类似于MFC的庞大API和控件库,运行起来,浏览器就累得够呛,开发也够呛,使用代码来创建界面绝对是个糟糕的方式,Javascript的弱语言类型使得Ext开发就像行走在雷区,减少bug的唯一方法就是不要写出bug,一旦出现bug,调试将是一件极为痛苦的事情 !在几千行代码里跟踪.跳转真让人抓狂! Javascript做面向对象开发的时候,总是会用到很多模拟面向对

javascripit实现密码强度检测代码分享

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>    <meta http-equiv=&

javascript 浏览器检测代码精简版

复制代码 代码如下: /*written by xp in 8z at Mar 4,2010.QQ:251089096*/ var sUserAgent = navigator.userAgent; var isIE=isIE6=isIE7=isIE8=isFirefox=false; if(sUserAgent.indexOf("MSIE") > -1){ isIE = true; var version = sUserAgent.substr(sUserAgent.index

javascript四舍五入函数代码分享(保留后几位)

直接看代码吧 参数一:要保留小数位的数字 参数二:要保留的位数 复制代码 代码如下: function FormatNumber(srcStr,nAfterDot){  var srcStr,nAfterDot;  var resultStr,nTen;  srcStr = ""+srcStr+"";  strLen = srcStr.length;  dotPos = srcStr.indexOf(".",0);  if (dotPos ==

javascript 浏览器类型和版本号检测代码(兼容多浏览器)

javascript检测浏览器类型和版本号(兼容各浏览器) var uA = navigator.userAgent; var browserType = "unknown"; if (uA.indexOf("Opera") > -1) { browserType = "Opera"; } else if (uA.indexOf("Safari") > -1) { browserType = "Safar

JavaScript图片放大技术(放大镜)实现代码分享

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu