检测数据类型的方法

投时

已于 2022-03-17 00:03:17 修改

阅读量1k

点赞数 2

分类专栏： js 面试题文章标签： javascript

于 2022-03-16 20:31:39 首次发布

本文链接：https://blog.csdn.net/gxll499294075/article/details/123433691

版权

js 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

面试题

11 篇文章 1 订阅

订阅专栏

1. 最常见的判断方法：typeof 方法

2. 判断已知对象类型的方法： instanceof

3. 根据对象的constructor判断： constructor

4. Object.prototype.toString.call() 【重要】

5. 无敌万能的方法：jquery.type()

6. isNaN() 判断是不是数字

6. Array.isArray() 判断是不是数组

1. 最常见的判断方法：typeof 方法

console.log(typeof 1);  //  number
console.log(typeof ''); //  string
console.log(typeof undefined);  //  undefined
console.log(typeof null);   //  object
console.log(typeof true);  //   boolean
console.log(typeof []); //  object
console.log(typeof {}); //  object
console.log(typeof function () { });    // function
console.log(typeof new Date());    // object

注意：

typeof null 返回的是一个 object 类型
typeof 不能区分复杂数据类型，如：array、object
typeof function 返回的是 function

2. 判断已知对象类型的方法： instanceof

console.log(1 instanceof Number);  //  false
console.log('' instanceof String);  //  false
console.log(true instanceof Boolean);  //  false
console.log(new Number(1) instanceof Number);  //  true
console.log(new String('') instanceof String);  //  true
console.log(new Boolean(true) instanceof Boolean);  //  true
// console.log(null instanceof null);  //  报错
// console.log(undefined instanceof undefined);  //  报错
console.log([] instanceof Array);  //  true
console.log({} instanceof Object);  //  true
console.log(function () { } instanceof Function);  //  true
console.log(new Date() instanceof Object);  //  true

注意：

instanceof 后面一定要是对象类型，并且大小写不能错
对于基本数据类型（string、boolean、number）以字面量的方式创建时，判断不出来；但是使用new 关键字创建却可以判断类型。
对于基本数据类型（null、undefined）不能用 instanceof
instanceof 可以用来判断复杂数据类型。
function () { } instanceof Function 是 true

3. 根据对象的constructor判断： constructor

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

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

注意：

constructor 后面一定要是对象类型，并且大小写不能错
可以判断基本类型（string、number、boolean）
不能判断基本类型（null、undefined）
可以判断复杂类型数据
对象直接继承和间接继承都会影响判断结果

4. Object.prototype.toString.call() 【重要】

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

注意：

可以把所有的类型都能判断。
如果更改原型的指向也不会影响判断结果。

5. 无敌万能的方法：jquery.type()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
    <script>
        console.log($.type(1) === 'number');  // true
        console.log($.type('') === 'string');  //true
        console.log($.type(true) === 'boolean');  //true
        console.log($.type(null) === 'null');  //true
        console.log($.type(undefined) === 'undefined');  //true
        console.log($.type([]) === 'array');  //true
        console.log($.type({}) === 'object');  //true
        console.log($.type(function () { }) === 'function');  //true
        console.log($.type(new Date()) === 'date');  //true
        console.log($.type(new Error()) === 'error');  //true
    </script>
</body>

</html>

注意：

只有用 jquery才能使用该方法
可以判断 date、error 等数据

6. isNaN() 判断是不是数字

console.log(isNaN(1));  // false
console.log(isNaN(''));  // false
console.log(isNaN(true));  // false
console.log(isNaN(null));  // false
console.log(isNaN(undefined));  // true
console.log(isNaN({}));  // true
console.log(isNaN([]));  // false
console.log(isNaN(function () { }));  // true

注意：

isNaN()函数把空串空格以及NUll 按照0来处理所以先去除
true 和 false 也是按照数字处理
对于空数组和只有一个数值成员的数组或全是数字组成的字符串，isNaN返回false，例如：'123'、[]、[2]、['123'],isNaN返回false
注意点比较多，需要把特殊值都考虑