JS类型检测-笔记

1.

typeof

适用于：

1. 值类型

number

,

string

,

boolean

,

undefined

,

symbol

2. 函数

function

不适用于：

数组

array

，

null

，

object

，它们三返回的都是

object

var num = ;
var str = 'abcdefg';
var bl = true;
var udf = undefined;
var sym = Symbol();
function fn() {};

typeof num; // number
typeof str; // string
typeof bl; // boolean
typeof udf; // undefined
typeof sym; // symbol
typeof fn; // function

/* ------------------ */

var arr = [, , ];
var n = null;
var obj = {};

typeof arr; // object
typeof n; // object
typeof obj; // object
           

当然，在某些情况下，我们可以先排除

null

，然后再去判断

object

。如：

function aa (obj) {
  // 可以遍历数组或对象
  for (var key in obj) {
    // 此处使用!!来转换obj，如果为(null,undefined,空值'',false,数字0)则为false
    if (!!obj && typeof obj[key] === 'object') {
      aa(obj[key]);
    } else {
      // do something...
      console.log('key: ' + key + ', val: ' + obj[key]);
    }
  }
}

var obj = {
  aa: [, , , ],
  bb: null,
  cc: {
    aaa: ,
    bbb: ,
    ccc: false,
    ddd: '',
  },
  dd: 
}

aa(obj);

// 打印如下:
key: , val: 
key: , val: 
key: , val: 
key: , val: 
key: aaa, val: 
key: bbb, val: 
key: ccc, val: false
key: ddd, val: 
key: dd, val: 
           

2. constructor 和 instanceof

constructor

用来查看对象的构造函数

var bool = true;
console.log(bool.constructor == Boolean);// true
var num = ; 
console.log(num.constructor == Number); // true
var str = 'hello';
console.log(str.constructor == String); // true
           

instanceof

检测某个实例是否在某个对象的原型链上

var c = [];
console.log(c instanceof Object); //true
var d = ;  // 这些 普通类型 并不是对象
console.log(d instanceof Object); //false
var str = 'hello'; //  不是对象
console.log(str instanceof Object); //false
var num = new Number();
console.log(num instanceof Object); // true
console.log(num instanceof Number); // true
console.log(num instanceof Array); // false
num.constructor == Object; // false
num.constructor == Number; // true
           

3.

toString()

使用

toString

检测,必须使用

Object.prototype.toString()

,先来看看它输出什么:

那么如何使用

toString()

来进行检测呢?这里使用 call()来改变this的指向,

var bool = true;
console.log(Object.prototype.toString.call(bool)); // [object Boolean]
var num = ;
console.log(Object.prototype.toString.call(num)); // [object Number]
var str = 'hello';
console.log(Object.prototype.toString.call(str)); // [object String]
var arr = [];
console.log(Object.prototype.toString.call(arr)); // [object Array]
var a = undefined;
console.log(Object.prototype.toString.call(a)); // [object Undefined]
var b = null;
console.log(Object.prototype.toString.call(b)); // [object Null]
           

可以看出，使用

Object.prototype.toString.call()

来检测是比较完美的，推荐使用。

封装成函数

getType

function getType(value){  //基本上可以返回所有的类型，不论你是自定义还是原生
    return Object.prototype.toString.call(value).match(/\s{1}(\w+)/)[];
}
let obj = new Object();
console.log(getType(obj)); //"Object"
           

关于

new

生成的变量的类型

new

对象发生了事情：

1. 创建空对象

2. 把

this

指向空对象

3. 赋值

4. 方法中的

this

指代

new

出来的对象。

在构造函数中，一般不允许返回东西出来。 这好像是一个默认规定。如果

return object、array，function

， 那么

new

表达式返回值即使

return

值。否则返回的是构造函数的函数体形成的对象。

所以，

new

出来的东西一般是对象

object

，除非你在构造函数中改变返回的类型。

总结

• typeof

  ： 适合基本类型和

  function

  检测，遇到

  null

  失效，识别为

  object

• toString()

  ： 基本上可以识别所有类型，相对完美，但是在 IE6 7 8 下识别为

  [object object]

• instanceof

  ： 适用于自定义对象，也可用来检测原生对象，但在不同的

  iframe

  和

  window

  间检测时失效

推荐一个js库

is.js

github地址

这个库完美解决各种类型检测，如果项目中有复杂的类型检测，可以使用这个库。