JS 的 typeof 可以省略括号,JS 中的判断基本数据类型的四个方法: typeof, instanceof, constructor, prototype

JS 如何判断数据类型

在 JS 中有许多中提供了几个原生的判断数据类型方法,本文主要介绍 JS 中的判断基本数据类型的四个方法: typeof, instanceof, constructor, prototype

typeof

相信用 JS 的都肯定用过 typeof 来判断一些基本类型,但可能很多人都会误以为 typeof 是一个函数。

实际上 typeof 并不是一个函数,也不是一个语句,而是一个一元运算符(就像 ++, –, !)。

因为一元运算符是可以用括号将运算数包裹起来的,所以让看起来非常想一个函数,如 !(condition)

接下来回到正题,用 typeof 可以判断哪几种基本的数据类型呢

使用 typeof 判断后返回的是 字符串 类型

  1. string 如果这个值是字符串
  2. number 如果这个值是数值
  3. boolean 如果这个值是布尔值
  4. function 如果这个值是函数
  5. object 如果这个值是对象、数组或 null
  6. undefined 如果这个值未定义

可以看到 typeof 并不能单独的判断出数组,而是将其判断成对象。当然你可以使用 Array.isArray(ob) 来继续对 Object 进行数组的判断

 

console.log(typeof 1 === 'number')      // => true
console.log(typeof 'wjh' === 'string')  // => true
console.log(typeof false === 'boolean') // => true
console.log(typeof [] === 'object')     // => true
console.log(typeof {} === 'object')     // => true
console.log(typeof null === 'object')   // => true
console.log(typeof un === 'undefined')  // => true

instanceof

instanceof 运算符用来判断一个构造函数的 prototype 属性所指向的对象是否存在另外一个要检测对象的原型链上,需要区分大小写。( instanceof 不是函数,是一个双目运算符如 +, -… )

需要注意的是,instanceof 只能用来判断对象和函数,不能用来判断字符串和数字等。判断它是否为字符串和数字时,只会返回false。

 

var arr = []
var obj = {}
var func = functino () { console.log('Hello world') }

console.log(arr instanceof Array)     // => true
console.log(obj instanceof Object)    // => true
console.log(func instanceof Function) // => true

console.log(1 instanceof Number)      // => false
console.log('str' instanceof String)  // => false

constructor

在 Javascript 中每一个具有原型的对象都拥有一个 constructor 属性 (Object.constructor)

constructor 属性返回对创建此对象的数组函数的引用。

constructor 可以判断所有类型,包括 Array

 

// String
var str = "字符串"
console.log(str.constructor) // function String() { [native code] }
console.log(str.constructor === String) // true

// Array
var arr = [1, 2, 3]
console.log(arr.constructor) // function Array() { [native code] }
console.log(arr.constructor === Array) // true

// Number
var num = 5;
console.log(num.constructor) // function Number() { [native code] }
console.log(num.constructor === Number) // true

// Object
var obj = {};
console.log(obj.constructor) // function Object() { [native code] }
console.log(obj.constructor === Object) // tru

但是, constructor在类继承时会出错

 

function A(){};
function B(){};

var aObj = new A();

console.log(aObj.constructor === A);    //true;
console.log(aObj.constructor === B);    //false;

function C(){};

function D(){};

C.prototype = new D(); //C继承自D

var cObj = new C();

console.log(cObj.constructor === C);    //false;
console.log(cObj.constructor === D);    //true;

prototype

以上三种方法多少都会有一些不能判断的情况。为了保证兼容性,可以通过 Object.prototype.toString 方法,判断某个对象值属于哪种内置类型。

  • 需要注意大小写

 

    console.log(Object.prototype.toString.call('字符串') === '[object String]')         // -------> true;
    console.log(Object.prototype.toString.call(123) === '[object Number]')              // -------> true;
    console.log(Object.prototype.toString.call([1,2,3]) === '[object Array]')           // -------> true;
    console.log(Object.prototype.toString.call(new Date()) === '[object Date]')         // -------> true;
    console.log(Object.prototype.toString.call(function a(){}) === '[object Function]') // -------> true;
    console.log(Object.prototype.toString.call({}) === '[object Object]')               // ------


 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值