关于js的类型检测

Cheriselalala 发布于2019-08-21 10:38 / 417人阅读

摘要：原始类型又有种引用类型有而检测这些类型的变量有种办法，，。而关于引用类型，还可以尝试下操作符。总而言之，如果指定则保存的实际上就是的值，是一个基本类型。

javascript的变量类型分为原始类型和引用类型。

原始类型又有5种：

number

string

boolean

null

undefined

引用类型有:

Function

Array

Date

Object

RegExp

而检测这些类型的变量有3种办法：typeof，instanceof，Object.prototype.toString.call。让我来一一例举，废话不多说，上代码。

//首先是typeof
var obj = 1;
typeof obj; //"number"
obj = "abc"
typeof obj; //"string"
obj = false
typeof obj; //"boolean"
obj = undefined;
typeof obj; //"undefined"
obj = null;
typeof obj; //"object"，WTF，其实这是js的一个bug，人艰不拆 T_T

obj = function(){};
typeof obj; //"function"
obj = [];
typeof obj; //"object"
obj = {};
typeof obj; //"object"
obj = /w/g;
typeof obj //"object"

从上面我们可以得出type能检测原始类型number,string,boolean,undefined，引用类型的function。这里容我邪恶的笑一笑。
而关于引用类型，还可以尝试下instanceof操作符。

var obj = function(){};
obj instanceof Function; //true
obj = [];
obj instanceof Array; //true
obj = {};
obj instanceof Object; //true
obj = new Date()
obj instanceof Date; //true
obj = /w/g;
obj instanceof RegExp; //true
//....桥豆麻袋, 事情其实还没完呢
obj = [];
obj instanceof Object; //true  草草嗒，所有引用类型其实都是继承自Object对象的，所以你懂的。

incetanceof 操作符能鉴别引用类型，可惜有个缺憾是，如果想鉴别一个变量object类型而不是其他的function，array，date什么的，仍然需要花一番力气。
这里我们是不是漏了什么，如果..

var obj = new String("abc");
typeof obj; //"object" 。 
obj instanceof String; //true 。

天了个撸，不能愉快玩耍了。要解释这个, 就得解释js里变量的赋值规则。

原始类型的变量直接保存原始值，而不是一个只想对象的指针。如果一个变量赋值给另一个变量，那么每个变量都它自己的一份数据拷贝，并不会相互影响。

引用类型的变量保存的是一个指向内存中实际对象所在的指针（或者说引用）。因此当你将一个对象赋值给变量时，实际是赋值给这个变量一个指针。意味着将一个变量赋值给另一个变量时，两个变量指向的是内存中同一个对象。

var obj = "abc";
obj.something = 1;
var firstChar = obj.charAt(0); //"a"
console.log(obj.something); //undefined
//实际上js做了这样的处理
var obj = "abc";
var temp = new String(obj);
var firstChar = temp.charAt(0); //"a"
temp.something = 1;
temp = null;
console.log(obj.something); //undefined

创建了一个临时的引用类型变量去访问属性，修改属性，然后就被释放了。阿咧，扯远了，这和我们这片的内容啥关系。。
总而言之，如果指定obj = "abc"则obj保存的实际上就是abc的值，是一个基本类型。而如果指定obj = new String("abc")那么obj实际上保存的是一个指向字符串对象的指针。所以就不难理解两者对于typeof和instanceof的差别了
额，读者：“说了这么多，你有没有一种万全的手段哇”。好吧，我们来一个简单又粗暴的鉴别手段。

var obj = 1;
Object.prototype.toString.call(obj) === "[object Number]"; //true
obj = new Number(1);
Object.prototype.toString.call(obj) === "[object Number]"; //true

obj = [];
Object.prototype.toString.call(obj) === "[object Array]"; //true
obj = new Array();
Object.prototype.toString.call(obj) === "[object Array]"; //true
Object.prototype.toString.call(obj) === "[object Object]"; //false

这个方法是不是很好用呢，哇哈哈哈哈。
总结归纳了下，我列举了一些校验函数:

//低版本ie中undefined变量可以被修改，所以使用void 0 获取真实的undefined值，
var isUndefined = function(obj) {
    //or: return typeof obj === "undefined";
    return obj === void 0;
};
//typeof null 的结果是"object"。
var isNull = function(obj) {
    return obj === null;
};
// boolean值，number值和string值需要考虑两种情况，值为字面量时使用typeof和Object.prototype.toString能检测; 
// 值为构造函数构建的时候需要使用Object.prototype.toString或者instanceof检测
var isBoolean = function(obj) {
    return Object.prototype.toString.call(obj) == "[object Boolean]";
};
var isNumber = function(obj) {
    return Object.prototype.toString.call(obj) == "[object Number]";
};
var isString = function(obj) {
    return Object.prototype.toString.call(obj) == "[object String]";
};
var isNaN = function(obj) {
    return obj !== obj;
};

//typeof 操作符在引用类型的变量里能对function有效。
var isFunction = function(obj) {
    //or:  return Object.prototype.toString.call(obj) == "[object Function]";
    return typeof obj === "function";

};
var isDate = function(obj) {
    return Object.prototype.toString.call(obj) == "[object Date]";
}
var isArray = function(obj) {
    return Object.prototype.toString.call(obj) == "[object Array]";
}
var isObject = function(obj) {
    //or: return obj === Object(obj);
    return Object.prototype.toString.call(obj) == "[object Object]";
}
var isRegExp = function(obj) {
    //or: return obj === Object(obj);
    return Object.prototype.toString.call(obj) == "[object RegExp]";
}

var has = function(obj, key) {
    return Object.prototype.hasOwnProperty.call(obj, key);
};
//判断数组，字符串，对象是否为空
var isEmpty = function(obj) {
    if (obj == null) return true;
    if (isArray(obj) || isString(obj)) return obj.length === 0;
    for (var key in obj) if (has(obj, key)) return false;
    return true;
};

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85920.html

你不知道的js技巧

摘要：所谓的高级，其实就是讲了一些我们平常用不到或许用了不知道，但是非常实在的东西。比如如果你想检测里面的属性值的话，基本上是不可能的。要知道，我们是有情怀的淫。 JS进阶说起这个应该算是老生常谈了吧。所谓的高级，其实就是讲了一些我们平常用不到(或许用了不知道)，但是非常实在的东西。算是熟练掌握js的一个必经road吧。检测函数类型其实检测函数的类型应该算是js的一个痛点，因为js是一...

edagarli 2019-08-19 17:20 评论0 收藏0
《编写可维护的 JavaScript》读书笔记

摘要：最近阅读了编写可维护的，在这里记录一下读书笔记。禁止使用，，，的字符串形式。避免使用级事件处理函数。让事件处理程序成为接触到对象的唯一函数。检测函数是检测检测函数的最佳选择。为特定浏览器的特性进行测试，并仅当特性存在时即可应用特性检测。最近阅读了《编写可维护的 JavaScript》，在这里记录一下读书笔记。书中主要基于三个方向来讲解怎么增加代码的可维护性：编程风格、编程实践、自动化...

tuniutech 2019-08-23 16:25 评论0 收藏0
JavaScript的数据类型及其检测

摘要：值的比较只进行值的比较会进行数据类型的转换。只要在当前实例的原型链上，我们用其检测出来的结果都是。但检测与不一样，还可以处理基本数据类型的检测。 showImg(https://segmentfault.com/img/remote/1460000016733921); 一、JavaScript有几种类型的值？ Javascript有两种数据类型，分别是基本数据类型和引用数据类型。其中...

starsfun 2019-08-29 17:01 评论0 收藏0
JavaScript的数据类型及其检测

摘要：值的比较只进行值的比较会进行数据类型的转换。只要在当前实例的原型链上，我们用其检测出来的结果都是。但检测与不一样，还可以处理基本数据类型的检测。 showImg(https://segmentfault.com/img/remote/1460000016733921); 一、JavaScript有几种类型的值？ Javascript有两种数据类型，分别是基本数据类型和引用数据类型。其中...

dingding199389 2019-08-02 11:45 评论0 收藏0
JavaScript的数据类型及其检测

摘要：值的比较只进行值的比较会进行数据类型的转换。只要在当前实例的原型链上，我们用其检测出来的结果都是。但检测与不一样，还可以处理基本数据类型的检测。 showImg(https://segmentfault.com/img/remote/1460000016733921); 一、JavaScript有几种类型的值？ Javascript有两种数据类型，分别是基本数据类型和引用数据类型。其中...

Moxmi 2019-08-23 12:25 评论0 收藏0