js篇-判断数据类型的方式有哪些

判断数据类型的方式

在面试过程中,经常会被问到的一个问题:JavaScript判断数据的类型的方式有哪些?

在回答上面的问题之前,我们需要知道JavaScript中有哪些数据类型。

在这篇文章你可以了解到:js中包含哪些数据类型、js中的数据类型可以用哪些方式检测、区分一个数据Object还是Array的方法、判断数组的方法。

1. JavaScript中的数据类型

JavaScript一共有八种数据类型,这些数据类型可以将其分为原始数据类型和引用数据类型,这两种类型存储的位置也不一样。

  1. 栈(先进后出):原始数据类型:Number、String、Boolean、Undefined、Null
  2. 堆:引用数据类型:对象(Object)、数组(Array)、函数(Function)

上面提到的内容在本篇不做过多的详细阐释。

2. 使用typeof进行数据类型的检测

js 复制代码
console.log(typeof 1); //number
console.log(typeof '我是字符串'); //string
console.log(typeof true); // boolean
console.lof(typeof undefined); //undefiend
console.log(typeof []); //object
console.log(typeof {}); //object
console.log(typeof null); //object

注意,其中需要注意的是:\[\]、{}、null判断出来的结果的是object。

3. 使用instanceof判断对象的类型

js 复制代码
console.log(1 instanceof Number); //false
console.log(true instanceof Boolean); //false
console.log('我是字符串' instanceof String); //false

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

// 注意这里可以区分数据是Object还是Array
console.log([] instanceof Array); //true
console.log([] instanceof Object); //true

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

在上述的例子中,我们发现 instanceog 只能正确地判断引用数据类型,而不能判断基本的数据类型。

4.constructor

在举例之前,先来了解一下constructor的作用:

  1. 判断数据类型
  2. 对象实例通过constructor对象访问它的构造函数
js 复制代码
console.log((2).constructor === Number); //true  
console.log((true).constructor === Boolean); //true  
console.log(('str').constructor === String); //true  

// 注意这里可以区分数据是Object还是Array
console.log(([]).constructor === Array);// true  
console.log(([]).constructor === Object);// false  

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

注释:如果创建一个对象来改变它的原型时,constructor就不能用来判断数据类型,例如:

js 复制代码
function Fn(){};
Fn.prototype = new Array();
let f = new Fn();

console.log(f.constructor === Fn); //false
console.log(f.constructor === Array); //true

5. 使用Object.prototype.toString.call()来判断数据类型

js 复制代码
console.log(Object.prototype.toString.call(2));  //[Object Number]
console.log(Object.prototype.toString.call(true));  //[Object Boolean]
console.log(Object.prototype.toString.call('true'));  //[Object String]
console.log(Object.prototype.toString.call([]));   //[Object Array]
console.log(Object.prototype.toString.call(function(){}));  //[Object Function]
console.log(Object.prototype.toString.call({}));  //[Object Object]
console.log(Object.prototype.toString.call(undefined));  //[Object Undefined]
console.log(Object.prototype.toString.call(null));  //[Object Null]

6. 判断数据的方式

1. instanceOf

js 复制代码
console.log([] instanceof Array); //true

2.Object.prototype.toString.call()

js 复制代码
console.log(Object.prototype.toString.call([]));   //[Object Array]

3.Es6的isArray()

js 复制代码
console.log(Array.isArrray(obj));// true

4. Array.prototype.isPrototypeOf()

js 复制代码
console.log(Array.prototype.isPrototypeOf(obj)) //true

还是那句话~请多多指教。 作者准备跑路中,有没有内推啊

相关推荐
paopaokaka_luck8 小时前
宠物门店经营管理系统(销售与库存联动、进货自动记账、 退换与退款关联、员工个人业绩、ECharts 经营分析、滞销识别与客户分层、宠物档案年龄计算)
前端·javascript·spring boot·mysql·echarts·mybatis·1024程序员节
鶴哥只手遮天12 小时前
jQuery 4.0 源码架构与工程实践-第 10 章 尺寸、几何与显隐
前端·javascript·jquery
米米商聊14 小时前
图标能点,按钮就可用了吗?键盘、名称与收藏状态
前端·javascript
技术小甜甜15 小时前
【Cursor】Skill 被标黄色警告,怎么改成合格的 SKILL.md
开发语言·javascript·ai编程·cursor·1024程序员节·ai agent·skills
qetfw16 小时前
Bash 函数与流程控制:read、if、for、case 验证
linux·前端·javascript·bash
鬼手点金17 小时前
从 API 消息到模型 Token:Chat Template
java·前端·javascript·数据库·人工智能·深度学习·1024程序员节
Mr.Pascal19 小时前
Javascript之什么是作用域?
javascript·1024程序员节
microrain19 小时前
设备报文怎么变,SagooIoT 只约定三个函数名
javascript·物联网·golang·sagooiot
Bug收容所20 小时前
Vue+JS Day3
前端·javascript·vue.js·前端框架·1024程序员节
小羊没烦恼!20 小时前
.NET无侵入自动化探针原理和主流实现
运维·开发语言·javascript·python·自动化·.net·1024程序员节