首页 技术 正文
技术 2022年11月15日
0 收藏 338 点赞 4,690 浏览 2833 个字

面试当中经常会问到检测 js 的数据类型,我在工作当中也会用到这些方法。让我们一起走起!!!

首先给大家上一个案例

 console.log(typeof "langshen");       // String
console.log(typeof 666); // Number
console.log(typeof true); // Boolean
console.log(typeof false); // Boolean
console.log(typeof function(){}); // Function
console.log(typeof undefined); // Undefined
console.log(typeof null); // Object
console.log(typeof []); // Object
console.log(typeof {}); // Object

通过这些案例大家不难看出

第一种 : 当 typeof 检测基本数据类型(Number、String、Boolean 、Undefined、Null)的时候是没有问题的。

但是检测引用型数据类型(Array、Object、RegExp等)的时候全都是 Object。

由于 typeof 检测的数据类型不是那么的 perfect !!!会有局限性。

使用场景:

      可以判断传递的参数是否有值

 function fn(a, b) {
if (typeof b === "undefined") { // 没有传递参数
b = 0;
}
console.log(a, b); //1 0
}
fn(1);

第二种 : instanceof   检测一个实例是不是属于某个类

 console.log("langshen" instanceof String);         //false
console.log(666 instanceof Number); //false
console.log(true instanceof Boolean); //false
console.log(null instanceof Null);
console.log(undefined instanceof Undefined);
console.log([] instanceof Array); //true
console.log(function(){} instanceof Function); //true
console.log({} instanceof Object); //true

咱们先不要看 null 和 undefined

首先看基本数据类型,打印出来的都是false,这是为什么呢?

前三个都是以对象字面量创建的基本数据类型,但是却不是所属类的实例,只有实例方式创建出来的才是标准的对象数据类型值

如果我们换种方式来检测

 new String("langshen") instanceof String       //true
new Number(666) instanceof Number //true
new Boolean(true) instanceof Boolean //true

当我们通过New的方式去创建基本数据类型就输出true

所以当我们检测的数据只要在当前实例的原型链上,我们用其检测出来的结果都是true 。

另外两个特例:Null 和  Undefined 这两个没有办法比较,比较特殊

总结:

instanceof是一个操作符,返回值是一个布尔值
instanceof是检测引用数据类型,而不能检测基本数据类型

第三种: constructor

constructor这个属性存在于构造函数的原型上,指向构造函数,对象可以通过  __proto__ 在其所属类的原型上找到这个属性

 console.log(("1").constructor === String);             //true
console.log((1).constructor === Number);          //true
console.log((true).constructor === Boolean);         //true
console.log(([]).constructor === Array);            //true
console.log((function() {}).constructor === Function);    //true
console.log(({}).constructor === Object);            //true

现在看起来是不是很完美呢,其实并不是这样的,在看下面这个例子

function Fn(){};Fn.prototype=new Array();var f=new Fn();
console.log(f.constructor===Fn); //false
console.log(f.constructor===Array); // true

看了这个例子是不是觉得对这个世界都没有爱了!!

但我要告诉你不不不,我们要对世界保持100%热爱,由于这种热爱让我们总结出了最后一种万能的检测方法!!!

第四种:Object.prototype.toString.call()

console.log(Object.prototype.toString.call(1));              //[object Number]
console.log(Object.prototype.toString.call(''));             //[object String]
console.log(Object.prototype.toString.call(true));            //[object Boolean]
console.log(Object.prototype.toString.call(null));            // [object Null]
console.log(Object.prototype.toString.call(undefined));         //[object Undefined]
console.log(Object.prototype.toString.call([]));             // [object Array]
console.log(Object.prototype.toString.call({}));             // [object Object]
console.log(Object.prototype.toString.call(/^$/));            //[object RegExp]
console.log(Object.prototype.toString.call((function () {})));     //[object Function]

这种方法可以把多有的数据类型进行转换,是不是很神奇呢!!

想要看到更多神奇的请关注我的博客园!!!

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,501
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,915
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,747
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,505
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,143
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,306