常问面试题，封装函数判断数据类型

在js中有哪些数据类型

在javascript中数据类型可以分为两大类：一个是基本数据类型 另一个是引用数据类型
基本数据类型：string number boolean undefined null symbol
引用数据类型：Object

js中判断数据类型的方法

1.typeof

能够返回部分数据正确的数据类型，但是有一些数据无法返回正确的数据类型。

typeof使用实例

console.log(typeof '') // string
console.log(typeof 1) // number
console.log(typeof Symbol()) // symbol
console.log(typeof true) // boolean
console.log(typeof undefined) // undefined
console.log(typeof null) // object
console.log(typeof []) // object
console.log(typeof new Date()) // object
console.log(typeof new RegExp()) // object

2.instanceof

用来判断 A 是否是 B 的实例。

function A(){}
const b = new A()
// 我们这里就说 b 是 A 的一个实例对象
// 也可以说是 b 是从 A 构造而来，A 是 b 的构造函数

instanceof使用实例

console.log(b instanceof A) // true
console.log([] instanceof Array) // true
console.log({} instanceof Object) // true

instanceof 也存在一个问题，检查的是原型

console.log([] instanceof Object); // true

3.constructor

获取到一个对象的构造函数

function B(){}
const c = new B()
console.log(c.constructor) // ƒ B(){}
console.log(c.constructor === B) // true

constructor使用实例

console.log(''.constructor) // ƒ String() { [native code] }
console.log(new Number(1).constructor) // ƒ Number() { [native code] }
console.log(Symbol().constructor) // ƒ Symbol() { [native code] }
console.log(true.constructor) // ƒ Boolean() { [native code] }
console.log([].constructor) // ƒ Array() { [native code] }
console.log(new Date().constructor) // ƒ Date() { [native code] }
console.log(new RegExp().constructor) // ƒ RegExp() { [native code] }

经过上面测试，我们感觉constructor能够达到我们的要求
但是constructor其实是有缺陷的
主要体现在两个方面：

• null 和 undefined是无效的对象，不会有constructor

console.log(null.constructor) // 报错 因为null没有constructor
console.log(undefined.constructor) // 报错

• 函数的constructor是不稳定的，如果将一个自定义对象赋值给某个对象的原型对象，那么constructor的指向会被更改

function A(){}
var a = new A()
console.log(a.constructor) // ƒ A(){}

function B(){}
B.prototype = {}
var b = new B()
console.log(b.constructor) // ƒ Object() { [native code] }

4.toString

toString是 Object上 面的原型方法，这是一个内部属性，默认返回对象类型，[object Xxx]， Xxx就是对象的类型。

虽然toString是位于Object上面，每个对象都有，但是基本上所有对象都对这个toString方法进行了重写。console.log([1,2,3].toString()); // 1,2,3

所以我们要调用toString，必须调用Object原型上面的toString

Object.prototype.toString.call

toString使用实例

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

解答面试题

封装一个函数来判断变量的数据类型

// 解答面试题
function getType(data){
  const type = typeof data;
  if(type !== 'object'){
    return type
  }
  return Object.prototype.toString.call(data).replace(/^\[object (\S+)]$/,'$1')
}
// 测试基本数据类型
console.log(getType(1)) // number
console.log(getType(true)) // boolean
console.log(getType("")) // string
console.log(getType(undefined)) // undefined
console.log(getType(null)) // Null
// 测试引用数据类型
console.log(getType(new Date())); // Date
console.log(getType(new RegExp())); // RegExp
console.log(getType([])); // Array

上面的正则表达式中的 \S 表是匹配非空白字符，replace是字符串的一个方法。