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位址

這個庫完美解決各種類型檢測，如果項目中有複雜的類型檢測，可以使用這個庫。