JavaScript 数据类型判断超详细

JavaScript 数据类型判断

1.typeof

• 示例代码

  /**
   * 基本数据类型
   */
  console.log(typeof 2);               // number
  console.log(typeof true);            // boolean
  console.log(typeof 'str');           // string
  console.log(typeof undefined);       // undefined
  console.log(typeof null);            // object
  console.log(typeof Symbol());       // symbol
  console.log(typeof 123n);            // bigint
  
  /**
   * 引用数据类型
   */
  console.log(typeof []);              // object
  console.log(typeof function(){});    // function
  console.log(typeof {});              // object
  

• 总结：除了 null、Array，其他均能判断正确

2.instanceof

• 示例代码

  /**
   * 基本数据类型
   */
  console.log(2 instanceof Number);               // false
  console.log(true instanceof Boolean);            // false
  console.log('str' instanceof String);           // false
  // console.log(undefined instanceof undefined);       // Right-hand side of 'instanceof' is not an object
  // console.log(null instanceof null);            // Right-hand side of 'instanceof' is not an object
  console.log(Symbol() instanceof Symbol);       // false
  console.log(123n instanceof BigInt);            // false
  
  /**
   * 引用数据类型
   */
  console.log([] instanceof Array);              // true
  console.log(function(){} instanceof Function);    // true
  console.log({} instanceof Object);              // true
  

• 总结：引用数据类型可以成功判断，基本数据类型不能

3.constructor

• 示例代码

  /**
   * 基本数据类型
   */
  console.log((2).constructor === Number);               // true
  console.log((true).constructor === Boolean);            // true
  console.log(('str').constructor === String);           // true
  // console.log((undefined).constructor === undefined);       // Cannot read properties of undefined (reading 'constructor')
  // console.log((null).constructor === null);            // Cannot read properties of null (reading 'constructor')
  console.log((Symbol()).constructor === Symbol);       // true
  console.log((123n).constructor === BigInt);            // 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
  

• 总结：已经很完美了，在使用时需要注意特判null，undefined，以避免程序错误。但是无法正确识别出将原型改变了的情况。

4.Object.prototype.toString.call()

• 示例代码

  /**
   * 基本数据类型
   */
  console.log(Object.prototype.toString.call(2));               // [object Number]
  console.log(Object.prototype.toString.call(true));            // [object Boolean]
  console.log(Object.prototype.toString.call('str'));           // [object String]
  console.log(Object.prototype.toString.call(undefined));       // [object Undefined]
  console.log(Object.prototype.toString.call(null));            // [object Null]
  console.log(Object.prototype.toString.call(Symbol()));       // [object Symbol]
  console.log(Object.prototype.toString.call(123n));            // [object BigInt]
  
  /**
   * 引用数据类型
   */
   console.log(Object.prototype.toString.call([]));               // [object Array]
  console.log(Object.prototype.toString.call(function(){}));    // [object Function]
  console.log(Object.prototype.toString.call({}));              // [object Object]
  
  /**
   * 针对上述改变原型情况
   */
  Array.prototype = new Function();
  var a = new Array();
  console.log(Object.prototype.toString.call(a)); // [object Array]
  console.log(a.constructor===Function);          // false
  console.log(a.constructor===Array);             // true
  
  function Fn(){};
  Fn.prototype = new Array();
  var f = new Fn();
  console.log(Object.prototype.toString.call(f));  // [object Object]
  

• 总结：perfect！但是要记得该方法的返回结果“[object Xxx]” 。唯一的遗憾是针对自定义类型它失去了constructor识别构造函数的能力，只能返回“ [object Object]”